yasutomogのブログ

Software Engineerの雑記

Next.js on Amplifyの503エラーの続き

Next.js Amplify ISR 503 SQS

概要

yasutomo.hatenablog.com

  • 上記ブログの続き
  • AmplifyでNext.jsをデプロイしたタイミングだと問題なく動くが、あるタイミングからCloud Frontの503エラーになっていた
  • 上記事象が発生するのは、同じAmplifyプロジェクト上で同じソースコードで構築したhostingでも再現するものとしないものがあった

原因

  • Next.js on Amplifyで構築される、Lambda@Edge に SQS の権限がアタッチされないことがある
  • SQS の権限がアタッチ「されるとき」と「されないとき」の2パターンあるのがポイントで、ケースは以下
    • Amplify hosting作成時、はじめてデプロイするタイミングのソースコードがISR対応している：SQSの権限がアタッチされる
    • Amplify hosting作成時、はじめてデプロイするタイミングのソースコードがISR対応していない：SQSの権限がアタッチされない
  • ISRのキャッシュが切れて裏でページ生成されるタイミングで、Lambda@edge から SQS に SendMessage しようとしたときに権限がないと503エラーとなる

対処方法

  • 解決するには、以下2つがある。（現状はどちらも試していて、どちらのケースでもうまく動いている）
    • Amplify hostingを作り直す
      • 事象が発生しているhostingを一度削除し、改めて作り直す
      • まだサイト公開前とかであれば、こちらの方法がシンプルで良さそう
    • 事象が発生している Lambda@edge にSQSの権限をアタッチする
      • 雑にやるなら、AmazonSQSFullAccess ポリシーを付ける。正しくやるなら、"Resource": "arn:aws:sqs:us-east-1:<アカウント ID >:", の Actionに "sqs:SendMessage" を指定する。
    • Lambda@edge や SQS のIDについては、Amplifyコンソールのデプロイ部分のログに出力されている
    • Lambda@edge に権限アタッチ後、改めてデプロイしても自分で割り当てた権限はついたままとなっている（Amplify側の挙動の保証はない？）

所感

  • プロジェクト構築時は、シンプルな状態から始めることが多いので、途中からISR対応ページなど追加したときに気をつける
  • Amplifyコンソールのデプロイフェーズのログが重要
    • ここに出力されている、CloudFront や Lambda@edge のIDから詳細ログを追う力が必要

調査のときに見ていたGitHubとドキュメント

github.com

github.com