docs: 컨테이너 분리 반영하여 개발 가이드 업데이트

- 컨테이너 구성 표 추가
- 개별 컨테이너 로그/재시작 명령어 추가
- 배포 모드 Dockerfile 예시 분리
- 네트워크 구조 다이어그램 수정

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

docker-compose.yml

@@ -1,23 +1,5 @@
 services:
-  backend:
+  fromis9-frontend:
-    build: ./backend
-    container_name: fromis9-backend
-    labels:
-      - "com.centurylinklabs.watchtower.enable=false"
-    env_file:
-      - .env
-    # 개발 모드
-    volumes:
-      - ./backend:/app
-      - backend_modules:/app/node_modules
-    # 배포 모드 (사용 시 위 volumes를 주석처리)
-    # volumes: []
-    networks:
-      - app
-      - db
-    restart: unless-stopped
-
-  frontend:
     build: ./frontend
     container_name: fromis9-frontend
     labels:
@@ -36,6 +18,24 @@ services:
       - app
     restart: unless-stopped
 
+  fromis9-backend:
+    build: ./backend
+    container_name: fromis9-backend
+    labels:
+      - "com.centurylinklabs.watchtower.enable=false"
+    env_file:
+      - .env
+    # 개발 모드
+    volumes:
+      - ./backend:/app
+      - backend_modules:/app/node_modules
+    # 배포 모드 (사용 시 위 volumes를 주석처리)
+    # volumes: []
+    networks:
+      - app
+      - db
+    restart: unless-stopped
+
   meilisearch:
     image: getmeili/meilisearch:v1.6
     container_name: fromis9-meilisearch

docs/development.md

@@ -8,44 +8,93 @@ cd /docker/fromis_9
 docker compose up -d --build
 ```
 
-### 구성
+### 컨테이너 구성
-- **Vite** (포트 80): 프론트엔드 개발 서버, HMR 지원
+| 컨테이너 | 포트 | 설명 |
-- **Fastify** (포트 3000): 백엔드 API, --watch 모드
+|---------|------|------|
-- Vite가 `/api`, `/docs` 요청을 localhost:3000으로 프록시
+| `fromis9-frontend` | 80 | Vite 개발 서버, HMR 지원 |
+| `fromis9-backend` | 80 | Fastify API, --watch 모드 |
+| `fromis9-meilisearch` | 7700 | 검색 엔진 |
+| `fromis9-redis` | 6379 | 캐시 |
+
+- Vite가 `/api`, `/docs` 요청을 백엔드로 프록시
 
 ### 로그 확인
 ```bash
+# 전체 로그
+docker compose logs -f
+
+# 백엔드만
+docker compose logs -f fromis9-backend
+
+# 프론트엔드만
 docker compose logs -f fromis9-frontend
 ```
 
 ### 코드 수정
-- `frontend/`, `backend/` 폴더가 볼륨 마운트됨
+- `frontend/`, `backend/` 폴더가 각각 볼륨 마운트됨
 - 코드 수정 시 자동 반영 (HMR, watch)
 
+### 재시작
+```bash
+# 백엔드만 재시작
+docker compose restart fromis9-backend
+
+# 프론트엔드만 재시작
+docker compose restart fromis9-frontend
+
+# 전체 재시작
+docker compose restart
+```
+
 ---
 
 ## 배포 모드 전환
 
 ### 1. Dockerfile 수정
+
+**backend/Dockerfile:**
 ```dockerfile
 # 개발 모드 주석처리
 # FROM node:20-alpine
-# WORKDIR /app
 # ...
 
 # 배포 모드 주석해제
-FROM node:20-alpine AS frontend-builder
+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"]
+```
+
+**frontend/Dockerfile:**
+```dockerfile
+# 개발 모드 주석처리
+# FROM node:20-alpine
+# ...
+
+# 배포 모드 주석해제
+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;"]
 ```
 
 ### 2. docker-compose.yml 수정
 ```yaml
 # volumes 주석처리
 # volumes:
-#   - ./backend:/app/backend
+#   - ./frontend:/app
-#   - ./frontend:/app/frontend
+#   - frontend_modules:/app/node_modules
-#   - backend_modules:/app/backend/node_modules
-#   - frontend_modules:/app/frontend/node_modules
 ```
 
 ### 3. 빌드 및 실행
@@ -115,9 +164,9 @@ docker exec caddy caddy reload --config /etc/caddy/Caddyfile
 
 ### 네트워크 구조
 ```
-인터넷 → Caddy (:443) → fromis9-frontend (:80) → Fastify (:3000)
+인터넷 → Caddy (:443) → fromis9-frontend (:80) → fromis9-backend (:80)
-                                              ↓
+                                               ↓
-                            MariaDB, Redis, Meilisearch (내부 네트워크)
+                         MariaDB, Redis, Meilisearch (내부 네트워크)
 ```
 
 ---
@@ -125,8 +174,8 @@ docker exec caddy caddy reload --config /etc/caddy/Caddyfile
 ## 유용한 명령어
 
 ```bash
-# 컨테이너 재시작
+# 컨테이너 상태 확인
-docker compose restart fromis9-frontend
+docker compose ps
 
 # 볼륨 포함 완전 재시작
 docker compose down -v && docker compose up -d --build