はじめに
ポートフォリオを作成していて、React+Cognito+AmplifyでメールアドレスでのOIDCを実装しデプロイしようとしました。しかしそこでいろいろ壁にぶち当たったので、どこで躓いたのか、どのように乗り越えたのかをまとめようと思います。
＊ジュニアレベルですので、手順や言葉選びが間違っていることがあるかもしれないです。
関門１．http:localhost:5173をcallbackURLに設定するとエラー
Cognitoのコンソール画面に表示されるquick startのコードをコピペし、サインイン→メールアドレス＋パスワードを入力→指定したURLにアクセスしようと思いました。しかし、サインイン→エラー「An error was encountered with the requested page」と表示されてしまいます。
しかし、適当なサイト（https）を設定すると、きちんとリダイレクトされました。コンソールには、「テスト目的ならhttpでもlocalhostなら可」とあったので不思議でしたが、httpsを設定すればうまくいくんじゃないかと思いました。なので一旦Amplifyをデプロイして発行されたhttpsのURLをcallbackURLに設定しようと思いました。
関門２．AmplifyCLIでエラー連発
AWSCLIをインストールし、いざCLIでAmplifyを構築しようとしました。
>npm i -g @aws-amplify/cli
>amplify configure
ここまでは良かったんですが、これからエラーの嵐に直面します。
IAMユーザーに必要な権限がない
>amplify init
🛑 User: arn:aws:iam::・・・・:user/・・・・・ is not authorized to perform: amplify:CreateApp on resource: arn:aws:amplify:・・・・・・:apps/* because no identity-based policy allows the amplify:CreateApp action
ログインしたIAMユーザーにAmplifyを構築する権限がないと怒られました。なのでAdministratorAccessとAdministratorAccess-Amplifyを与えました。
認証情報がキャッシュされていた
権限を付与して上記と同じコマンドを実行しても同じエラーが出ました。これはログインしてるIAMユーザーの情報がキャッシュされていて権限が更新されてませんでした。なのでいったん入り直します。
>amplify logout
>amplify configure
>amplify init
Reactプロジェクトをビルドせずに（distフォルダを作成せずに）GitHubにプッシュしていた
AmplifyコンソールでGitHubと連携、デプロイし、ホスティングを登録しようとしたら、デプロイしたURLがないと怒られました。
t>amplify add hosting
No hosting URL found. Run 'amplify add hosting' again to set up hosting with Amplify Console.
Ampifyコンソールを開くと、デプロイ失敗とありました。どうやらdistフォルダがないのでAmplifyがデプロイできなかったらしいです。
関門３．Amplifyデプロイ失敗
ローカルでビルド、プッシュ後、再びホスティングを登録しようとしても同じエラーが出ました。そこでAmplifyコンソールを開くと、デプロイ失敗とありました。
AIにビルドのログを読ませると、どうやら、Amplifyをデプロイする際にビルド用のロールを作成して付与しないといけなかったらしいです。しかもそのためにはAmplifyを作り直さないといけないそう…。
>amplify delete
>amplify init
>amplify add hosting
この後Amplifyコンソールでデプロイします。この過程でビルド用のロールを作成、付与ができます。
そして無事、正常にデプロイできました。
関門４．Amplifyが発行したURLにリダイレクトされない
発行されたURLにアクセスし、サインインすると、関門１で出てきたエラーが再出現しました。しかし、そこでコンソール、コードともsignoutURLを設定してみると、見事サインイン→メールアドレス+パスワードを入力→callbackURLにリダイレクトされました。
関門５．http:localhost:5173にリダイレクトされない
動きはするんですが、この状態だとローカルではテストできず、コードを変えるたびにビルド→プッシュをしなければならず、開発効率が悪くなりすぎます。そこでCognitoコンソールで設定してるcallbackURL,signoutURLの両方にAmplifyのURLだけでなく、http:localhostを設定してみました（Amplifyを作成する前はエラーが起きました）。するとサインイン後、無事localhostに遷移できました
最後に
今回の反省点は、英語の公式ドキュメントを軽くしか読まず、AIやブログなどの二次情報に頼ってしまったことです。一次情報が参考文献として最も重要なことは理解していて実践できていると思っていたんですが、Amplifyの公式ドキュメントを開くと大量の英文が目に入り、精読せずに、AIに聞いたりと楽な方に流れてしまいました（機械に翻訳された日本語は英語より苦手です）。その結果遠回りをしてしまったと思ってます。中高時代、英語は得意な方だったので、少しずつ英語に対する抵抗感をなくしていきたいです。