Closed2023/09/13にクローズ10

aws-lambda-web-adapter x Next.jsを試す

この記事を参考にまずは動くことを確認する

Internal Server Errorが返る。

記事の記載から変更した点

Node.js v16 -> 18
aws-lambda-adapterのイメージを0.5.0 -> 0.7.0
npm -> pnpm

CloudWatch Logでエラーログ確認

error Failed to handle request for / 
TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11576:11)

ipv6使用が根本原因なのか、undici が優先利用されて node-fetch が利用されていないのが根本原因なのか。

とりあえず、

v16 に下げれば動きそう
EOLになる16系を使いたくない

ということで18で動かすためになんとかする

__NEXT_USE_UNDICIを falsy な値にしてあげれば node-fetch を使ってくれそう

このIssueに辿り着いた。

next@13.4.7にダウングレードする

v13.4.0でnode-fetchのpolyfillごと削除されてデフォルト undici になってるから大人しくダウングレードする

https://hogehogehogehoge.execute-api.ap-northeast-1.amazonaws.com/

ダウングレードして動いた。

現時点での環境情報

Next.js

next@13.4.7
typescript@5.1.6
tailwindcss@3.3.3

AWS CDK

aws-cdk@2.91.0
@aws-cdk/aws-apigatewayv2-alpha@2.91.0-alpha.0
@aws-cdk/aws-apigatewayv2-integrations-alpha@2.91.0-alpha.0
aws-cdk-lib@2.91.0

AWS Lambda

runtime: node.js@18.x
architecture: amd64
memorySize: 256
timeout: 30s
& API Gateway

node.js v18のfetchもまだExperimentalなはずなのに、なんでundiciをデフォルトにしたんだ...っていう気持ち。

この後やりたいこと（順不同）

CDK周り

ECRのリポジトリ名を指定したい
検証環境/本番環境を環境変数で切り分ける
Lambda内でS3/DynamoDB等にアクセスするために専用のRoleArnを作成して権限を絞る（cdk.jsonでできそう？）

※ クラメソさまさまです。

Next.js x lambda-web-adapter周り

basePathを指定した時の挙動・デプロイ方法の変化など
CloudFrontを導入して、Stale-While-Revalidateまで動作確認
それっぽいアプリケーションを作成した上でパフォーマンス計測
- ブログ（microCMS）
- データ系（MySQLあたり）

他

lambda-web-adapter と Remix

このスクラップは2023/09/13にクローズされました