😇

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

2021/07/11に公開約2,200字7件のコメント

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

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

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はおそらくほとんど必要ないのに実装が複雑になる機能だからサポートされてないのだと思います。

https://docs.aws.amazon.com/amplify/latest/userguide/server-side-rendering-amplify.html#nextjs-version-support

AmplifyのNext.jsサポートはとても最近リリースされたので、どんどん拡充されていくことが期待できます。

少しでも得るものがありましたら幸いです。

AmplifyのNext.jsサポートはとても最近リリースされたので、どんどん拡充されていくことが期待できます。

ですね。そこは期待したいですよね。

AWSで完結できるのは非常に嬉しいですよね。コスト的にもセキュリティ的にも。

色々とご指摘ありがとうございました。

ログインするとコメントできます