Merge pull request #268 from boostcampwm-2024/chore/be/#242-devNginxF…

…or4th

[BE][Chore] #242 : 4주차 배포를 위한 세팅

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",

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) {

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:

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