From ee33e39cc5dd7da172edc1305f4b07d5dde7d5ad Mon Sep 17 00:00:00 2001
From: Hyein Jeong <jhi2359@naver.com>
Date: Tue, 26 Nov 2024 13:48:42 +0900
Subject: [PATCH] =?UTF-8?q?[BE][Chore]=20#242=20:=204=EC=A3=BC=EC=B0=A8=20?=
 =?UTF-8?q?=EB=B0=B0=ED=8F=AC=EB=A5=BC=20=EC=9C=84=ED=95=9C=20=EC=84=B8?=
 =?UTF-8?q?=ED=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 4주차 배포를 위한 세팅 (dev 브랜치와 동일)
---
 backend/package.json           |  1 +
 backend/src/websocketServer.js |  4 ++--
 docker-compose.yml             | 18 ++++++++++++++----
 frontend/Dockerfile            | 31 +++++++++++++++++++++++++++++++
 4 files changed, 48 insertions(+), 6 deletions(-)
 create mode 100644 frontend/Dockerfile

diff --git a/backend/package.json b/backend/package.json
index 3e06776f..9acd4662 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -21,6 +21,7 @@
   "license": "ISC",
   "dependencies": {
     "bcrypt": "^5.1.1",
+    "cors": "^2.8.5",
     "dotenv": "^16.4.5",
     "express": "^4.21.1",
     "express-validator": "^7.2.0",
diff --git a/backend/src/websocketServer.js b/backend/src/websocketServer.js
index e2f71fd7..0435aebf 100644
--- a/backend/src/websocketServer.js
+++ b/backend/src/websocketServer.js
@@ -9,7 +9,7 @@ export const initializeWebSocketServer = server => {
     verifyClient: (info, done) => {
       const { origin } = info;
 
-      if (origin === 'http://localhost:5173') {
+      if (origin === 'http://localhost:5173' || origin === 'https://ddara.kro.kr') {
         done(true);
       } else {
         done(false, 403, 'Forbidden: Origin not allowed');
@@ -24,7 +24,7 @@ export const initializeWebSocketServer = server => {
   wss.on('connection', (ws, req) => {
     // URL에서 token 추출
     // TODO: 프론트 라우터 및 token 설정 완료 후 테스트
-    const url = new URL(req.url, `http://${req.headers.host}`);
+    const url = new URL(req.url, `https://${req.headers.host}`);
     const token = url.searchParams.get('token');
 
     if (!token) {
diff --git a/docker-compose.yml b/docker-compose.yml
index b6916480..0dd7683f 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -4,23 +4,33 @@ services:
     build:
       context: .
       dockerfile: backend/Dockerfile
-    ports:
-      - "3001:3001"
     environment:
       - NODE_ENV=production
     networks:
       - app-network
 
+  frontend:
+    build:
+      context: .
+      dockerfile: frontend/Dockerfile
+    networks:
+      - app-network
+    depends_on:
+      - backend
+
   nginx:
     image: nginx:alpine
     volumes:
+      - /etc/letsencrypt:/etc/letsencrypt
       - ./nginx.conf:/etc/nginx/nginx.conf
     ports:
       - "80:80"
-    networks:
-      - app-network
+      - "443:443"
     depends_on:
       - backend
+      - frontend
+    networks:
+      - app-network
 
 networks:
   app-network:
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 00000000..d61babea
--- /dev/null
+++ b/frontend/Dockerfile
@@ -0,0 +1,31 @@
+# 1. 베이스 이미지 설정 (Node.js 18 사용)
+FROM node:18 AS builder
+
+# 2. 작업 디렉토리 설정
+WORKDIR /app
+
+# 3. root의 패키지 파일 복사
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+
+# 4. pnpm 설치
+RUN npm install -g pnpm
+
+# 5. 전체 의존성 설치 (root)
+RUN pnpm install
+
+# 6. 프론트엔드 폴더 복사
+COPY frontend /app/frontend
+
+# 7. 작업 디렉토리 변경
+WORKDIR /app/frontend
+
+# 8. frontend 의존성 설치
+RUN pnpm install
+
+# 8. 빌드 실행
+RUN pnpm build
+
+# 9. Nginx 이미지를 사용해 정적 파일 제공
+FROM nginx:alpine
+COPY --from=builder /app/frontend/dist /usr/share/nginx/html
+EXPOSE 80