React/Next.js AppのDocker化

Dockerを使う理由

シンプルな React SPA 用 Dockerfile

# Stage 1: Build
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Stage 2: Serve with Nginx
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

SPA ルーティング用の Nginx 設定

# nginx.conf
server {
  listen 80;
  root /usr/share/nginx/html;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html; # SPA routing
  }

  location ~* \.(js|css|png|jpg|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }
}

Next.js スタンドアロンモード用 Dockerfile

// next.config.js
module.exports = { output: 'standalone' };

# Dockerfile (Next.js standalone)
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public
EXPOSE 3000
CMD ["node", "server.js"]

.dockerignore

node_modules
.next
dist
.env*
.git
README.md
*.test.ts

ビルドと実行

# Build:
docker build -t my-next-app .

# Run:
docker run -p 3000:3000 -e DATABASE_URL=postgres://... my-next-app

# Check size:
docker images my-next-app

ローカル開発用の Docker Compose

# docker-compose.yml
services:
  web:
    build: .
    ports: ['3000:3000']
    environment:
      DATABASE_URL: postgresql://postgres:password@db:5432/myapp
    depends_on: [db]
  db:
    image: postgres:16-alpine
    environment:
      POSTGRES_PASSWORD: password
      POSTGRES_DB: myapp
    volumes:
      - pgdata:/var/lib/postgresql/data
volumes:
  pgdata:

ヘルスチェック

HEALTHCHECK --interval=30s --timeout=3s \
  CMD curl -f http://localhost:3000/api/health || exit 1

実行時の環境変数

docker run -p 3000:3000 \
  --env-file .env.production \
  my-next-app

マルチプラットフォームビルド

docker buildx build \
  --platform linux/amd64,linux/arm64 \
  -t myregistry/my-next-app:latest \
  --push .

確認問題

まとめ