Nuxt3アプリをLambdaにデプロイする方法

• nuxt v3.11
• ServerlessFramework v3.38.0

はじめに

Nuxt3で作成したアプリは比較的簡単にLambdaにデプロイすることができます。
ここではデプロイする方法の一例を紹介します。

Nuxt3 ビルド設定

nuxt.config.tsにAWS Lambda用のビルド設定を追加します。

export default defineNuxtConfig({
  // ...
  nitro: {
    preset: 'aws-lambda',
    serveStatic: true,
  }
})

静的ファイルをS３などに配置する場合はserveStaticをfalseにします。

Serverless Framework

デプロイにはServerlessFrameworkを使用します。

インストール

npm install -g serverless

AWS IAM ユーザーを設定

serverlessがAWSにアクセスするための設定します。

1. serverless 用 IAM ユーザー作成
2. AdministratorAccessポリシーを設定（アプリに合わせて適切に変更）
3. アクセスキー作成
4. serverless にクレデンシャル情報を設定

serverless config credentials --provider aws --key [アクセスキーID] --secret [シークレットアクセスキー] --profile [任意のプロファイル名]

デプロイ設定ファイル

serverless.ymlを作成します。
↓は一例です。

service: [サービス名]
frameworkVersion: '3'

provider:
  runtime: nodejs20.x
  name: aws
  stage: dev
  region: ap-northeast-1
  profile: [先ほど指定したプロファイル名]

package:
  patterns:
    - "!**/**"
    - ".output/server/**"
  excludeDevDependencies: true
  individually: true

functions:
  NuxtSsrCore:
    handler: '.output/server/index.handler'
    url: true # Lambda の関数URLを作成

ビルド & デプロイ

npm run build
sls deploy --verbose

以上でLambdaへのデプロイまではできました。
AWSコンソールから作成したLambda関数のURLにアクセスするとアプリが確認できるかと思います。

ここで作成したAWSサービスは簡単に削除もできます。

サービスの削除

sls remove