React 배포 구조

빌드 산출물 생성

index.html, JS/CSS asset, sourcemap, manifest를 한 버전 단위로 만듭니다.

build

빌드 타임 변수와 런타임 config를 구분해 잘못된 API URL이 박히지 않게 합니다.

env

해시가 붙은 asset은 길게 캐시하고 index.html은 짧게 캐시합니다.

cache

직접 URL 접근 시 서버가 index.html을 반환하도록 fallback 규칙을 설정합니다.

routing

배포 후 JS 오류, asset 404, 성능 지표를 보고 이전 산출물로 되돌릴 준비를 둡니다.

ops

새로고침 404

SPA fallback 누락 클라이언트 라우트 경로를 서버가 실제 파일로 찾으려다 실패합니다.

rewrite to index

흰 화면

asset 경로 또는 캐시 불일치 index.html은 새 버전인데 JS 파일이 삭제되었거나 CDN 캐시가 엇갈릴 수 있습니다.

atomic deploy

잘못된 API

환경 변수 주입 오류 빌드 타임에 박힌 URL은 배포 뒤 바꾸기 어려워 환경별 검증이 필요합니다.

runtime config 고려

직접 진입 깊은 URL을 새 탭에서 열어도 앱이 정상 라우팅되어야 합니다.

캐시 헤더 HTML과 해시 asset의 Cache-Control을 다르게 설정합니다.

이전 버전 보존 롤백을 위해 직전 artifact와 asset을 일정 기간 유지합니다.