diff --git a/client/Dockerfile b/client/Dockerfile new file mode 100644 index 00000000..e3802265 --- /dev/null +++ b/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."] \ No newline at end of file diff --git a/client/Dockerfile.dev b/client/Dockerfile.dev new file mode 100644 index 00000000..61f2f870 --- /dev/null +++ b/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"] \ No newline at end of file diff --git a/client/package.json b/client/package.json index 895094bc..1bf1df01 100644 --- a/client/package.json +++ b/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" diff --git a/docker-compose.debug.yml b/docker-compose.debug.yml new file mode 100644 index 00000000..e41e92f1 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 00000000..cdc62251 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/nginx/Dockerfile b/nginx/Dockerfile new file mode 100644 index 00000000..eddbc882 --- /dev/null +++ b/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;"] \ No newline at end of file diff --git a/nginx/Dockerfile.dev b/nginx/Dockerfile.dev new file mode 100644 index 00000000..7c4aafb3 --- /dev/null +++ b/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;"] \ No newline at end of file diff --git a/nginx/default.conf b/nginx/default.conf new file mode 100644 index 00000000..268c9e3c --- /dev/null +++ b/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; + } +} diff --git a/nginx/default.dev.conf b/nginx/default.dev.conf new file mode 100644 index 00000000..f5c8c8f7 --- /dev/null +++ b/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"; + } +} \ No newline at end of file diff --git a/server/Dockerfile b/server/Dockerfile new file mode 100644 index 00000000..f18a47c9 --- /dev/null +++ b/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"] \ No newline at end of file diff --git a/server/Dockerfile.dev b/server/Dockerfile.dev new file mode 100644 index 00000000..17027ba8 --- /dev/null +++ b/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"] \ No newline at end of file