まえがき
パク...リスペクト記事で、App Runnerでやってみました。
手順
今回つかったサンプルはこちらです
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
デプロイ完了になるまで数分かかると思います。
デフォルトドメインが表示されているので、アクセスすると無事にデプロイされているのが確認できると思います。