S3 + CloudFront 기반 SPA 배포에서 캐시와 fallback 전략 설계하기

Vite 기반 React SPA를 S3와 CloudFront에 배포한 뒤, 새 릴리스에서 구버전 웹뷰가 오래된 runtime으로 lazy chunk를 요청해 ChunkLoadError와 MIME type mismatch가 발생했다.

문제의 핵심은 index.html과 해시된 정적 자산의 캐시 정책을 분리하지 못했고, CloudFront의 커스텀 에러 응답이 missing asset까지 index.html 200 응답으로 바꿔버린 데 있었다.

CloudFront invalidation만으로는 이미 열린 브라우저나 웹뷰 안의 구버전 runtime을 갱신할 수 없어, 배포 직후 깨진 라우트 이동이 계속 발생했다.

SPA 배포에서는 진입 문서와 정적 자산, 라우트 fallback을 각각 다르게 다뤄야 하며, 모든 404/403을 index.html로 돌리는 방식은 피해야 한다.