以前書いた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を行うと選択が反映された資材が生成されているかと思います。
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もサーバーレスでやりやすくなりました。
うまくできない場合、気兼ねなくコメントやイシューくださいませ。
参考資料