refactor: 프론트·API 를 같은 도메인(/api)으로 통합
브라우저가 프론트와 API 를 서로 다른 도메인으로 호출하던 구조를 같은 도메인의 /api 경로로 통합한다. 운영은 Nginx Proxy Manager 의 Proxy Host(/ → frontend:8080)와 Custom location(/api → backend:3000)이, 개발은 vite dev 프록시가 같은 규칙으로 백엔드에 넘긴다. - 같은 출처 호출이라 CORS 설정이 필요 없고 CSP connect-src 'self' 가 그대로 동작한다 (기존 예시대로 별도 도메인에 배포하면 CSP 에 막혀 API 호출이 실패했다) - 프론트 번들의 baseURL 이 /api 상대경로라 도메인이 바뀌어도 다시 빌드할 필요가 없다 - NPM 설정 절차와 주의점(Cache Assets 끄기, proxy 네트워크 생성)을 README "운영 배포"에 정리했다 - 프록시 설정이 빠지면 frontend nginx 가 /api 를 404 로 막는다 — index.html(200)로 조용히 실패하지 않게 함께 고친 CORS 문제: - CORS_ORIGIN 에 콤마로 여러 오리진을 적으면 문자열 전체를 하나로 비교해 모두 막히던 버그 - 운영에서도 localhost:5173·localhost:3000 이 credentials 포함으로 항상 허용되던 문제 - 형식이 잘못된 오리진(경로 포함 등)은 기동 시점에 실패하도록 검증 추가 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,15 +1,17 @@
|
||||
# ==========================================
|
||||
# 프론트엔드 환경변수 (development)
|
||||
#
|
||||
# ⚠️ VITE_API_BASE_URL 은 루트 .env.development 의 BACKEND_API_URL 이
|
||||
# docker-compose build arg 로 주입된다 — 여기에 작성할 필요가 없다.
|
||||
# ⚠️ 보통은 이 파일이 필요 없다.
|
||||
# API 는 같은 도메인의 /api 로 호출하고(useApi.ts 기본값), vite dev 프록시가 백엔드로 넘긴다.
|
||||
# 컨테이너 빌드 때는 루트 .env.development 의 BACKEND_API_URL 이 build arg 로 주입된다.
|
||||
# (SSOT: 루트 .env — .claude/rules/env-structure.md)
|
||||
#
|
||||
# Docker 없이 vite dev 서버를 직접 띄울 때만 아래 값을 사용한다.
|
||||
# 백엔드를 프록시 없이 직접 호출해야 하는 특수한 경우에만 복사해 쓴다.
|
||||
# cp .env.development.example .env.development
|
||||
# → 절대 URL 로 바꾸면 다른 오리진 호출이 되므로 루트 CORS_ORIGIN 에 이 프론트 주소를 추가해야 한다.
|
||||
#
|
||||
# 모든 키는 VITE_ 접두어가 있어야 클라이언트 번들에 포함된다.
|
||||
# ⚠️ 번들에 그대로 노출되므로 시크릿을 넣지 말 것.
|
||||
# ==========================================
|
||||
|
||||
# VITE_API_BASE_URL=http://localhost:3000/api
|
||||
# VITE_API_BASE_URL=/api
|
||||
|
||||
Reference in New Issue
Block a user