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

S3와 CloudFront로 **SPA(Single Page Application)**를 배포할 때, index.html과 해시가 포함된 asset 파일은 서로 다른 생명주기를 가집니다. 이를 구분하지 않으면 새 배포 후 기존 세션을 유지하던 사용자가 ChunkLoadError를 겪거나, JavaScript 요청에 HTML이 반환되는 문제가 발생할 수 있습니다.

효율적인 배포를 위한 핵심 전략은 다음과 같습니다.

• 캐시 정책 분리: index.html은 항상 최신 상태를 유지하도록 캐시를 최소화하고, 파일명에 해시가 포함된 hashed asset은 브라우저 캐시를 길게 가져가도 안전합니다.
• Fallback 설정 주의: CloudFront의 SPA fallback 설정이 모든 요청을 index.html로 돌리게 되면, 누락된 에셋 요청 시 MIME type mismatch 에러가 발생할 수 있으므로 주의해야 합니다.
• 런타임 대응: 인프라 설정만으로는 이미 실행 중인 구버전 SPA의 에러를 완벽히 막을 수 없으므로, 프론트엔드 단에서 reload-once와 같은 방어 로직을 병행해야 합니다.