Next.js製の自作ブログをAppRunnerにデプロイ

公開日:

2022 / 09 / 24

はじめに

2022 年 9 月 24 日現在、このブログのホスティングは Vercel に任せているんですが、Vercel は無料利用の範囲が定められています。今回は、広告を貼りたい場合や、その他無料利用の枠をはみ出したい欲望に駆られた時のために、AWS を使ってデプロイする練習をしてみました。

具体的には、AWS のAppRunnerというサービスを利用しています。AppRunner は、ソースコードの変更を検知して、自動的にデプロイする方法も選択できるらしいですが、今回は GitHubActions と Docker の勉強も兼ねたかったので、ECR を用いてデプロイしています。

デプロイのイメージは上の図の通りです。

ECR には無料枠はあるのですが、その枠を超えるとストレージの容量によって課金されていきます。

ECR の料金

https://aws.amazon.com/jp/ecr/pricing/

なので、push するイメージの容量は小さいに越したことはありません。そこで今回は Next.js の standaone モードというのを利用します。

Next.js の standalone モード

https://nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files

https://zenn.dev/team_zenn/articles/nextjs-standalone-mode-cloudrun

要約すると、Next.js で standalone モードというのを有効にすることで、ビルド時に node_modules の中から必要なファイルのみをコピーし、.next/standalone 以下に自動で保存してくれるため、.next/standalone のみでアプリを動作させることができ、その結果ビルド後のサイズを大幅に削減することができる。というものらしいです。

せっかくなので、使います。

デプロイしてみる

docker イメージを作る

まずは ECR に push するためのイメージを作るために Dockerfile を書いていきます。

Dockerfile

dockerfile

# Install dependencies only when needed
FROM node:16-alpine AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json ./
COPY yarn.lock ./
RUN yarn --frozen-lockfile

# Rebuild the source code only when needed
FROM node:16-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN yarn build

# Production image, copy all the files and run next
FROM node:16-alpine AS runner
WORKDIR /app
ENV NODE_ENV production
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
CMD ["node", "server.js"]

https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile

公式の exampleを参考にしながら、上のような Dockerfile を作ります。

依存関係の取得
ビルド
サーバーの起動

の 3 つのステージに分けてマルチステージビルドを用いて 1 つの Dockerfile でまとめました

公式ドキュメントの他には下のブログを参考にしています。

https://zenn.dev/team_zenn/articles/nextjs-standalone-mode-cloudrun

手元で動作確認

ローカル環境でイメージを作成し、そのイメージを動作確認します。

docker build -t test .

test という名前でイメージを作成！

docker run -p 3000:3000 test

3000 番ポートでアプリを起動！

localhost:3000 でブラウザからアクセスできる！

ECR のリポジトリの作成

イメージを push するために、ECR のリポジトリを作成していきます。

AWS のコンソールから『Elastic Container Registory』を選択します。

パブリックを選択
リポジトリ名を入力(今回は『blog』という名前にした)

下の画像のようにリポジトリが作成されていれば大丈夫です。

ここで作成した blog というレポジトリの中に自動的にイメージが保存されていきます。

IAM ユーザーの作成

続いて、GitHubActions から ECR にイメージを push するための IAM ユーザーを作成します。

AWS のコンソールから『IAM』を選択して、ユーザーの追加を押します。

適当にユーザー名を入力
『アクセスキー - プログラムによるアクセス』を選択
『既存のポリシーを直接アタッチ』を選択
- AmazonEC2ContainerRegistryPowerUserを選択

以上を設定して、IAM ユーザーを作成します。ユーザーのリストに作成したユーザーが表示されていれば大丈夫です。

GitHubActions で使う、docker/login-action@v2のドキュメントに、『ECR に push するために、AmazonEC2ContainerRegistryPowerUser の権限がある IAM ユーザーを使え』と書いてあります。

https://github.com/marketplace/actions/docker-login

GitHubActions を使って ECR に push

参考: GitHubActions のドキュメント

https://docs.github.com/ja/actions

続きまして、GitHubActions による workflow を作成していきます。

内容としては

job の発火タイミング: master ブランチへの push
job の内容: docker イメージを作成して、ECR に push

これだけ。

これを /.github/workflows ディレクトリ下に yaml ファイルとして記述していきます。

push.yml

name: image-push-to-ECR
on:
  push:
    branches:
      - main
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-1

      - name: Login to ecr
        uses: docker/login-action@v2
        with:
          registry: ${{ secrets.ECR_ENDPOINT }}

      - name: Build and push
        id: docker-build
        uses: docker/build-push-action@v2
        with:
          push: true
          tags: ${{ secrets.ECR_ENDPOINT }}/${{ secrets.ECR_REPOSITORY }}:latest
          cache-from: ${{ secrets.ECR_ENDPOINT }}/${{ secrets.ECR_REPOSITORY }}