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>
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import { fileURLToPath, URL } from 'node:url'
|
|
|
|
import { defineConfig } from 'vite'
|
|
import vue from '@vitejs/plugin-vue'
|
|
import vueJsx from '@vitejs/plugin-vue-jsx'
|
|
import vueDevTools from 'vite-plugin-vue-devtools'
|
|
|
|
// https://vite.dev/config/
|
|
export default defineConfig({
|
|
plugins: [
|
|
vue(),
|
|
vueJsx(),
|
|
vueDevTools(),
|
|
],
|
|
resolve: {
|
|
alias: {
|
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
|
},
|
|
},
|
|
server: {
|
|
// ngrok 등 외부 도메인 접근 허용 (DNS Rebinding 보호 비활성화)
|
|
allowedHosts: true,
|
|
// 도커/윈도우 환경 파일 핫 리로딩 강제 활성화
|
|
watch: {
|
|
usePolling: true,
|
|
},
|
|
// 개발 서버 API 프록시.
|
|
// useApi 의 baseURL 은 '/api'(상대경로)라 프록시가 없으면 vite 가 SPA 폴백으로
|
|
// index.html 을 200 으로 돌려준다 — 요청이 조용히 HTML 을 받아 실패한다.
|
|
//
|
|
// target 기본값은 호스트에서 직접 띄울 때 기준이고,
|
|
// docker 개발 환경에서는 compose 가 VITE_DEV_API_PROXY=http://backend:3000 을 주입한다.
|
|
proxy: {
|
|
'/api': {
|
|
target: process.env.VITE_DEV_API_PROXY || 'http://localhost:3000',
|
|
changeOrigin: true,
|
|
},
|
|
},
|
|
}
|
|
})
|