Zenn
🦁

Nuxt 3 betaをAWS Lambdaにデプロイする

2021/11/09に公開
AWS
Nuxt
Vue.js
Lambda
tech

いきさつ

貧乏人です。固定費がかかるサービスは使いづらいです＿|￣|○
固定費が1000円でもキッツイ貧乏人です。従量も金額によってはキツイです(´・ω・｀)

Nuxt2であればspaにしてS3とCloudFrontで作ったりするのですが、現在Nuxt3 betaではspaアプリは作成できないようです。 ....知らんけど

まじかよ。と思って調べてたらAWSのLambdaをターゲットにできるって書いてあるやーーーん

そんなわけで、物は試しにAPI Gateway + Lambdaで試してみることにしました。

※2021/11/09に試したものなのでバージョンアップによって状況も変わるかもしません

Nuxt3プロジェクト

Lambdaで実行するのを確認する目的の為、初期プロジェクトの状態をそのままデプロイする形にしましす。

初期プロジェクト作成

公式ページに従い、プロジェクトを作成します。

Lambda向けデプロイ設定

nuxt.config.tsファイルを下記のように変更して、Lambdaで使えるようします
staticなファイル(/_nuxt/以下？)をS3などでホスティングする場合はserverStaticの項目は不要です

nuxt.config.ts
import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
    nitro: {
        preset: 'aws-lambda',
        serveStatic: true
    }
})

Lambda Handler

lambdaから呼び出されるプログラムですね。こちら公式のページを参考にLambda向けに修正しました。
なお現在のバージョンでは正常なレスポンス以外(404など)はヘッダ情報としてContent-Typeが設定されていないようです。
その為、Lambdaではjsonとして出力されてしまい、ブラウザ上でページが正しく表示されません。

ハンドラー側で200系以外のレスポンスの場合、Content-Typeを付与することで問題に対応しました。

※2022/04/24 現状はエラーページに関しても正しく動作していましたので上記の問題はありません。現状は下記のコードのようにシンプルなもので大丈夫です

index.js
exports.handler = async (event, context) => {
    const { handler  } = await import('./.output/server/index.mjs');
    const result = await handler (event);
    
    return result;
}

ビルド & zip

普通にビルドしてください

yarn build

.outputフォルダに出力されますので、↑で作成したindex.jsを含めzip化します

対象ファイル

AWS Lambdaの作成

Lambda 関数の作成

今はNode14系がデフォルトなので、何も考えずにそのままでOKです。
アーキテクチャはx86_64でもarm64のいずれでも大丈夫でした。

作成ページ

プログラムのアップロード

Lambdaの画面からあらかじめ作成していたZIPファイルをアップロードします。

コード画面

一般設定

一般設定のタイムアウトに関しては、デフォルトの3秒では不足していました。
実測で2.9秒で間に合うケースもありましたが逆に3秒を超えるケースもありましたので、今回はとりあえず30秒にしています。

一般設定

AWS APIGatewayの作成

APIタイプは REST APIタイプ で作成します。
段々書くのが面倒になった ので詳細は端折りますが、

リスト

上記のように

  • /(ルート)のANYプロトコル
  • /{proxy+}のプロキシリソース

に対してLambda関数と紐づけ、すべてのリクエストに対してLambada関数が処理するようにします。

一点だけ注意点があり、Lambdaプロキシ統合に関してはチェックをしておいてください

完成！

完成品

何も捻りもないですがこんな感じでAPI Gateway + Lambda + Nuxt3betaを使うことが出来ました(´▽｀)

最後にちょっとした感想など

今回、私のJavaScriptの無理解な部分でハマりまして、Lambda Handlerの部分がなかなかうまく作成できませんでした。
ESModuleっていうのでしょうか？Nuxt3側それを吐き出すのですが、Lambda Handler側からそれを読み込むことが出来ずに四苦八苦。
シンドイ思いしました。

あとエラーページがjsonで出てきてびっくり。

問題は解決したので、このindex.jsがあれば個人的には問題なくLambdaにNuxt3アプリを乗っけられるなと思いました。

ただ起動に3秒かかるので、起動は遅すぎない？って気持ちはあります。

Discussion