f:id:y-ohgi:20211202141624p:plain

TL;DR

js のSSR フレームワーク、Remix をApp Runner で動かす

About

AWS Containers Advent Calendar 2021のカレンダーの2日目の記事になります。
最近App Runner を使い始めたので、新しいフレームワークのRemix をApp Runner で試してみようというモチベーションです。

version

node
- node:16-buster-slim
docker
- 20.10.8
remix
- 1.0.6
terraform
- 1.0.11

Repository

y-ohgi/blog-apprunner-remix

Setup

Remix の作成

create-remix コマンドでRemix プロジェクトを作成します。
当該コマンドでTypeScript をデフォルトで選択できるのが良いですね。

$ npx create-remix@latest
Need to install the following packages:
  create-remix@latest
Ok to proceed? (y) y

R E M I X

 Welcome to Remix! Let's get you set up with a new project.

? Where would you like to create your app? ./my-remix-app
? Where do you want to deploy? Choose Remix if you're unsure, it's easy to change deployment targets. Remix App Server


? TypeScript or JavaScript? TypeScript
? Do you want me to run `npm install`? Yes

Remix の起動を確認します。

$ docker run -v `pwd`:/app -w /app -p 3000:3000 node:16-buster-slim npm run dev

Dockerfile の作成をします。

FROM node:16-buster

WORKDIR /app

COPY package.json package-lock.json /app/

RUN npm install

COPY . .

RUN npm run build

EXPOSE 3000

CMD ["npm", "run", "start"]

ECR の作成とイメージのpush

ECR の作成をします。

$ aws ecr create-repository \
    --repository-name remix-app \
    --region ap-northeast-1

ECR へログイン

$ export REPOSITORY_URI=`aws ecr describe-repositories --repository-name remix-app --region ap-northeast-1 --query="repositories[0].repositoryUri" --output=text`

$ aws ecr get-login-password --region ap-northeast-1 | docker login --username AWS --password-stdin ${REPOSITORY_URI}

Remix のビルドとECR へpush

$ docker build -t ${REPOSITORY_URI}:latest .
$ docker push ${REPOSITORY_URI}:latest

Terraform でIAM/AppRunner を構築

Terraform でIAM/AppRunner を構築します。
IAM/AppRunner をTerraform で構築する理由として、今回は使いませんが、DynamoDB などを叩くためのIAM Role を作る必要が出てくるためです。要件的に必要なければAppRunner のコンソールから作成することをオススメします。

resource "aws_iam_role" "access_role" {
  name = "remix-access"
  path = "/"

  assume_role_policy = jsonencode({
    Version = "2012-10-17"
    Statement = [
      {
        Action = "sts:AssumeRole"
        Effect = "Allow"
        Principal = {
          Service = "build.apprunner.amazonaws.com"
        }
      }
    ]
  })

  managed_policy_arns = [
    "arn:aws:iam::aws:policy/service-role/AWSAppRunnerServicePolicyForECRAccess",
  ]
}

resource "aws_apprunner_service" "this" {
  service_name = "remix"

  source_configuration {
    authentication_configuration {
      access_role_arn = aws_iam_role.access_role.arn
    }

    image_repository {
      image_configuration {
        port = "3000"
      }
      image_identifier      = "${var.repository_url}:latest"
      image_repository_type = "ECR"
    }
  }
}

記載したTerraform をapply します。

$ export REPOSITORY_URL=`shell aws ecr describe-repositories --repository-name remix-app --region ap-northeast-1 --query="repositories[0].repositoryUri" --output=text`
$ export TAG = `git rev-parse --short HEAD`

$ docker run \
    -v $(HOME)/.aws/:/root/.aws:ro \
    -v `pwd`:/app \
    -w /app/infra \
    -e TF_VAR_repository_url=${REPOSITORY_URL} \
    -it \
    hashicorp/terraform:1.0.11 \
  init

$ docker run \
    -v $(HOME)/.aws/:/root/.aws:ro \
    -v `pwd`:/app \
    -w /app/infra \
    -e TF_VAR_repository_url=${REPOSITORY_URL} \
    -it \
    hashicorp/terraform:1.0.11 \
  apply

AppRunner の動作確認

AppRunner のコンソールへ移動し、自動生成されたドメインをクリックするとRemix のデフォルトのページが表示されます。

まとめ

AppRunner はVPC やロードバランサーを構築せずにECR のイメージを手軽に動かせる待望のサービスです。
単純なECR のWeb サーバーを構築したいときには積極的に使っていきたいですね。

y-ohgi's blog

TODO: ここになにかかく

App Runner でRemix を動かす