Files
Aislo/vite.config.ts
T
eomsangdonandClaude Opus 5 8f4c486a00 fix(개발환경): vite 프록시 대상을 127.0.0.1 로 박음 — /api 가 IPv6 로 헛짚던 것
계획서 7-1. 화면의 **모든 `/api` 요청이 「Failed to fetch」** 가 되는데 서버는 멀쩡한
증상이 하루 종일 있었음. 원인은 프록시 대상이 `http://localhost:<포트>` 인 것 —
Node 18+ 는 `localhost` 를 **IPv6(::1) 먼저** 물고, 백엔드는 `SERVER_HOST=0.0.0.0`
(IPv4 전용)으로 떠서 서로 못 만남.

실측 — `127.0.0.1:8001` 200 · `[::1]:8001` 연결 실패.
고친 뒤(vite 재기동 포함) 화면에서 `/api/health` **200**, 로그인 POST **200**.

오늘 겪은 「저장 Failed to fetch」 두 번과 「화면 백지」 세 번이 이것으로 설명됨 —
부팅 때 API 가 죽으면 앱이 아무것도 안 그리고 콘솔 오류도 안 남았음.

공용 파일이라 배분 창(claude-b1) 승인을 받고 고침. 5173·5174 양쪽에 같이 적용됨.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-07 10:50:36 +09:00

61 lines
2.4 KiB
TypeScript

import { resolve } from "node:path";
import { fileURLToPath } from "node:url";
const __dirname = fileURLToPath(new URL(".", import.meta.url));
// ⚠ `localhost` 로 두지 말 것 — Node 18+ 는 그것을 **IPv6(::1) 먼저** 물고, 백엔드는
// `SERVER_HOST=0.0.0.0`(IPv4 전용)로 뜬다. 그러면 프록시가 `[::1]:<포트>` 로 붙으려다
// 실패해 화면의 **모든 `/api` 요청이 「Failed to fetch」** 가 된다 — 서버는 멀쩡한데
// 저장이 실패하고, 부팅 때 죽으면 화면이 통째로 백지가 된다(2026-09-07 실측:
// `127.0.0.1:8001` 200 · `[::1]:8001` 연결 실패). 숫자로 박아 그 갈림을 없앤다.
const apiTarget = `http://127.0.0.1:${process.env.AISLO_API_PORT ?? "8000"}`;
/**
* Vite 설정 — 임도 설계 웹앱 (Vanilla TS + Three.js)
*
* - root: A00_Common (index.html 위치)
* - 페이지 폴더(A01_Home 등)는 ../를 통해 접근
* - 0_old(구형 코드), venv(파이썬)는 빌드에서 제외
*/
export default {
root: "A00_Common",
publicDir: false,
cacheDir: "config/node_modules/.vite",
resolve: {
alias: {
"@ui": resolve(__dirname, "./ui_template"),
"@config": resolve(__dirname, "./config"),
"@util": resolve(__dirname, "./common_util"),
three: resolve(__dirname, "./config/node_modules/three"),
"maplibre-gl": resolve(__dirname, "./config/node_modules/maplibre-gl"),
},
},
server: {
// main.py가 CLI --port로 덮지만, `npm run dev` 맨손 실행에서 보조 워크트리가
// 메인의 5173을 뺏지 않도록 env를 먼저 본다(dev_up.py가 주입한다).
port: Number(process.env.FRONTEND_DEV_PORT ?? 5173),
open: false,
// 백엔드(FastAPI) 프록시 — config_frontend.ts의 API_BASE_URL과 정합.
// 포트는 AISLO_API_PORT로 바꿀 수 있다(기본 8000) — 워크트리를 나눠 쓰는 병행
// 작업에서 각자 자기 백엔드를 보게 하려는 것이다(2026-08-30, CLAUDE.md 7장).
proxy: {
"/api": {
target: apiTarget,
changeOrigin: true,
},
// B07 독립형 CAD 앱 — FastAPI 정적 마운트로 위임
"/b07-cad": {
target: apiTarget,
changeOrigin: true,
},
},
},
build: {
outDir: "../config/node_modules/.build",
emptyOutDir: true,
target: "es2022",
},
optimizeDeps: {
exclude: ["0_old"],
},
};