😇

Vercelを使わずにNext.jsするのはまだ早かった

2 min read 6

こちらの記事の続きになります。

https://zenn.dev/makumattun/articles/6e260f3a5af117

serverless-nextjs

2021年7月11日現在

https://www.serverless.com/plugins/serverless-nextjs-plugin/
こちらを使うことによって、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

https://github.com/serverless-nextjs/serverless-next.js/issues/819
https://github.com/serverless-nextjs/serverless-next.js/issues/935

まとめると原因は不明です。

エラーを探る

まず、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に戻りました。