React · build release map

React 빌드 산출물 점검

source와 env 입력이 Vite build를 지나 dist assets, preview server, production hosting으로 이동할 때 경로와 런타임 가정이 어디서 확정되는지 한 장으로 확인합니다.

source/env에서 production hosting까지

dist 기준 흐름
source / env src, public, VITE_ vite build base, split, hash dist assets html, css, js chunk preview 200, route refresh production hosting CDN cache, fallback base path drift lazy chunk 404 refresh fallback
01 src/env

Source와 env 입력

컴포넌트, 라우트, import, public 파일과 VITE_ 값이 production 빌드 입력이 됩니다.

src/ public/ .env
ENV VITE_ 없는 값은 브라우저 번들에 들어가지 않습니다.
02 vite build

Vite build 확정

env 치환, minify, tree shaking, dynamic import 분리가 한 번에 일어납니다.

base split hash
PATH base 설정이 호스팅 하위 경로와 맞아야 합니다.
03 dist/

Assets와 chunks

index.html, hashed CSS/JS, 이미지, lazy route chunk가 배포 파일로 고정됩니다.

index.html assets/*.js lazy chunk
404 chunk 파일명이 바뀌면 오래된 HTML이 404를 부를 수 있습니다.
04 preview

Preview server 증거

dev server가 아니라 dist만 열어 network, route refresh, lazy loading을 확인합니다.

4173 Network refresh
PROOF 200 응답, chunk load, console error 없음이 증거입니다.
05 hosting

Production hosting

CDN 또는 정적 호스팅은 dist 기준으로 base path, cache, SPA fallback 규칙을 적용합니다.

CDN rewrite cache
ROUTE 딥링크 새로고침은 index.html fallback이 없으면 404가 됩니다.

환경 변수 고정

.env.production VITE_ 누락 빈 API URL

Asset path

base /assets/ 404

Lazy chunk

import() route chunk load fail

SPA refresh

/settings rewrite direct 404

Build output 증거

dist list
dist/index.html entry
assets/index.[hash].js main
assets/vendor.[hash].js shared
assets/route.[hash].js lazy
assets/logo.[hash].svg asset

Preview evidence

network
npm run preview dist only
/ 200 html
/assets/*.js 200 chunk
/settings refresh fallback
console/network no error