🦁

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

3 min read

いきさつ

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

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

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

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

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

Nuxt3プロジェクト

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

初期プロジェクト作成

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

Lambda向けデプロイ設定

nuxt.config.tsファイルを下記のように変更して、Lambdaで使えるようします

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

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

Lambda Handler

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

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

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

    if(result.statusCode / 100 != 2 && result.headers['content-type'] == undefined) {
        result.headers['content-type'] = 'text/html;charset=UTF-8'
    }
    
    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

ログインするとコメントできます