Separating Dev and Production Environments with Docker Compose

Why Separate Environments

In hr_blog2.0, docker-compose.dev.yml and docker-compose.prod.yml are kept separate because development and production have different requirements.

Differences by Environment

graph LR
    subgraph Dev["개발 환경"]
        A1[Hot Reload] --> A2[볼륨 마운트]
        A3[디버그 모드] --> A4[포트 노출]
    end
    subgraph Prod["프로덕션 환경"]
        B1[최적화 빌드] --> B2[SSL/TLS]
        B3[Nginx 프록시] --> B4[헬스체크]
    end

Docker Compose for Development

# docker-compose.dev.yml
services:
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile.dev
    volumes:
      - ./frontend/src:/app/src  # Hot Reload
    ports:
      - "3000:3000"

  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile.dev
    volumes:
      - ./backend/src:/app/src
    ports:
      - "8000:8000"
    environment:
      - DEBUG=true

Docker Compose for Production

# docker-compose.prod.yml
services:
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    restart: always

  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    restart: always

  nginx:
    build:
      context: ./nginx
      dockerfile: Dockerfile
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx/cert:/etc/nginx/cert

Dockerfile.dev vs Dockerfile

Nginx SSL Configuration

In production, Nginx acts as the SSL termination point:

server {
    listen 443 ssl;
    server_name hrletsgo.me;

    ssl_certificate /etc/nginx/cert/fullchain.pem;
    ssl_certificate_key /etc/nginx/cert/privkey.pem;

    location /api/ {
        proxy_pass http://backend:8000;
    }

    location / {
        proxy_pass http://frontend:3000;
    }
}

This pattern has been used across multiple projects beyond hr_blog2.0, including XGen and PolaRAG.