Merge pull request #75 from boostcampwm-2024/Feature/#005_Docker_이미지_빌드

Feature/#005_Docker_이미지_빌드

client/Dockerfile

@@ -0,0 +1,18 @@
+# 1. Node.js 20 기반 빌드 이미지
+FROM node:20 AS build
+WORKDIR /app
+
+# 2. 모노레포 루트에서 필요한 파일 복사
+COPY ./package.json ./pnpm-lock.yaml ./pnpm-workspace.yaml ./
+COPY ./client/package.json ./client/
+
+# 3. pnpm 설치 및 의존성 설치
+RUN npm install -g pnpm
+RUN pnpm install
+
+# 4. 애플리케이션 빌드
+COPY . .
+RUN pnpm --filter client run build
+
+# 5. 빌드된 정적 파일 준비 (Nginx에서 제공)
+CMD ["echo", "Build completed. Use the Nginx container to serve the files."]

client/Dockerfile.dev

@@ -0,0 +1,20 @@
+# 1. Node.js 20 기반 이미지
+FROM node:20
+WORKDIR /app
+
+# 2. 모노레포 루트에서 필요한 파일 복사
+COPY ./package.json ./pnpm-lock.yaml ./pnpm-workspace.yaml ./
+COPY ./client/package.json ./client/
+
+# 3. pnpm 설치 및 의존성 설치
+RUN npm install -g pnpm
+RUN pnpm install
+
+# 4. 소스 코드 복사
+COPY . .
+
+# 5. 애플리케이션 포트 노출
+EXPOSE 5173
+
+# 6. Vite 개발 서버 실행
+CMD ["pnpm", "--filter", "client", "run", "dev"]

client/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "tsc -b && vite build",
     "lint": "eslint \"src/**/*.{ts,tsx}\" --fix",
     "preview": "vite preview"

docker-compose.debug.yml

@@ -0,0 +1,38 @@
+services:
+  frontend:
+    build:
+      context: .
+      dockerfile: ./client/Dockerfile.dev
+    volumes:
+      - ./client/dist:/app/client/dist
+    ports:
+      - "5173:5173" # React 개발 서버 포트
+    environment:
+      - NODE_ENV=development
+    command: pnpm --filter client run dev
+
+  backend:
+    build:
+      context: .
+      dockerfile: ./server/Dockerfile.dev
+    ports:
+      - "3000:3000" # NestJS 개발 서버 포트
+      - "9229:9229" # Node.js 디버깅 포트
+    environment:
+      - NODE_ENV=development
+
+  nginx:
+    build:
+      context: .
+      dockerfile: ./nginx/Dockerfile.dev
+    ports:
+      - "80:80"
+    volumes:
+      - ./client/dist:/usr/share/nginx/html
+    depends_on:
+      - frontend
+      - backend
+
+networks:
+  app-network:
+    driver: bridge

docker-compose.yml

@@ -0,0 +1,35 @@
+services:
+  frontend:
+    build:
+      context: .
+      dockerfile: ./client/Dockerfile
+    volumes:
+      - ./client/dist:/app/client/dist
+    environment:
+      - NODE_ENV=production
+    command: pnpm --filter client run build
+
+  backend:
+    build:
+      context: .
+      dockerfile: ./server/Dockerfile
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+
+  nginx:
+    build:
+      context: .
+      dockerfile: ./nginx/Dockerfile
+    ports:
+      - "80:80"
+    volumes:
+      - ./client/dist:/usr/share/nginx/html
+    depends_on:
+      - frontend
+      - backend
+
+networks:
+  app-network:
+    driver: bridge

nginx/Dockerfile

@@ -0,0 +1,8 @@
+FROM nginx:alpine
+WORKDIR /usr/share/nginx/html
+
+# Nginx 기본 설정 복사
+COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

nginx/Dockerfile.dev

@@ -0,0 +1,9 @@
+FROM nginx:alpine
+WORKDIR /usr/share/nginx/html
+
+# Nginx 기본 설정 복사
+COPY ./nginx/default.dev.conf /etc/nginx/conf.d/default.conf
+
+# 정적 파일을 호스트에서 복사 (개발 환경에서 핫 리로딩 사용 가능)
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

nginx/default.conf

@@ -0,0 +1,32 @@
+# 백엔드 서버 정의
+upstream backend {
+  server backend:3000; # 백엔드 서버 (NestJS)
+}
+
+server {
+  listen 80;
+
+  # /api 경로로 들어오는 요청은 백엔드로 전달
+  location /api {
+    proxy_pass http://backend;      # 백엔드로 요청 전달
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "Upgrade";
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+  }
+
+  # 정적 파일을 제공하는 기본 경로 설정
+  location / {
+    root /usr/share/nginx/html;   # React 빌드 결과물이 위치한 디렉터리
+    index index.html;             # 기본 진입점 파일
+    try_files $uri /index.html;   # SPA 라우팅 지원
+  }
+
+  # 404 에러 페이지 설정
+  error_page 404 /404.html;
+  location = /404.html {
+    root /usr/share/nginx/html;
+  }
+}

nginx/default.dev.conf

@@ -0,0 +1,36 @@
+# 백엔드와 프론트엔드에 대한 업스트림 서버 정의
+upstream backend {
+  server backend:3000; # 백엔드 서버 (NestJS)
+}
+
+upstream frontend {
+  server frontend:5173; # 프론트엔드 서버 (React)
+}
+
+server {
+  listen 80;
+
+  # /api 경로로 들어오는 요청은 백엔드로 전달
+  location /api {
+    proxy_pass http://backend;      # 백엔드로 요청 전달
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "Upgrade";
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+  }
+
+  # 기본 경로는 프론트엔드로 전달
+  location / {
+    proxy_pass http://frontend;
+  }
+
+  # /sockjs-node 경로 (React의 핫 리로딩 웹소켓 연결)
+  location /sockjs-node {
+    proxy_pass http://frontend;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "Upgrade";
+  }
+}

server/Dockerfile

@@ -0,0 +1,19 @@
+# 1. Node.js 20 기반 이미지
+FROM node:20
+WORKDIR /app
+
+# 2. 모노레포 루트에서 필요한 파일 복사
+COPY ./package.json ./pnpm-lock.yaml ./pnpm-workspace.yaml ./
+COPY ./server/package.json ./server/
+
+# 3. pnpm 설치 및 의존성 설치
+RUN npm install -g pnpm
+RUN pnpm install
+
+# 4. 애플리케이션 소스 복사 및 빌드
+COPY . .
+RUN pnpm --filter server run build
+
+# 5. NestJS 서버 실행
+EXPOSE 3000
+CMD ["pnpm", "--filter", "server", "run", "start:prod"]

server/Dockerfile.dev

@@ -0,0 +1,20 @@
+# 1. Node.js 20 기반 이미지
+FROM node:20
+WORKDIR /app
+
+# 2. 모노레포 루트에서 필요한 파일 복사
+COPY ./package.json ./pnpm-lock.yaml ./pnpm-workspace.yaml ./
+COPY ./server/package.json ./server/
+
+# 3. pnpm 설치 및 의존성 설치
+RUN npm install -g pnpm
+RUN pnpm install
+
+# 4. 소스 코드 복사
+COPY . .
+
+# 5. NestJS 개발 서버 실행용 포트 노출
+EXPOSE 3000
+
+# 6. 개발 모드 실행
+CMD ["pnpm", "--filter", "server", "run", "start:dev"]