Next.jsのスタンドアロンモードでビルドしたイメージを AWS App Runnerへデプロイする

まえがき

• Next.jsのスタンドアロンモードでビルドしたイメージを Cloud Run へデプロイする

パク...リスペクト記事で、App Runnerでやってみました。

手順

今回つかったサンプルはこちらです

• app-runner-nextjs

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

npx create-next-app app-runner-nextjs --ts --use-npm

Next.jsのスタンドアロンモード設定します

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    outputStandalone: true,
  },
};

module.exports = nextConfig;

スタンドアローンモードでの動作確認

npm run build
cd .next/standalone
node server.js

http://localhost:3000/ にアクセスできるはずです！

Dockerfileを作成

Next.jsのスタンドアロンモードで起動するDockerfileを作成します。

Dockerfile

FROM node:16 AS builder
WORKDIR /usr/src/app
COPY . /usr/src/app
RUN npm install
RUN npm run build

FROM node:16-stretch-slim AS runner
ENV NODE_ENV=production
COPY --from=builder /usr/src/app/next.config.js ./
COPY --from=builder /usr/src/app/public ./public
COPY --from=builder /usr/src/app/.next/static ./.next/static

COPY --from=builder /usr/src/app/.next/standalone ./
CMD ["node", "server.js"]

Dockerでの動作確認

docker build -t app-runner-nextjs .
docker run  -p 3000:3000 app-runner-nextjs

http://localhost:3000/ にアクセスできるはずです！

ECRにImageをアップロード

コンソールに行きAWS ECRのリポジトリを作る

ECR作成のリポジトリPushする手順の説明があるので、参考にしてImageをアップロードします。

aws ecr get-login-password --region ap-northeast-1 | docker login --username AWS --password-stdin [YOUR NUMMBER].dkr.ecr.ap-northeast-1.amazonaws.com
docker build -t app-runner-nextjs .
docker tag app-runner-nextjs:latest [YOUR NUMMBER].dkr.ecr.ap-northeast-1.amazonaws.com/app-runner-nextjs:latest
docker push [YOUR NUMMBER].dkr.ecr.ap-northeast-1.amazonaws.com/app-runner-nextjs:latest

もしプロファイル設定をしているなら、プロファイルを指定するようにしてください。

aws ecr get-login-password --profile [YOUR PROFILE] --region ap-northeast-1 | docker login --username AWS --password-stdin [YOUR NUMMBER].dkr.ecr.ap-northeast-1.amazonaws.com

はまりどころ: M1 MAC対応

M1 MACでImageを作成すると、ARMで作られてしまい、起動できません。

--platform=linux/x86_64 をつけてbuildしてください。App RunnerはARMのイメージで起動できないようです。

docker build --platform=linux/x86_64 -t app-runner-nextjs .

App Runner

デプロイ完了になるまで数分かかると思います。

デフォルトドメインが表示されているので、アクセスすると無事にデプロイされているのが確認できると思います。