o2o-site-AEO/frontend/admin/vite.config.ts
Mina Choi 6784e59ca5 최초 커밋 — 기존 코드 전체 + 문서 체계 신설
git 저장소가 없어 히스토리·협업 기반이 아예 없던 상태를 연다.
함께 문서를 재편했다. 그동안 문서가 있어도 "이 제품이 뭘 푸는가"와
"어떻게 도는가"를 담은 문서가 없어서, 목표 문장이 backend/frontend
README 두 곳에 복붙돼 있었다 — 상위 문서가 없어 아래로 샌 것이다.

신설
  README.md               레포 진입점 + 문서 지도 + 문서 규칙 4가지
  AGENTS.md               에이전트·신규 합류자용 함정 목록과 규약
                          (CLAUDE.md 는 여기로 걸린 심볼릭 링크)
  docs/PRODUCT.md         제품 정의 — 문제·사용자·원칙·**non-goals**·성공 기준
  docs/ARCHITECTURE.md    payload 경계·발행 파이프라인·서빙 결정·앱 분리 설계

이동
  backend/docs/DECISIONS.md → docs/DECISIONS.md
    백엔드만의 결정이 아니다. 게다가 코드 주석 ~25곳이 이미
    `docs/DECISIONS.md` 로 적고 있어 레포 루트 기준으로는 그게 맞다.

갱신
  docs/DEPLOY.md          서빙 결정 반영 — nginx 정적 서빙이 지금 경로(3절),
                          Azure 는 나중에 켤 때(4절)로 분리
  docs/ARCHITECTURE.md    사이트 = 한 장(2026-08-31) 구조 반영
  docs/COLLECTION_SEO_AEO_FLOW.md
                          robots.txt·sitemap.xml 은 오리진 루트에만 굽는다는 점 명시
  frontend/site/scripts/prerender.ts
                          헤더 주석의 렌더 보고서 경로가 실제(422줄)와 달라 수정

.gitignore
  ★ CLAUDE.md 를 더 이상 무시하지 않는다. 에이전트 지침은 팀과 모든
    에이전트가 공유하는 규약이라 커밋해야 한다 — 무시하면 클론한 사람이
    "배포 후 republish_all.py 필수" 같은 함정을 전달받지 못한다.
    개인용 오버라이드는 ~/.claude/CLAUDE.md 에 둔다.
2026-08-31 13:57:59 +09:00

60 lines
3.3 KiB
TypeScript

import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import {defineConfig} from 'vite';
export default defineConfig({
plugins: [react(), tailwindcss()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
// css 는 더 구체적인 별칭이 먼저 와야 한다 — 아래 '@o2o/shared' 접두어 규칙이
// 먼저 걸리면 shared/src/tokens.css(없는 경로)로 떨어진다.
// 실제 파일은 styles/ 아래에 있고, package.json exports 도 그쪽을 가리킨다.
'@o2o/shared/tokens.css': path.resolve(__dirname, '../shared/src/styles/tokens.css'),
'@o2o/shared/base.css': path.resolve(__dirname, '../shared/src/styles/base.css'),
// 워크스페이스 심볼릭 링크를 타지 않고 소스를 직접 가리킨다 —
// shared 를 고치면 빌드 없이 HMR 이 바로 돈다.
'@o2o/shared': path.resolve(__dirname, '../shared/src'),
},
},
server: {
// 발행 사이트는 별도 정적 서버(:3001)가 만들고 서빙하지만, 사용자는 admin 과 같은
// origin(:3000)의 `/s/<slug>` 로 접근한다. 프로세스 포트만 분리하고 공개 URL은 하나로 둔다.
proxy: {
// `'/s'`로 두면 Vite의 `/src/app/main.tsx`까지 매칭되어 에디터가 흰 화면이 된다.
// 발행 사이트 루트(`/s`)와 그 하위 경로(`/s/...`)만 정확히 전달한다.
'^/s(?:/|$)': {
target: 'http://127.0.0.1:3001',
changeOrigin: true,
},
/**
* ★ 발행본의 JS·CSS 번들.
*
* 프리렌더는 사이트마다 번들을 복사하지 않고 `out/assets/` 하나를 **모든 사이트가 공유**한다
* (캐시 엔트리가 사이트 수만큼 늘지 않는다). 그래서 페이지 HTML 은 `/s/<slug>/assets/...` 가
* 아니라 루트 절대경로 `/assets/...` 를 가리킨다.
*
* 이 규칙이 없으면 그 요청이 위의 `^/s` 에 걸리지 않아 **관리자 dev 서버**로 떨어지고,
* Vite 는 모르는 경로에 SPA fallback(index.html)을 200 으로 돌려준다 —
* 브라우저는 JS 자리에서 HTML 을 받아 파싱 에러를 내고, CSS 는 MIME 불일치로 무시한다.
* 화면에는 스타일도 상호작용도 없는 맨 HTML 만 남는다. 404 가 아니라 200 이라
* 네트워크 탭만 봐서는 원인이 잘 안 보이는 자리다.
*
* ★ 운영에서는 nginx·CDN 이 `out/` 을 루트로 서빙하므로 `/assets/...` 가 그대로 맞다 —
* 이 프록시는 개발에서 두 프로세스를 한 origin 으로 보이게 하는 몫만 한다.
* ★ `/fonts` 는 넘기지 않는다. 관리자와 발행본이 **같은 경로를 각자** 쓰고 있어
* 여기서 넘기면 관리자 자기 폰트가 발행본 쪽으로 샌다. 지금 발행본 HTML 은
* `/fonts/...` 를 참조하지 않는다(웹폰트는 Google Fonts CDN 에서 받는다).
*/
'^/assets/': {
target: 'http://127.0.0.1:3001',
changeOrigin: true,
},
},
// 도커(Mac) 바인드마운트는 네이티브 inotify 가 컨테이너로 전파되지 않아
// 파일 감시를 polling 으로 해야 호스트 변경이 감지된다.
watch: {usePolling: true, interval: 300},
},
});