blog top

Next.js を Lambda に最速でデプロイする

これは 日本CTO協会24卒 Advent Calendar 2024 の9日目の記事です！

今回はNext.jsのApp Routerを最速でデプロイしていきます。5分もあれば終わる見込みです。

急いでいるので早速始めましょう。Node.jsのバージョンは22.xを使います。

Next.js のプロジェクトを作成

まず

mkdir next-deploy-sample
cd next-deploy-sample
npx create-next-app@latest

を入力します。

プロジェクト名には.(今のフォルダに作成するオプション)を選び、後はEnterを連打します。

next-create-app

デプロイ用の資材を準備

next.config.tsにoutput: 'standalone'を追加します。全体のコードは以下です。

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  output: 'standalone',
};

export default nextConfig;

これによってスタンドアロンなファイルが生成されるようになります。

実際にビルドし、さらに必要な資材をstandaloneディレクトリに含めます。

npm run build
cp -r public .next/standalone/ && cp -r .next/static .next/standalone/.next/

作成したstandaloneディレクトリをzipにします。手動でも構いません。

cd .next
zip -r ../standalone.zip ./standalone
cd ..

Lambda 関数を作成

Lambda関数を作成します。

名前はnext-deploy-sample、ランタイムはNode.js 22.xとします。

Additional Configurationsを開いて関数URLを有効化、認証タイプはNONEにします。

Lambdaの作成-ランタイム

Lambdaの作成-関数URL

他の設定はデフォルトでLambdaを作成してください。

Lambda 関数の設定

次に、作成したLambda関数にzipをアップロードします。15MB程度なのでそのままいきます。

zipのアップロード

アップロード後、画面に反映されない場合はリロードします。

起動スクリプトが必要なので、Lambdaのエディタでルートにrun.shを作成し、内容は以下のようにします。

#!/bin/bash

node ./standalone/server.js

run.shの作成

ソースコードを編集したので、Deployボタンを押してデプロイします。

ハンドラの修正

上の設定に伴い、画面下部のランタイム設定でハンドラをrun.shに変更します。

ハンドラの修正

Lambda Web Adapter の設定

今回はLambda Web Adapterを使ってNext.jsが動くようにします。

画面最下部のレイヤーの項目で、レイヤーの追加を押します。

ARNを指定でarn:aws:lambda:ap-northeast-1:753240598075:layer:LambdaAdapterLayerX86:23を入力し追加します(arn内のリージョンは適宜変更してください)。

レイヤーの追加

最後に設定タブの環境変数で以下2つの環境変数を追加します。

実際にアクセスしてみる

ここまでですべての設定は完了しています。

画像右下にある関数URLをクリックして画面を表示してみましょう。

関数URL

以下のようにNext.jsの画面が表示されれば成功です。

Next.jsの画面

まとめ

ここまで駆け足でデプロイしてきましたが、いかがでしたでしょうか。

デプロイして余裕が出たら、キャッシュやセキュリティ、ドメイン設定などについても考えていきたいですね。

お疲れ様でした！

参考