Open18

[Flutter + Amplify]アプリ開発のための備忘録

sho5sho5

[Flutter] Amplifyコマンドを実行すると「TextEncoder is not defined」となる

現象
// これらを実行すると
$ amplify codegen models
$ amplify push

こうなる↓

(node:92736) ExperimentalWarning: The fs.promises API is experimental
🛑 An error occurred during the push operation: TextEncoder is not defined
⚠️ Please refer Amplify CLI troubleshooting guide at : https://docs.amplify.aws/cli/project/troubleshooting/

原因

原因

  • nodeのバージョンが古すぎた
$ node --version
v10.16.0

対策

  • nodeのバージョンアップ

https://tarovlog.com/2021/01/16/update-node-js/

nodeのバージョンアップ 手順
// 現在のバージョン
$ node -v

// インストール可能なバージョン
$ nodebrew ls-remote

// バージョンを指定してインストール
$ nodebrew install-binary v17.1.0

// 利用可能なバージョンを確認
$ nodebrew ls

// 使用バージョンを指定
$ nodebrew use v17.1.0

// 最後に環境パスを通す
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
$ source ~/.zprofile
sho5sho5

[Flutter] 基本的なAmplifyコマンド

// GraphQL APIの作成(初回)
$ amplify add api

// モデルの作成 (GraphQLのスキーマ情報を編集 (schema.graphql))
$ amplify codegen models

// ローカルのモデル変更をDBに反映
$ amplify push

// 静的リソースをAmazon S3およびAmazon CloudFrontに公開
$ amplify publish

// DBからの変更をローカルで取得
$ amplify pull
// バージョン確認
$ amplify --version

// アップデート
$ npm i -g @aws-amplify/cli
// モデルの権限確認
$ amplify status api -acm モデル名
sho5sho5

[Flutter] Amplifyで独自環境を構築

$ amplify env add                                                                                                                                                                                                                                                                                                                                                                                           

? Enter a name for the environment sho5dev // 環境名称。名前(略称)+dev
? Select the authentication method you want to use: AWS profile
? Please choose the profile you want to use amplify-cli-user // amplify-cli-user(作成済みのプロファイル)

// 完了後にpush?
$ amplify push
// 開発環境一覧
$ amplify env list

| Environments |
| ------------ |
| *dev         |
| stg          |
| prod         |
| shdev        |

// 切り替え
$ amplify env checkout stg
// ローカルにない場合はpull (idはwebより)
$ amplify pull --appId XXXXXXXXX --envName XXXdev
サーバー上に環境はあるのに、pullできない場合
  • ローカルの「team-provider-info.json」を確認。そこに自分の環境がなければ、gitなどから復元して、再度上記「pull」を行う
ヒント
Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify add <category>" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify console" to open the Amplify Console and view your project status
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

Pro tip:
Try "amplify add api" to create a backend API and then "amplify push" to deploy everything
sho5sho5

[Flutter] Amplify CLIのアップデート

※CLI = Command Line Interface

$ amplify --version // 現在のバージョンを確認
$ npm i -g @aws-amplify/cli // $ npm install -g @aws-amplify/cliでもいい?
sho5sho5

[Flutter] Amplifyで「not configure Amplify」とエラー

//1.以下ファイルを削除
amplify/cli.json

//2.以下を実行
$ amplify configure

//3.以下を実行すると1.で削除したファイルが再生成
$ amplify init
sho5sho5

[Flutter] AmplifyのDB接続

Amplify.DataStore.query()

Future<List<T>> query<T extends Model>(
  ModelType<T> modelType, {
  QueryPredicate<Model>? where,
  QueryPagination? pagination,
  List<QuerySortBy>? sortBy,
})


sho5sho5

【Flutter】GraphQLResponseErrorで「権限がない」と怒られる

"message": "Not Authorized to access XXXXXX on type XXXX",

<原因と対策>

  1. ユーザー権限がないため、Cognitoの「ユーザーとグループ」で権限を付与
  2. 一度ログアウトし、再ログイン
    ※1.と2.の間で「amplify pull」も必要?
sho5sho5

【Flutter】Amplify.DataStore.save(T model) でAWSのDynamoDBに登録できない

// 終わったらこちらを忘れずに
$ amplify push
$ amplify codegen model
sho5sho5

【Flutter】DynamoDBに登録したデータ取得ができない(Amplify)

schema.graphql編集後に以下実行したか確認

$amplify push
sho5sho5

【Flutter】AmplifyでDynamoDBにデータ登録ができなくなる 1

対策

・DynamoDBの全てのテーブルのデータを削除
・Amplify.DataStore.clear() でローカルストレージのデータもクリア

理由

・schemaの内容が変わり、保存データと現在との整合性が取れなくなると、データ取得できなくなる場合があるらしい(DBへの直接入力の場合も注意)

補足

・今回、データ取得はできるが、データ登録が出来なくなったという事例

https://zenn.dev/link/comments/c598d79c78ed77

sho5sho5

【Flutter】$ amplify remove api でエラーが発生

API経由でのDB登録が上手くいかなくなり、一旦remove

$ amplify remove api
$ amplify push

その後、API経由で登録しようとすると...

例外が発生しました
ApiException (ApiException(message: A server with the specified hostname could not be found., recoverySuggestion: A server with the specified hostname could not be found., underlyingException: A server with the specified hostname could not be found.))

未解決

▼諦めてステージング環境を作り直した
https://zenn.dev/link/comments/a57b111ebb0507

sho5sho5

[Amplify] STAGING 環境の構築

1. AWS マネジメントコンソールから自分のAmplifyの環境を削除

2. 以下コマンド入力

// ローカルの環境を変更(大元がある場合)
// 注:<env-name>を自分たちの環境に置き換え
$ amplify env checkout <env-name1>

// ステージング環境を削除
$ amplify env remove <env-name2>

// 新しいAmplify環境を作成 (AWS profile / amplify-cli-user ※プロジェクト毎に異なる)
$ amplify env add 
$ amplify push

▼参考
https://amplify-sns.workshop.aws/ja/70_multi_env/00_add_env.html

▼環境コマンド一覧 (env関連)
https://docs.amplify.aws/cli/teams/commands/

sho5sho5

新規アカウント作成やログインしようとすると、以下エラーが発生

Could not login - Make sure that the user pool has a requested resource:User pool client {IDが記載} does not exist.

[解決策]シミュレーターの再起動

sho5sho5

【Flutter】AmplifyでDynamoDBにデータ登録ができなくなる 2

現状

・DynamoDBへのデータ登録ができない(通常+API経由共に。ローカルへの登録は可能)

やった事

・都度ローカルのクリア(Amplify.DataStore.clear();)
・DynamaDBの全てのテーブルデータを削除
・Schemaのリセット(ほぼ空にしてpush、戻して再push)
・Simulatorの再起動
・環境構築のやり直し($ amplify env addにて、AWS profile、Access keyどちらの選択肢も試す)
・$ flutter clean
・$ flutter doctor(異常なし)

解決

$ amplify upgrade
// パソコンの再起動
sho5sho5

【Flutter | Amplify】You must have virtualenv installed and available on your PATH as "venv". It can be installed by running "pip3 install venv".

amplify pushをすると、仮想環境に関するエラーが発生。
エラー内容に記載の方法 (pip3 install venv) では解決しない。

$ amplify push
// 以下のエラーが発生
You must have virtualenv installed and available on your PATH as "venv". It can be installed by running "pip3 install venv".

代替の解決方法↓

// $ pip3 install venvで上手くいかない場合、以下で解決
$ pip3 uninstall virtualenv
$ pip3 install virtualenv  
sho5sho5

【Flutter】AmplifyでDynamoDBにデータ登録ができなくなる 3

要確認事項

  • schema.graphqlのセキュリティを確認( allow: )(Cognitoのグループ変更にはタイムラグが生じる事にも留意)
  • Amplify.DataStore〜ではなくAmplify.API〜を使用
  • $ amplify push が漏れていないか