Mina Choi
533de126fb
실측(2026-09-07): `curl /` 가 3,021바이트에 본문 0자·`<a>` 0개였다. 같은 호스트의
발행본은 48,072바이트다. 구글은 JS 를 실행하지만 **렌더링 큐가 따로** 돌고 신규
도메인은 뒤로 밀린다 — 그동안 색인에는 "제목만 있고 내용 없는 페이지"로 들어가 있다.
서치콘솔이 "URL이 Google에 등록되어 있음"이라고 답하면서도 브랜드명 검색에조차 안
걸리던 이유다.
스크립트를 새로 짜지 않았다. react-router 7.17 에 프리렌더가 내장돼 있고
`ssr: false` 와 함께 쓰면 런타임 Node 서버 없이 지정한 경로만 HTML 로 굽는다 —
나머지는 지금까지처럼 SPA 폴백이다. 배포 구조가 그대로다.
- react-router.config.ts: `ssr:false` + `prerender: ['/', '/pricing', '/showcase']`.
로그인 뒤에만 의미가 있는 화면은 굽지 않는다(구울 내용이 사용자별이다)
- src/root.tsx · src/routes.ts: 예전 index.html + app/router.tsx 가 하던 일.
가드는 페이지마다 감싸지 않고 RequireAuthLayout 레이아웃 라우트 하나로 모았다
- 랜딩·요금·사례에 meta export: 제목을 브랜드가 아니라 **검색어**로 시작하게 바꿨다.
예전 제목("Web4Ai · AI 웹 빌더")에는 사람이 치는 말이 한 단어도 없었다.
랜딩에 Organization JSON-LD 추가 — 발행본에는 있는데 정작 랜딩엔 없었다
- src/lib/site.ts: 발행 호스트의 단일 출처. 모듈 최상위의 `window.location` 폴백을
전부 걷었다 — 서버 번들은 라우트를 한 파일로 묶어서 프리렌더 대상이 아닌 화면의
최상위 코드도 빌드 때 실행된다(실측: BuilderPage 에서 빌드가 죽었다)
- LoginPage: homePath 기본값 `/` → `/sites`. 예전엔 router.tsx 가 넘기던 값이라
라우트 모듈로 옮기면서 그대로 두면 로그인 후 랜딩으로 갔다
- nginx: SPA 폴백을 `/index.html` → `/__spa-fallback.html`. 프리렌더 뒤로
`/index.html` 은 **랜딩이 구워진 파일**이라, 그리로 넘기면 `/builder` 에 랜딩
HTML 이 내려가고 클라이언트가 다른 주소로 하이드레이트한다
- nginx/Dockerfile: 산출물이 `dist` → `build/client`. 경로가 어긋나면 COPY 가
조용히 빈 디렉토리를 만들고 컨테이너는 정상으로 뜬다
- site/seo/robots.ts: `/builder` `/login` `/signup` `/sites` `/account` Disallow.
이 경로들은 빈 SPA 폴백을 받는다 — 긁히면 호스트 전체에 저품질 신호가 쌓인다
검증: tsc·eslint·react-router build 통과.
랜딩 3,021B → 21,799B, 본문 1,278자, 링크 6개.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019fteiJNvAEbTnUKq8fSqoj
75 lines
4.5 KiB
TypeScript
75 lines
4.5 KiB
TypeScript
import {reactRouter} from '@react-router/dev/vite';
|
|
import tailwindcss from '@tailwindcss/vite';
|
|
import path from 'path';
|
|
import {defineConfig} from 'vite';
|
|
|
|
export default defineConfig({
|
|
// ★ @vitejs/plugin-react 를 따로 넣지 않는다 — reactRouter() 가 안에서 켠다.
|
|
// 둘 다 넣으면 리프레시 런타임이 두 번 주입돼 HMR 이 깨진다.
|
|
plugins: [reactRouter(), 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'),
|
|
},
|
|
},
|
|
// ★ 산출물이 `dist/` 가 아니라 `build/client/` 로 나간다(프레임워크 모드 기본값).
|
|
// nginx/Dockerfile 의 COPY 경로가 이 값과 맞아야 한다 — 어긋나면 빈 이미지가 구워지고
|
|
// 컨테이너는 정상으로 뜬다.
|
|
build: {
|
|
// ★ 발행본과 **같은 오리진**을 쓰므로 `/assets/` 를 서로 뺏는다. 빌더 번들만 다른
|
|
// 디렉토리로 뺀다 — 안 그러면 nginx 의 `/assets/` 규칙이 발행본 것만 주고
|
|
// 빌더 JS·CSS 가 404 다(화면은 뜨는데 스타일도 동작도 없다).
|
|
assetsDir: 'builder-assets',
|
|
},
|
|
server: {
|
|
// ★ Vite 6 는 모르는 Host 헤더를 403 "Blocked request" 로 막는다(DNS rebinding 방어).
|
|
// 운영은 앞단 nginx 가 Host 를 그대로 넘기므로 발행 호스트를 여기 넣어야 화면이 뜬다.
|
|
// 빠뜨리면 프록시는 정상인데 앱만 전부 403 이다.
|
|
allowedHosts: [process.env.VITE_PUBLISH_HOST ?? 'web4ai.o2osolution.ai'],
|
|
// 발행 사이트는 별도 정적 서버(: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},
|
|
},
|
|
});
|