yasutomogのブログ

Software Engineerの雑記

AmplifyでNext.jsをSSRしたときのビルドログ出力先

Amplify Next.js SSR build

yasutomo.hatenablog.com

昨日、上の記事を書きましたが、Advent Calendarにまだ空きがあるので、雑多なメモを残しておきます。

概要

  • Amplify環境でNext.jsのアプリケーションを構築
  • Next.jsでは、ページによってSSG、ISR、SSRを使い分けている

課題

  • SSRしているページの描画が遅いことが発覚しログ確認しようと思った
  • SSRやISRしているときに、getStaticProps や getServerSideProps 関数でconsole.log出力していたが、どこで確認できるか分からなかった

解決方法

f:id:yasug:20211202001705p:plain

  • Amplify Console のFrontend environments から デプロイをクリック
  • 以下のようにCloudFrontやLambda@Edgeの識別子を確認することができる
2021-12-01T07:37:02 [INFO]: Beginning deployment for application aaaaaaa, branch:dev, buildId aaaaaa
2021-12-01T07:37:05 [INFO]: Deploying SSR Resources. Distribution ID: bbbbbbb. This may take a few minutes...
2021-12-01T07:37:05 [INFO]: Deployed the following resources to your account:
2021-12-01T07:37:05 [INFO]: - CloudFront Domain ID: ccccccc
2021-12-01T07:37:05 [INFO]: - SSR Lambda@Edge: dddddd-dddddd
2021-12-01T07:37:05 [INFO]: - Image Optimization Lambda@Edge: eeeeee-eeeeee
2021-12-01T07:37:05 [INFO]: - ISR Lambda: ffffff
2021-12-01T07:37:05 [INFO]: - ISR SQS Queue: gggggg
2021-12-01T07:37:05 [INFO]: - S3 Bucket: hhhhhh
2021-12-01T07:37:05 [INFO]: Deployment complete
  • AWSコンソールで、バージニア北部（us-east-1）リージョン からLambdaの識別子でフィルタし、そこからCloudWatchをたどることで、Next.jsのビルド時のログを確認することが可能

気になった点

  • SSRのログを確認しようとしたときに、「 SSR Lambda@Edge」の値からたどっても見つからなく、ISR Lambda の方を確認すると、SSRページのログも出力されていた。