はじめに

今回、Amplifyを使っての開発でハマったことは、前回まとめた、[ AWS Amplifyで既存のCognito User Pool / DynamoDBをimportする方法 ]
　https://qiita.com/03hiro/items/118f6e0f66d6cdff439b
で作っていたアプリです。
その中で、「Cognitoでの認証機能の実装」、「AmplifyでCognitoのユーザープールからユーザー情報を取得する」、「AmplifyでDynamoDBのからユーザー情報を取得する」。また、「開発の経験がないことによってハマったこと」。この4点についてまとめようと思います。

Amplifyを使うのが慣れていなかたったこともあり、かなり作るのに時間がかかってしまい、最初の方での作業でハマったことに対する対処方法が違う点があるかもしれませんが、その際は教えていただけたら幸いです。

###1、Cognitoでの認証機能の実装でハマったこと（実践したことも）
1、amplify import authコマンドで既存のCognitoをimportする
2、その後、Reactの「App.js」ファイルを書き換え、amplify pushで更新した。
3、Amplify コンソールで確認すると、ビルドの際にエラーが発生していた。

####対処方法
環境変数が設定されていないことが原因でした。
１、Amplify コンソールを開く

２、サイドバーのアプリ設定>環境変数を選択肢する。

3、変数の管理ボタン押し、環境変数を設定する。
(今回の場合は[amplify/team-provider/info.json]から定義してある変数を設定しました)

###2、CognitoのUserPoolから自分以外のユーザー情報を取得する際にハマったこと（実践したことも）
1、APIを使ってのデータのやり取りについて未経験の為知識がなく、とりあえずそれらしいことを、片っ端から調べてみる。
2、調べると「aws-sdk」を使う必要があることは分かった。
3、以前勉強したチュートリアルでは「GraphQL API」で学習をしていたのでとりあえず、amplify add apiコマンドで追加してみる。
4、CLIの? Restrict API accessで「Yes」を選択するとエラーが起きる。
5、[4]をとりあえず置いといて、調べたコードを自分のに当てはめてみるが動かない。
6、自分では対処法が分からなかったので、先輩にアドバイスをもらう。

対処方法

1、「aws-sdk」をnpm i aws-sdkコマンドでインストールする。

2、「GraphQL API」でもできるが、「REST API」の方で今回は進めた。

3、上記の[4]での原因は、最初のCognitoでの設定が途中うまくいってなかった為、「Yes」にするとエラーが起きることが分かり、やり直すよりも今回は「No」を選択肢し、サーバー側の方で、設定を定義するようにした。

4、これ以降は、前回の記事の通りに進めたら取得ができました。

※ 5、作業を進めていくと、たまに「AWS IAM」がdefaultに切り替わってることがあり、最初は変わってることに気付かずにCognitoの認証が通らずハマりました。なので作業に入る前は、毎回使っているIAMを確認する必要があります。

###3、DynamoDBからユーザー情報を取得する際にハマったこと（実践したことも）
1、とりあえず、CognitoのUserPoolからユーザー情報を取得するやり方を参考にAPIの実装しamplify pushをするとエラーが出てうまく更新されない。2、amplify pushをするとエラーが出てうまく更新されない。
2、本来、APIを追加するとCLIの選択によってここで「Function」も作られるはずが、作られない。
3、取得方法を探すが記事などの内容のどこまでを参考にすれば良いのか分からない。
4、基本的な書き方を先輩にアドバイスをもらい実践するが動かない。
5、その後、アドバイスをもらいコードを書くが取得できない。

対処方法

1、作業しているローカルの「git」や「Backend environments」などに手探りで色々と追加などをしたため、一度、git cloneし作り直した。

2、「Function」が作られない原因はCLIの途中でエラーが起き最後まで完了していなかったことが原因でした。（ここでも「Restrict API access」が主な原因でした。。。）

3、動かなかったのは、コードを試したのがReactの方で試したのが原因でした。
Create React Appでは「　REACT_APP_（名前）　」のように一定の命名規則に則った環境変数をビルド時だけ読み込むのが仕様となっているそうです。
その為、その命名の規則ではない環境変数では読まれずに「セットした環境変数が読まれていない！」という問題が発生するみたいです。

4、2つ目の動かなかった原因は、APIのパスがもう一つのAPIのパスと同じだったのが原因でした。

5、[backend/function/app.js]に直接テーブル名を直接コードに落とし、「scan」で一括取得を試しました。
その後に「query」の書き方に変更し、取得する条件を加えていきます。（この辺りも前回の記事の通りに進めました）

4、開発の経験がないことによってハマったこと

正直、ここでの原因は最初の作業に入る前の環境を作る際に、あまり今後を意識しないで始めた為に後々になってから、遭遇しなくていいエラーにも遭遇したと思います。
手探りで作業を開始しので仕方がないとは思いますが、ここまで影響が出るとは思いませんでした。。。

gitやAmplify environmentsの環境を開発用（dev）と本番用（prod）として初めから分けていなかったことが、作業途中で気付き（本番用のUserPoolと開発用のUserPoolを分ける際）、environmentsではprodなのに取得しているUserPoolはdevといったおかしな事になってしまいました。

さいごに

今回はアプリを作っていく上で一日に少なくとも3、４回ハマってしまい、作業が止まってしまいました。
それの半分は作業している環境が悪かったことが原因だと思います。
今起きているエラーの原因は、書いているコードが違いエラーが起きているのか、それともそれ以外が原因なのかが、これだと分からなくってしまいますので、環境だけはしっかりと整えた上で今後は作業していきたいと思いました。

また、今回一度だけ、「AWS Amplify」自体の不具合にも遭遇したため、今後経験を積んで行き、自分に問題があるのか、それともサービス自体に問題があるのかを見極める力も培っていきたいです。