はじめに
Amplify + React Native で構築されたプロダクトで React Native を React (Next.js) へリプレイスすることになったんですが、そのプロダクト的にSEOが外せない要件だったので、Amplify でSSRをどうすればできるか調べました。
以下の公式チュートリアルで簡単にSSRのデプロイ環境が作れるようだったので試しました。(Amplify Hostingというもの)
その際ハマったポイントをメモしておきます。
参考 (結果的に今回と関係なかった)
SSR = サーバーが必要 = ECSを建てる? と思って以下の記事を参考にしようとしていましたが、その後Amplify HostingがSSRをサポートしたとのことで、こんな大掛かりな対応は必要ないみたいでした。
CDKToolkit のエラー
チュートリアルの通りデプロイを開始したところ、以下のエラーですぐ止まってしまいました。
Stack:arn:aws:cloudformation:{AWS_REGION}:{ACCOUNT_ID}:stack/CDKToolkit/xxxx is in UPDATE_ROLLBACK_FAILED state and can not be updated
どうも2年ぐらい前にAWS CDKの学習の際に作られていたCloudFormationが悪さしていたのようなので削除してみたら解消しました。(その際 UPDATE_ROLLBACK_FAILED になったまま放置していたのかも...)
権限不足のエラー
この後発生したのがIAMの権限不足のエラーでした。(ログ残し忘れた...)
以下の記事と同様のエラーだったと思います。
記事と同様、実行ユーザーの権限が PowerUserAccess だったので、権限の追加が必要だったようです。
色々権限が必要なようだったので、一時的に AdministratorAccess を付与して対応しました。
ここまでの対応でデプロイ成功しました！
おまけ: BootstrapNotDetectedError
その後、検証がてら試行錯誤する中で何度もAmplifyのコンソール上でアプリの削除、再作成を行ったのですが、デプロイ時に BootstrapNotDetectedError が発生するようになってしまいました。
エラーメッセージの通り、以下を実行で解決しそうですが、最初のアプリケーション作成時はそれをやらなくてもデプロイ成功したのになんで?と思いました。
(当たり前といえば当たり前ですが裏側で AWS CDK が使用されてるんですね)
cdk bootstrap aws://{ACCOUNT_ID}/{AWS_REGION}
Amplify のコンソール画面でデプロイ前に以下のような注意書きが一瞬ちらついていて、そういえば最初はこの注意書きが出ていたなと思いました。
何かデータで状態保存しているのだろうと調べてみたところ、パラメーターストアに /cdk-bootstrap/xxxx/version のように値が保持されていました。
これを削除して再度アプリを新規作成してみたところ、前述の注意書きが表示されるようになりました。
Amplify はパラメーターストアも使用しているのか。
おわりに
Amplify はアプリ開発者が手軽にインフラ構築できるものとのことですが、ちょこちょこハマるポイントはありそうで調べ始めると結局色々踏み込むことになりそうだな、と思いました。
Next.js はこれから勉強しようと思ってたところなので、簡単にデプロイできるのは助かるし(Vercelの方が簡単なのかもですが、AWSサービスと連携するには便利そう)、使いこなせると面白いサービスかなと思いました。