AWS SAM - gosaaan1/hokulea-garage GitHub Wiki

リファレンス

TIPS

Lambda Web Adapter でウェブアプリを (ほぼ) そのままサーバーレス化する ‐
- 下のリンクに詳細が書かれているので、examples/{使いたいWebフレームワーク}/README.md を参照してください。
aws-lambda-web-adapter
- Next.JS 14
  - TypeScriptを使用する場合はnpx create-next-app@latestしなおす方がよいかも。

AWS SAM を使って、Next.jsのサイトを動かす

CSR(Client Side Rendering)のWebフレームワークはAWS Amplifyを使ってWebアプリケーションをサーバレスな環境で公開することができますが、Next.jsのようなSSR(Server Side Rendering)を必要とするWebフレームワークでは使えません。厳密に言えば、AWS Amplify Hostingを使えばできなくはないのですが、IaCで実現しようとすると複雑な設定が必要だったり、ホスティングにかかるコスト（インスタンスの起動時間に対して従量課金が発生する）ことを考えると、できるだけコスト（利用料金・学習）をかけたくない個人開発やスタートアップでは手が出しにくいという印象があります。

もっと手軽にNext.jsをAWSで公開できないかと調べている中で見つけたのがLambda Web Adapterを使って、Webアプリケーションをサーバレス化するという手法です。 WebアプリケーションをDockerコンテナにしておき、Lambda Web AdapterというインターフェースをLambdaとの間に咬ませた状態でデプロイすることで、処理時間に対してだけ課金が行われるLambdaのメリットが得られるようになります。またDockerコンテナにしておくとLambda以外にもECSなど、ビジネス規模に応じた実行環境を選択することができるようになります。なにより、AWS SAMが実行環境周りのIaCをととのえてくれるので、Cloud Formationをイチから作りあげる手間が軽減され、サービスの機能に専念した開発ができるのが嬉しかったりします。

では実際にNext.jsのサイトを作ってみましょう。

aws-lambda-web-adapterのクローン

/examplesのコードを使うので、あらかじめaws-lambda-web-adapterのクローンを作っておきます。

git clone --depth 1 https://github.com/awslabs/aws-lambda-web-adapter.git

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

Next.js14にはnode.js18.16以上が必要です。

JavaScriptを使用する場合

/examples/nextjsのソースがそのまま使えるので、ローカルリポジトリのソースを使います。

cp -r aws-lambda-web-adapter/examples/nextjs my-project/
cd my-project

TypeScriptを使用する場合

TypeScriptを使って開発をする場合は必要なファイルだけローカルリポジトリから流用します。

AWS SAMのテンプレートをexamplesからコピーします。

mkdir -p my-project/sam-app
cd my-project/sam-app
cp ../../aws-lambda-web-adapter/examples/nextjs/template.yaml ./

Next.jsのアプリを新たに作成します。

npx create-next-app@latest

プロンプトに従って設定していきます。（デフォルトの選択肢で問題ありません）

✔ What is your project named? … app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes

Lambda Web Adapterに必要なファイルをexamplesからコピーします。

cd app
cp ../../../aws-lambda-web-adapter/examples/nextjs/app/next.config.js ./
cp ../../../aws-lambda-web-adapter/examples/nextjs/app/run.sh ./
cp ../../../aws-lambda-web-adapter/examples/nextjs/app/Dockerfile ./

ローカルでNext.jsが動作するか確認します。

npm install
npm run dev

AWS SAM

AWS SAMはCodeCatalystのWorkflow上で実行するので、ローカルにはインストールする必要はありません。

Amazon CodeCatalyst

AWS CodeCatalyst の利用を開始するを参考に、CodeCatalystのセットアップを完了させておきます。

"Start from Scratch"でプロジェクトを作成しておきます。

空のWorkflowを作成します。

cd ../..
mkdir -p .codecatalyst/workflows
touch build-and-deploy.yaml

build-and-deploy.yamlの内容を編集します。

mainブランチにコミットされた時にビルドとデプロイを行います。 EnvironmentのConnectionsにはCodeCatalystをセットアップする際に作成したロール、NameにはCodeCatalystで作成したデプロイ先のEnvironmentの名称を入力します。 StepsのRun: cd sam-app/の行はプロジェクトのディレクトリ構成に応じて適宜変更してください。

Name: build-and-release
SchemaVersion: "1.0"
Triggers:
  - Type: PUSH
    Branches:
      - main
Compute:
  Type: EC2
  Fleet: Linux.x86-64.Large
Actions:
  build_and_deploy:
    Identifier: aws/build@v1
    Inputs:
      Sources:
        - WorkflowSource
    Outputs:
      AutoDiscoverReports:
        Enabled: false
        ReportNamePrefix: rpt
      Artifacts:
        - Name: build_result
          Files:
            - "**/*"
    Configuration:
      Steps:
        - Run: cd app/
        - Run: sam build --template-file template.yaml --use-container --build-image
            public.ecr.aws/sam/build-python3.9:$(sam --version | sed "s/.* //")
        - Run: sam deploy --no-confirm-changeset
    Environment:
      Connections:
        - Role: CodeCatalystWorkflowDevelopmentRole-hokulea-garage
          Name: hokulea-garage
      Name: prd