S3와 CloudFront를 사용하여 Single Page Application(SPA)을 배포할 때 발생할 수 있는 ChunkLoadError 문제를 해결하는 방법에 대해 설명하고 있습니다. 새 버전이 배포된 후, 이미 접속 중인 사용자의 브라우저에서 구버전의 JavaScript 파일을 요청하면서 발생하는 에러를 방지하기 위해 다음과 같은 전략을 제안합니다. 첫째, index.html은 항상 최신 상태를 유지하도록 캐시 정책을 짧게 가져가고, 해시가 포함된 asset 파일들은 immutable 설정을 통해 길게 캐싱합니다. 둘째, CloudFront의 Custom Error Response 대신 CloudFront Function을 사용하여 확장자가 없는 route 요청만 index.html로 rewrite하는 방식을 권장합니다. 셋째, CloudFront Invalidation 시에는 모든 파일을 지우는 대신 index.html과 루트(/) 경로만 지정하여 불필요한 캐시 삭제를 방지합니다. 넷째, 프론트엔드 런타임에서는 chunk load error를 감지했을 때 한 번만 페이지를 새로고침(reload-once)하거나 사용자에게 업데이트 안내를 제공하는 방어 로직을 구현합니다. 이 글은 특정 프레임워크에 국한되지 않는 SPA 배포의 표준적인 설계 원칙을 제시하고 있습니다.