S3 + CloudFront 연동시 이미지 나오지 않는 문제 해결
문제 상황
S3 Public으로 열어두고 특정 도메인에서만 접근이 가능하게 설정을 해두다가, CloudFront를 붙여 CloudFront에 캐시된 이미지만 불러오게 하려고 했습니다. 그래서 DB에 저장되어 있는 이미지 URL을 S3주소에서 CloudFront 주소로 수정해줬습니다. 그랬더니 이미지가 어떤 거는 보이고 어떤 거는 안보이는 문제가 발생했습니다.
문제 원인
브라우저 콘솔 상에 오류 내용을 확인해보니 CORS 에러가 나오고 있었습니다. 분명 S3에 CORS 설정을 해두었는데 왜 안되지? 싶었습니다.
해결 과정
그래서 S3 - 권한 - CORS 설정에 들어가보니 잘 구축되어 있었습니다. 그래서 CloudFront도 CORS 설정을 해두어야 이미지가 잘 나오겠다 싶어서 CloudFront에도 CORS 설정을 해주었습니다.
CloudFront에 CORS를 설정하는 방법은
CloudFront 배포 - 동작 탭 - 기본값(*) 선택 후 편집 - 응답 헤더 정책
에서 CORS 설정을 해주면 됩니다.
저는 정책을 따로 생성해서 하였는데요,
CORS 구성을 활성화 하면 나오는 기본 설정으로 설정하였습니다.
이후 저장하고 브라우저에서 이미지가 잘 나오는지 확인해봤습니다.
그런데 잘 나오지 않았습니다. 분명 CORS 설정을 해두었는데 왜 아직도 CORS 에러가 나오는 건지 이해할 수 없었습니다.
그래서 CloudFront 캐시 무효화를 하면 S3에 저장되어 있는 이미지를 불러와서 화면에 나타날 거 같아 해보았지만 몇개는 되는 듯 보였지만 여전히 잘 안보였습니다.
CloudFront 캐시 무효화는
배포 - 무효화 탭 - 무효화 생성 버튼 - /* 경로 입력하고 무효화 하였습니다.
그러던 중 팀원분이 브라우저 캐시를 초기화하면 된다고 말해주었습니다.
브라우저 캐시를 초기화 하는 방법은 크롬 기준으로
개발자 도구 - 네트워크 탭 - 캐시 사용 중지 체크 표시
하고 네트워크 탭에서 새로고침을 한다면 캐시가 삭제되어 이미지가 잘 보였습니다.
S3에 저장한 이미지 URL이 브라우저 캐시 상에 남아있어서 이미지를 불러오지 못했던 것이였습니다.
결론
- S3, CloudFront CORS 설정
- 브라우저 캐시 초기화
를 통해 이미지가 CORS 오류 때문에 로드되지 않는 문제를 해결하였습니다.