Nuxt.js を サーバーレス（AWS Lambda）で動かす

Nuxt.js を AWS Lambda で動かすための設定などについて説明します。 

事前準備

AWS SAM (AWS Serverless Application Model) を用いてサーバーレス環境を構築していきます。
事前に、AWS SAM CLI をインストールしておきます。

AWS SAM CLIのインストール - AWS Serverless Application Model

概要

すでに作成済みの Nuxt.js アプリをベースに、サーバーレス環境を構築していきます。

• nuxt.config.ts の設定追加

• template.yaml の追加

• samconfig.toml の追加（任意）

早速、デプロイして動かしてみたいという方は、下記のリポジトリを用意してますので、git clone してみてください。

nuxt.config.ts の設定追加

下記のように nuxt.config.ts を記述します。
ポイントをざっと列挙すると以下のようになります。

• nitro.preset に aws-lambda を指定

• inlineDynamicImports: true にすることでパフォーマンスが改善できることがあるらしい（こちらを参照）（任意）

• 画像など静的ファイルも一緒にデプロイしたい場合（任意）

  • serveStatic: true にする

  • output.publicDir に .output/server を指定する

  • https://medium.com/@michaelbouvy/deploy-nuxt-3-on-aws-lambda-a53991f0ad7e 参考

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  nitro: {
    inlineDynamicImports: true,
    preset: 'aws-lambda',
    serveStatic: true,
    output: {
      publicDir: '.output/server',
    }
  }
})

template.yaml の追加

下記のように template.yaml を記述します。
ポイントをざっと列挙すると以下のようになります。

• CodeUri に .output/server を指定

• Handler に index.handler を指定

# template.yaml
AWSTemplateFormatVersion: '2010-09-09'
Transform: AWS::Serverless-2016-10-31
Description: >
  nuxtjs-lambda
  SAM Template for Nuxt.js on AWS

Parameters:
  StackFamily:
    Type: String
    Default: nuxtjs-lambda-app

Globals:
  Function:
    Timeout: 3
    Tracing: Active

Resources:
  NuxtFunction:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: .output/server
      Handler: index.handler
      Runtime: nodejs20.x
      MemorySize: 512
      Timeout: 30
      Architectures:
        - x86_64
      FunctionUrlConfig:
        AuthType: NONE

Outputs:
  NuxtFunction:
    Value: !GetAtt NuxtFunction.Arn
    Export:
      Name: !Sub "${StackFamily}-nuxt-function-arn"

  NuxtFunctionUrl:
    Value: !GetAtt NuxtFunctionUrl.FunctionUrl
    Export:
      Name: !Sub "${StackFamily}-nuxt-function-url"

samconfig.toml の追加（任意）

samconfig.toml は SAM CLI コマンドのパラメータを記述できるファイルですが、初回デプロイ時に作成されるので、あらかじめ作成しなくてもOKです。

デプロイ

下記のように sam deploy --guided すると、デプロイできるはずです。

# bash
$ sam deploy --guided --profile=${AWS_PROFILE}

デプロイが完了すると、下記のように Lambda URL が出力されるのでアクセスしてみます。

CloudFormation outputs from deployed stack
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Outputs                                                                                                                                                                                                                                        
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Key                 NuxtFunctionUrl                                                                                                                                                                                                            
Description         -                                                                                                                                                                                                                          
Value               https://{LAMBDA_URL_ID}.lambda-url.{AWS_REGION}.on.aws/                                                                                                                                                 

Key                 NuxtFunction                                                                                                                                                                                                               
Description         -                                                                                                                                                                                                                          
Value               arn:aws:lambda:{AWS_REGION}:{AWS_ACCOUNT_ID}:function:nuxtjs-lambda-app-NuxtFunction-{FUNCTION_ID}                                                                                                                            
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


Successfully created/updated stack - nuxtjs-lambda-app in {AWS_REGION}

下記のように、トップページが表示されればOKです。

Next.js との違い

Next.js については、こちらを参照してください。
Next.js と異なるポイントは以下のとおりです。

• RESPONSE_STREAM が experimental

  • https://nitro.unjs.io/deploy/providers/aws#streaming-support-experimental

  • 色々試しましたが、RESPONSE_STREAM で動かせませんでした

• aws-lambda-adapter の example に nextjs はあるけど nuxtjs はない

おわりに

Next.js と比べると、AWS SAM 側のサポートも弱い気がしますが、
何よりサーバーレスにしておくと、サーバーを常時起動するよりも低コストで運用できるのが魅力ですね。

何か質問などありましたら、@yields_llc にコメントいただければ幸いです。
ではでは。

参考リンク