NuxtをコンテナにしてLambdaでデプロイするのが超簡単になった2021年 #JavaScript

以前書いたLaravelをコンテナにしてLambdaでデプロイするのが超簡単になった2021年のNuxtバージョンです。Djangoバージョンはこちら

有名どころでnuxt-serverlessなど色々ありますが、こんな手間・デメリットがあったかと思います。

静的ファイル用にS3を用意、同期対応
API GatewayのURLに付与されるステージ変数の対応
npx create-nuxt-appを使ったセットアップを行えない

そんな中、それらのデメリットを脱却できそうな記事を見つけたので、create-next-appで選択して初期セットアップを行う余地を残しつつ、コンテナ環境下で開発＆デプロイできるようなテンプレートレポジトリを作成しました。

以下のコマンドの実行でデプロイされます。
私の場合はURLは以下になりました。
https://bqzkag54cc.execute-api.ap-northeast-1.amazonaws.com/

git clone --depth 1 https://github.com/umihico/nuxt-serverless-container.git nuxt-serverless-container
cd $_
sh install.sh
sls deploy

デプロイでき、かつ資材がローカルに生成されているのが確認できるかと思います。生成された資材に手を加えてsls deployを行えば、以後は反映されたデプロイが行われます。ローカルで開発するには資材生成後にnpm installを行い、以後はdocker-compose up --buildしておけばhttp://localhost:3000/で確認しながら開発できます。AWS側のデプロイされたリソース一式を除去するにはsls removeです。

次にnpx create-next-appの対話式選択を各自で行いたいケースです。デプロイを行っていて生成された資材がある場合はgit clean -fdコマンドあたりで除去しておきましょう。install.sh内のnpx create-nuxt-app --answersフラグの引数を編集します。選択肢一覧はこちらから見ることができます。

編集後に再度sh install.shを行うと選択が反映された資材が生成されているかと思います。

install.sh

cat <<EOF | docker run --rm -i --entrypoint '' -v $(pwd):/var/task amazon/aws-lambda-nodejs:14 bash -xv
mktemp -d
cd /tmp/tmp.*
npx create-nuxt-app --answers "{ \
  \"name\": \"nuxt-serverless-container-demo\", \
  \"language\": \"js\", \
  \"description\": \"nuxt-serverless-container-demo\", \
  \"author\": \"umihico\", \
  \"pm\": \"npm\", \
  \"ui\": \"none\", \
  \"server\": \"none\", \
  \"features\": \"axios\", \
  \"linter\": \"eslint\", \
  \"test\"  : \"none\", \
  \"mode\"  : \"universal\", \
  \"target\"  : \"server\", \
  \"devTools\": \"jsconfig.json\" }"
# You can configure these answers.
# Please check https://github.com/nuxt/create-nuxt-app/blob/a0da9468f0f95b4577e1dbbc7bb303396d99c1b8/packages/create-nuxt-app/lib/prompts.js
npm install esm serverless-http nuxt-start # installing extra dependencies
rm -rf node_modules # too heavy. stay in container.
rm README.md # avoid overwriting my README.md
cp -r * /var/task/
EOF

nuxtの性質上、1回のブラウジングで複数回lambdaが起動しているようで、そのせいなのか定かではありませんが、コールドスタートの影響が他のlambdaより顕著のような感じがします。本番運用ならProvisioned ConcurrencyかCloudfront必須ですね。

これで晴れてSSRもサーバーレスでやりやすくなりました。
うまくできない場合、気兼ねなくコメントやイシューくださいませ。

参考資料