ttipo
32eb4fafca
useApi 의 baseURL 이 '/api' 상대경로인데 vite dev 서버에 프록시가 없어, 브라우저의 API 요청이 백엔드에 닿지 않고 SPA 폴백으로 index.html 을 받고 있었다. 더 나쁜 것은 조용히 실패한다는 점이다 — HTTP 200 에 Content-Type: text/html 이라 인터셉터의 success 판별을 통과하지 못하고 HTML 문자열이 그대로 반환된다. 템플릿의 화면이 아직 API 를 호출하지 않아 드러나지 않았을 뿐이다. - vite.config.ts 에 /api 프록시 추가. 대상은 VITE_DEV_API_PROXY 로 조정 가능하며 docker 개발 환경에서는 compose 가 http://backend:3000 을 주입한다. - DB_HOST 기본값을 'db' 에서 'localhost' 로 변경. compose 는 항상 DB_HOST=db 를 주입하므로 이 기본값은 호스트에서 직접 실행할 때만 쓰인다 — 'db' 는 호스트에서 해석되지 않아 로컬 실행이 불가능했다. - README 의 "Docker 없이 로컬 개발" 절차가 위 두 문제로 동작하지 않았다. 실제로 되는 절차로 교체. 프록시 경유 요청이 JSON 을 반환하고 SPA 라우팅도 유지되는 것을 확인했다. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
61 lines
2.1 KiB
YAML
61 lines
2.1 KiB
YAML
services:
|
|
frontend:
|
|
# dev에서는 Docker Desktop 시작 시 자동 실행 방지 (수동 up 때만 실행)
|
|
restart: "no"
|
|
build:
|
|
target: build-stage
|
|
# 비-root 구동이라 1024 미만 포트를 쓸 수 없다 → vite 기본 포트 사용
|
|
command: npm run dev -- --host 0.0.0.0 --port 5173
|
|
ports:
|
|
- "${FRONTEND_PORT}:5173"
|
|
# dev 는 nginx(8080)가 아니라 vite(5173)를 띄우므로 base 의 헬스체크를 덮어쓴다
|
|
healthcheck:
|
|
test: ["CMD-SHELL", "wget -qO- http://127.0.0.1:5173/ || exit 1"]
|
|
environment:
|
|
- CHOKIDAR_USEPOLLING=true
|
|
- WATCHPACK_POLLING=true
|
|
# vite dev 서버가 /api 요청을 백엔드 컨테이너로 프록시한다 (vite.config.ts)
|
|
- VITE_DEV_API_PROXY=http://backend:${BACKEND_PORT}
|
|
volumes:
|
|
- ./${FRONTEND_DIR}:/app
|
|
- /app/node_modules
|
|
# dev에서는 리버스 프록시 미사용 — base의 networks 목록을 덮어씀
|
|
networks: !override
|
|
- app-network
|
|
|
|
backend:
|
|
# dev에서는 Docker Desktop 시작 시 자동 실행 방지 (수동 up 때만 실행)
|
|
restart: "no"
|
|
build:
|
|
target: builder
|
|
command: npm run start:dev
|
|
ports:
|
|
- "${BACKEND_PORT}:${BACKEND_PORT}"
|
|
- "${WEBSOCKET_PORT}:${WEBSOCKET_PORT}"
|
|
environment:
|
|
- CHOKIDAR_USEPOLLING=true
|
|
- WATCHPACK_POLLING=true
|
|
volumes:
|
|
- ./${BACKEND_DIR}:/app
|
|
- /app/node_modules
|
|
# dev에서는 리버스 프록시 미사용 — base의 networks 목록을 덮어씀
|
|
networks: !override
|
|
- app-network
|
|
|
|
db:
|
|
# dev에서는 Docker Desktop 시작 시 자동 실행 방지 (base 의 always 를 덮어씀)
|
|
restart: "no"
|
|
# 로컬 DB 툴 접속용. 127.0.0.1 로 한정해 외부 네트워크에 노출되지 않게 한다 (보안 규칙)
|
|
ports:
|
|
- "127.0.0.1:${DB_PORT}:5432"
|
|
|
|
redis:
|
|
# dev에서는 Docker Desktop 시작 시 자동 실행 방지 (base 의 always 를 덮어씀)
|
|
restart: "no"
|
|
# 로컬 Redis CLI 접속용. 127.0.0.1 로 한정 (보안 규칙)
|
|
ports:
|
|
- "127.0.0.1:${REDIS_PORT}:6379"
|
|
|
|
# base의 proxy 외부 네트워크 의존을 dev에서 제거
|
|
networks:
|
|
proxy: !reset null |