Docker로 React, Express 환경 구축

my-project/
├── frontend/
│   ├── .dockerignore
│   ├── Dockerfile
│   └── node_modules/
├── backend/
│   ├── .dockerignore
│   ├── Dockerfile
│   └── node_modules/
└── docker-compose.yml

FROM node:22-alpine

# 1. 작업 디렉토리 설정
WORKDIR /app

# 2. 패키지 파일 복사 및 설치
COPY package.json .
RUN npm install

# 3. 전체 소스 코드 복사
COPY . .

# 4. 볼륨 선언
VOLUME ["/app", "/app/node_modules"]

EXPOSE 3000

CMD ["npm", "run", "dev"]

FROM node:22-alpine

# 1. 작업 디렉토리 설정
WORKDIR /app

# 2. 패키지 파일 복사 및 설치
COPY package.json .
RUN npm install

# 3. 전체 소스 코드 복사
COPY . .

# 4. 볼륨 선언
VOLUME ["/app", "/app/node_modules"]

EXPOSE 8080

CMD ["npm", "run", "dev"]

version: "3.8" # Docker Compose 파일 형식 버전

services:
  # --- 백엔드 서비스 설정 ---
  backend:
    build:
      context: ./backend # Dockerfile이 위치한 경로
      dockerfile: Dockerfile # 사용할 Dockerfile 파일명
    container_name: backend-dev # 컨테이너의 이름을 고정 (관리 용이)
    ports:
      - "8080:8080" # [호스트 포트]:[컨테이너 포트] 연결
    volumes:
      - ./backend:/app # 로컬 소스 코드를 컨테이너와 동기화 (Hot Reload 가능)
      - /app/node_modules # 컨테이너 내 Linux용 node_modules 보호 (익명 볼륨)
    environment:
      - NODE_ENV=development # 환경 변수 설정
    # DB 연결이 필요하다면 여기에 depends_on 등을 추가할 수 있습니다.

  # --- 프론트엔드 서비스 설정 ---
  frontend:
    build:
      context: ./frontend # 프론트엔드 Dockerfile 경로
      dockerfile: Dockerfile
    container_name: frontend-dev
    ports:
      - "3000:3000" # React/Vite 기본 포트 연결
    volumes:
      - ./frontend:/app # 소스 코드 실시간 반영 설정
      - /app/node_modules # 로컬 환경의 node_modules 충돌 방지
    environment:
      - VITE_API_URL=http://localhost:8080 # 브라우저에서 백엔드에 접속할 주소
    stdin_open: true # 터미널 입력을 허용 (React 개발 서버 유지용)
    tty: true # 터미널을 활성화
    depends_on:
      - backend # 백엔드가 먼저 시작된 후 프론트엔드 실행

# 로컬의 의존성 폴더 제외
node_modules
dist
build
.git
.DS_Store

# 로그 파일 제외
npm-debug.log*
pnpm-debug.log*
yarn-debug.log*
yarn-error.log*

docker-compose up