🤖

AWS SAMを用いてRemixアプリケーションをLambdaにデプロイする

2024/07/20に公開

SSR

はじめに

aws-lambda-web-adapterを使って、とても簡単にRemixで作られたアプリケーションをLambdaにデプロイできたのでその手順をまとめました。

完成品はこちらのリポジトリにあります。

必要なもの

SAM CLI
Node.js
Docker

階層構造

以下のような階層でプロジェクトを作成します。

.
├── remix-app/ # Remixのアプリケーション
│   ├── (Remixのファイル群)
│   ├── Dockerfile # buildしたアプリケーションを実行するためのDockerfile
│   └── run.sh # remix-serveを実行するスクリプト
└── template.yaml # SAMのテンプレートファイル

Remixプロジェクトのセットアップ

npx create-remix@latest

template.yamlの作成

こちらのものとほとんど変わりません。

aws-lambda-web-adapter examples

template.yaml

AWSTemplateFormatVersion: '2010-09-09'
Transform: AWS::Serverless-2016-10-31
Description: >
  serverless-remix-demo

Globals:
  Function:
    Timeout: 10

Resources:
  RemixFunction:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: remix-app/
      MemorySize: 256
      PackageType: Image
      Architectures:
        - arm64
      Events:
        RootEvent:
          Type: HttpApi
          Properties:
            Path: /
            Method: any
        ProxyEvent:
          Type: HttpApi
          Properties:
            Path: /{proxy+}
            Method: any
    Metadata:
      DockerTag: v1
      DockerContext: ./remix-app
      Dockerfile: Dockerfile

Outputs:
  RemixFunctionURL:
    Description: "API Gateway endpoint URL for Remix"
    Value: !Sub "https://${ServerlessHttpApi}.execute-api.${AWS::Region}.${AWS::URLSuffix}/"

AWS::Serverless::FunctionのMetadataに後ほど作成するDockerfileを指定します。

Outputsにてデプロイ後のURLを出力します。

Remixアプリケーション起動用スクリプトの作成

remix-app配下にrun.shを作成して実行権限を付与します。
後述するDockerfileからCMDコマンドでこちらのファイルを実行します。

remix-app/run.sh

#!/bin/bash -x

HOST=0.0.0.0 HOME=/tmp exec npm run start

Dockerfileの作成

remix-app配下にDockerfileを作成します。

remix-app/Dockerfile

FROM public.ecr.aws/docker/library/node:20.9.0-slim as builder
WORKDIR /app
COPY . .
RUN npm ci && npm run build

FROM public.ecr.aws/docker/library/node:20.9.0-slim as runner
COPY --from=public.ecr.aws/awsguru/aws-lambda-adapter:0.8.3 /lambda-adapter /opt/extensions/lambda-adapter
ENV PORT=3000 NODE_ENV=production
ENV AWS_LWA_ENABLE_COMPRESSION=true
WORKDIR /app
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/package-lock.json ./package-lock.json
COPY --from=builder /app/build ./build
COPY --from=builder /app/run.sh ./run.sh
RUN npm ci --omit=dev

CMD exec ./run.sh

lambda-web-adapterのREADMEにある通り、以下の命令を記述しています。
あとはRemixアプリケーションの配信に必要なbuildディクトリの配置と、remix-serveに必要なnode_modulesの生成を行っています。

COPY --from=public.ecr.aws/awsguru/aws-lambda-adapter:0.8.3 /lambda-adapter /opt/extensions/lambda-adapter

SAM CLIでデプロイ

template.yamlがあるディレクトリで以下のコマンドを実行します。

sam build
sam deploy --guided

デプロイ完了後、出力されたURLにアクセスするとRemixのアプリケーションが表示されます。

以下のコマンドで作成されたリソースを削除できます。

sam delete