React 배포

빌드 산출물-호스팅-CDN 요청 처리 흐름

정적 호스팅 배포는 npm build 산출물이 CDN에 올라가고 브라우저 요청이 HTML, JS, CSS, asset 캐시로 나뉘어 처리되는 구조다.

01

빌드 생성

npm run build가 index.html과 /assets/app.[hash].js, CSS 파일을 만든다.

dist
02

업로드

호스팅은 dist/build 폴더를 origin에 올리고 CDN edge로 invalidation한다.

publish
03

요청 처리

브라우저는 HTML을 no-cache로 받고 해시 asset은 CDN cache hit로 재사용한다.

load
04

SPA fallback

/dashboard 직접 진입은 404 대신 index.html rewrite로 React Router가 매칭한다.

rewrite
Vercel
Git push마다 production/preview 배포가 분리되어 PR 확인이 쉽다. 환경 변수는 빌드 시점에 주입되므로 client 노출 접두어를 구분한다.
VITE_ / REACT_APP_ 공개값만
GitHub Pages
정적 공개 SPA에 맞지만 repository 경로가 base URL이 된다. Vite base, CRA homepage, React Router basename이 어긋나면 asset 404가 난다.
blank page, chunk 404
S3/CDN
Cache-Control, custom domain, invalidation을 직접 제어할 수 있다. 403/404 error document와 rewrite 규칙을 index.html로 맞춰야 한다.
origin policy, invalidation

하위 라우트 새로고침 · asset 캐시 · 공개 env 검사

새로고침 /posts/1 주소를 직접 열어도 index.html rewrite가 적용된다.
캐시 DevTools에서 index.html은 no-cache, app.[hash].js는 max-age/immutable인지 본다.
환경 변수 API key 같은 비공개 값이 bundle에 들어가지 않았는지 source map과 network를 확인한다.

요청 경로

GET /dashboard -> rewrite /index.html
GET /assets/app.8f3.js -> CDN cache hit