# AWS S3 + CloudFront로 배포 시 정적 파일을 불러오지 못해 흰 화면이 발생하는 문제 해결하기

> Clean Markdown view of GeekNews topic #19155. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=19155](https://news.hada.io/topic?id=19155)
- GeekNews Markdown: [https://news.hada.io/topic/19155.md](https://news.hada.io/topic/19155.md)
- Type: news
- Author: [whatsup](https://news.hada.io/@whatsup)
- Published: 2025-02-10T13:45:52+09:00
- Updated: 2025-02-10T13:45:52+09:00
- Original source: [blog.lemonbase.team](https://blog.lemonbase.team/aws-s3-cloudfront%EB%A1%9C-%EB%B0%B0%ED%8F%AC-%EC%8B%9C-%EC%A0%95%EC%A0%81-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EB%B6%88%EB%9F%AC%EC%98%A4%EC%A7%80-%EB%AA%BB%ED%95%B4-%ED%9D%B0-%ED%99%94%EB%A9%B4%EC%9D%B4-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0-e5ca3eeb45c4)
- Points: 13
- Comments: 1

## Summary

React + Vite 기반의 프론트엔드 서비스에서 배포 후 간헐적으로 발생하는 흰 화면 문제는 정적 파일을 불러오지 못하는 것과 관련이 있으며, 이는 MIME 타입 불일치로 인해 발생했습니다. 이를 해결하기 위해 CloudFront와 S3를 활용하여 정적 파일의 고유성을 유지하고, S3 Lifecycle 설정으로 불필요한 파일을 자동 삭제하며, 환경별로 배포 전략을 차별화했습니다. 결과적으로, CloudFront + S3 방식이 정상적으로 동작하여 안정적인 배포가 가능해졌고, 브라우저 캐싱 전략을 통해 UX에 긍정적인 영향을 미쳤습니다.

## Topic Body

배포 시 정적 파일을 불러오지 못해 흰 화면이 발생하는 문제를 AWS S3 + CloudFront로 해결한 글입니다. AWS S3 + CloudFront로 안정적인 정적 파일 배포를 고민하는 분들에게 도움이 되었으면 좋겠습니다.  
  
**[문제 발생 배경]**  
- React + Vite 기반 Frontend 서비스 운영  
- 배포 후 간헐적 흰 화면 발생 → 정적 파일을 불러오지 못함  
- 콘솔 오류: MIME 타입 불일치 (text/html 반환)  
  
**[문제 분석]**  
- MIME 타입 불일치: 정적 파일이 아닌 HTML 응답 반환  
- Github Actions 취소 → ECS 인스턴스 제거 가설  
- 배포 시점과 정적 파일 서빙 불일치  
- 기존 버전의 index.html이 새로운 정적 파일을 참조하지만 파일이 제거됨  
  
**[해결 방법]**  
- CloudFront + S3 활용 (최종 결정)  
- S3 절대 경로 사용하여 이전 버전 정적 파일 유지  
- Vite 빌드 시 파일명에 commitHash, timestamp 추가 → 고유성 유지  
- S3 Lifecycle 설정으로 불필요한 파일 자동 삭제  
- CloudFront 연동하여 빠르고 안정적인 정적 파일 서빙  
- Local, Dev, Prod 환경 별도 설정  
  
**[검증 결과]**  
- CloudFront + S3 방식 정상 동작 확인  
- 캐싱 전략 적용: 브라우저 캐시(Cache-Control, max-age) 점검  
- 파일 고유성 부여로 캐싱 무효화 필요 없음  
- 이전처럼 정적 파일 누락 문제 없이 안정적인 배포 가능  
  
**[배운 점]**  
- 배포 환경에서 정적 파일 관리가 UX에 큰 영향을 줄 수 있다.  
- 가설 검증 시 빠르고 간단한 접근 방식이 중요  
- S3 + CloudFront를 활용한 배포 환경 최적화 경험  
- 환경별 배포 전략(Local, Dev, Prod) 차별화 필요  
- 브라우저 캐싱 동작(Cache-Control, from disk cache)에 대한 이해 필수

## Comments



### Comment 34378

- Author: cnaa97
- Created: 2025-02-10T16:37:16+09:00
- Points: 3

롤링이니까 당연히 문제지. 배포시간을 짧게 만들거나 배포를 분리해서 트래픽을 한쪽으로 몰아주는 블루그린전략으로 하면 되요.  
  
아니면 리액트 에러캐치해서 리로드를 강제로 시켜도 되구요.