😇
Vercelを使わずにNext.jsするのはまだ早かった
こちらの記事の続きになります。
serverless-nextjs
2021年7月11日現在 こちらを使うことによって、Next.jsの10系の機能をAWSにデプロイできると歓喜してそちらをつかいながら実装しておりました。
ISRを設定したページで503エラーの頻発
こちらエラーの全文を載せておきます。
503 ERROR
The request could not be satisfied.
The Lambda function associated with the CloudFront distribution is invalid or doesn't have the required permissions. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.
Generated by cloudfront (CloudFront)
Request ID: q64GQSBjLWWJAxCkp6K8MzvcL-fDPiD1IsjA_hxHwNxfkJVQHK4uzw==
エラーが生じる構成とバージョン
バージョン
Next.js 10系
package.json
"next": "10.2.0",
"next-auth": "^3.23.0",
serverless-next.js
next-serverless:
component: "@sls-next/serverless-component@1.20.0-alpha.23"
inputs:
構成
こちらの構成になっていて、GrqphQLクライアントにはAppSyncClientを使用していました。ほぼほぼApolloと同じで、違いは認証のキーを指定するところくらいでしょうか？
関連しそうなIssue
まとめると原因は不明です。
エラーを探る
まず、serverless-next.jsでlambdaの実行しているかどうかを調べました。
結果的には、エラーレートには何も表示されておらずエラーメッセージの通りlambdaではなく
CloudFront ←→ Lambda@Edge 間でのエラーのようでした。
Lambda@Edgeは制限が厳しいと効いたことがあるのでlambdaのクオータを眺めていました。
Lambda クオータ
気になるのは、
・1 秒あたりのリクエスト:10000
・同時実行数:1000
なので、みてみました。
全く問題ないですね。
おそらくはこれが起きるのはコールドスタートか、そこらへんではないかと思います。
Vercelに同じものをデプロイして確認
503などは起きずに安定して表示ができています。なのでソースコードは高い確率であっているので、
原因はLambda@EdgeとCloudFront、serverless-next.jsあたりにありそうです。
まとめ
DevToolをつかってもCloudFrontにもエラーログが出てないので調査もできずにVercelに戻りました。
Discussion
素晴らしい記事をありがとうございます！
Lmabda@Edgeとなっている箇所がありました。Lambda@Edgeです。
ところで、AWS Amplifyはお試しになりましたか？
AmplifyのNext.jsサポートはAWS公式のものなので相当気合が入っています。
私が試した時はWebpack 4を使うよう明示的に設定しないと動きませんでしたが、今は分かりません。
コメントありがとうございます！AWSのAmplifyサポートは9系なので、10系でISRができることが割と焦点かと思っております。SSGとSSRができたらいいという場合はAmplifyでいいですね。
10系はサポートされてますが、ISRとOptional Catch All Routesがサポートされてないようですね、勉強になりました。
ISRがサポートされてないのはおそらくLambda@Edge以外のリソースが必要になるからですね（EventBridgeなど）。そのうちサポートされると思います。
Optional Catch All Routesはおそらくほとんど必要ないのに実装が複雑になる機能だからサポートされてないのだと思います。
AmplifyのNext.jsサポートはとても最近リリースされたので、どんどん拡充されていくことが期待できます。
少しでも得るものがありましたら幸いです。
ですね。そこは期待したいですよね。
AWSで完結できるのは非常に嬉しいですよね。コスト的にもセキュリティ的にも。
色々とご指摘ありがとうございました。
やはりもうISRに対応したようです。
記事のリンクもエラーになってました。そのURLだと記事の著者しか見られないです。
正：https://zenn.dev/makumattun/articles/6e260f3a5af117
直しました！ありがとうございます。