refactor: 프론트엔드/백엔드 컨테이너 분리

- backend/Dockerfile 생성
- frontend/Dockerfile 생성
- docker-compose.yml에 별도 서비스로 분리
- 기존 루트 Dockerfile 삭제

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Dockerfile

@@ -1,27 +0,0 @@
-# ============================================
-# 개발 모드
-# ============================================
-FROM node:20-alpine
-WORKDIR /app
-RUN apk add --no-cache ffmpeg
-CMD ["sh", "-c", "cd /app/backend && npm install && cd /app/frontend && npm install --include=dev && (cd /app/backend && PORT=3000 npm run dev &) && sleep 3 && cd /app/frontend && npm run dev -- --host 0.0.0.0"]
-
-# ============================================
-# 배포 모드 (사용 시 위 개발 모드를 주석처리)
-# ============================================
-# FROM node:20-alpine AS frontend-builder
-# WORKDIR /frontend
-# COPY frontend/package*.json ./
-# RUN npm install
-# COPY frontend/ ./
-# RUN npm run build
-#
-# FROM node:20-alpine
-# WORKDIR /app
-# RUN apk add --no-cache ffmpeg
-# COPY backend/package*.json ./
-# RUN npm install --production
-# COPY backend/ ./
-# COPY --from=frontend-builder /frontend/dist ./dist
-# EXPOSE 80
-# CMD ["npm", "start"]

backend/Dockerfile

@@ -0,0 +1,15 @@
+# 개발 모드
+FROM node:20-alpine
+WORKDIR /app
+RUN apk add --no-cache ffmpeg
+CMD ["sh", "-c", "npm install && npm run dev"]
+
+# 배포 모드 (사용 시 위 개발 모드를 주석처리)
+# FROM node:20-alpine
+# WORKDIR /app
+# RUN apk add --no-cache ffmpeg
+# COPY package*.json ./
+# RUN npm install --production
+# COPY . .
+# EXPOSE 3000
+# CMD ["npm", "start"]

docker-compose.yml

@@ -1,17 +1,15 @@
 services:
-  fromis9-frontend:
+  backend:
-    build: .
+    build: ./backend
-    container_name: fromis9-frontend
+    container_name: fromis9-backend
     labels:
       - "com.centurylinklabs.watchtower.enable=false"
     env_file:
       - .env
     # 개발 모드
     volumes:
-      - ./backend:/app/backend
+      - ./backend:/app
-      - ./frontend:/app/frontend
+      - backend_modules:/app/node_modules
-      - backend_modules:/app/backend/node_modules
-      - frontend_modules:/app/frontend/node_modules
     # 배포 모드 (사용 시 위 volumes를 주석처리)
     # volumes: []
     networks:
@@ -19,6 +17,25 @@ services:
       - db
     restart: unless-stopped
 
+  frontend:
+    build: ./frontend
+    container_name: fromis9-frontend
+    labels:
+      - "com.centurylinklabs.watchtower.enable=false"
+    environment:
+      - VITE_API_URL=http://backend:3000
+    # 개발 모드
+    volumes:
+      - ./frontend:/app
+      - frontend_modules:/app/node_modules
+    # 배포 모드 (사용 시 위 volumes를 주석처리)
+    # volumes: []
+    depends_on:
+      - backend
+    networks:
+      - app
+    restart: unless-stopped
+
   meilisearch:
     image: getmeili/meilisearch:v1.6
     container_name: fromis9-meilisearch

frontend/Dockerfile

@@ -0,0 +1,17 @@
+# 개발 모드
+FROM node:20-alpine
+WORKDIR /app
+CMD ["sh", "-c", "npm install --include=dev && npm run dev -- --host 0.0.0.0"]
+
+# 배포 모드 (사용 시 위 개발 모드를 주석처리)
+# FROM node:20-alpine AS builder
+# WORKDIR /app
+# COPY package*.json ./
+# RUN npm install
+# COPY . .
+# RUN npm run build
+#
+# FROM nginx:alpine
+# COPY --from=builder /app/dist /usr/share/nginx/html
+# EXPOSE 80
+# CMD ["nginx", "-g", "daemon off;"]