feat: frontend, nginx docker-compose

Author: hoeeeeeh

docker-compose.yaml

@@ -0,0 +1,33 @@
+# docker-compose.yml
+version: '3.8'
+
+services:
+  frontend:
+    image: liboost/frontend-index-server
+    build:
+      context: .
+      dockerfile: ./frontend/dockerfile
+    depends_on:
+      # - backend
+      - nginx
+
+#  backend:
+#    build:
+#      context: ./backend
+#    volumes:
+#      - ./docker-compose.backend.yml:/app/docker-compose.backend.yml  # backend의 하위 구성 포함
+#      - .:/app  # 소스 코드 전체 마운트
+#      - yarn-lock:/app/yarn.lock  # yarn.lock 파일을 공통 볼륨으로 마운트
+#    command: docker-compose -f /app/docker-compose.backend.yml up
+#    depends_on:
+#      - nginx
+
+  nginx:
+    image: nginx:latest
+    ports:
+      - "80:80"
+    volumes:
+      - ./nginx:/etc/nginx  # Nginx 설정 파일을 컨테이너에 마운트
+
+
+

frontend/dockerfile

@@ -0,0 +1,35 @@
+# 1. 베이스 이미지 설정
+FROM node:20-alpine AS builder
+
+# 2. 작업 디렉토리 생성 및 이동
+WORKDIR /app
+
+COPY yarn.lock ./
+
+# 3. package.json 및 yarn.lock 파일 복사
+COPY ./frontend/package.json ./
+
+# 4. 의존성 설치
+RUN yarn install
+
+# 5. 소스 코드 복사 및 빌드
+COPY ./frontend .
+
+RUN yarn build
+
+# 6. 실행 환경 설정
+FROM node:20-alpine AS runtime
+
+WORKDIR /app
+
+# 7. 빌드 결과물을 runtime 단계로 복사
+COPY --from=builder /app/.dist /app/vite.config.ts ./
+
+COPY ./frontend/package.json ./
+COPY yarn.lock ./
+# 8. 의존성 설치 (runtime 필요 항목만 설치)
+RUN yarn install --production
+
+EXPOSE 5173
+# 9. 서버 실행
+CMD ["yarn", "dev"]

frontend/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0",
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview",
@@ -18,7 +18,11 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.27.0",
-    "styled-components": "^6.1.13"
+    "styled-components": "^6.1.13",
+    "@vitejs/plugin-react": "^4.3.3",
+    "vite": "^5.4.10",
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
@@ -28,15 +32,11 @@
     "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^8.14.0",
     "@typescript-eslint/parser": "^8.14.0",
-    "@vitejs/plugin-react": "^4.3.3",
     "eslint": "^9.13.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.11.0",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10",
-    "vite-plugin-svgr": "^4.3.0",
-    "vite-tsconfig-paths": "^5.1.0"
+    "typescript-eslint": "^8.11.0"
   }
 }

nginx/conf.d/frontend.conf

@@ -0,0 +1,12 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    location / {
+        proxy_pass http://frontend:5173;  # 5173 포트로 포워딩
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}

nginx/nginx.conf

@@ -0,0 +1,9 @@
+# nginx.conf
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    include conf.d/*.conf;  # conf.d 디렉터리의 모든 .conf 파일을 포함
+}