3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-05-25

以前書いた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もサーバーレスでやりやすくなりました。
うまくできない場合、気兼ねなくコメントやイシューくださいませ。

参考資料

3
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?