การใส่ React/Next.js App ลงใน Docker

ทำไมต้องใช้ Docker

ไฟล์ Docker สำหรับ React SPA แบบพื้นฐาน

# 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;"]

การกำหนดค่า Nginx สำหรับการกำหนดเส้นทางของ SPA

# 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";
  }
}

ไฟล์ Docker ของ Next.js ในโหมดสแตนด์อโลน

// 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 .

ตรวจสอบความเข้าใจ

สรุป