CloudFront (CDN)을 통해 Amazon S3에서 정적 콘텐츠를 직접 제공하는 경우, 사용자에게 전달되는 폰트, 이미지, 기타 정적 콘텐츠에 관한 오류가 발생할 수 있다. 사실 복잡하지 않다. 이 문제는 Amazon S3 Bucket의 CORS 설정에서 해결할 수 있다.

Amazon S3 CORS란 무엇인가?

Cross Origin Resource Sharing(일명 CORS). CORS 명세는 기본 콘텐츠를 제공한 도메인이 아닌 다른 도메인으로 요청을 보내는 웹 애플리케이션을 구축할 수 있는 기능을 제공한다.

1단계: AWS Web Console에서 버킷 권한 설정 열기

https://s3.console.aws.amazon.com 페이지에 방문하여 자격 증명으로 S3 콘솔에 로그인한 후, CloudFront에 연결된 버킷을 선택한다.

2단계: CORS 설정 적용

Permissions 탭에서 "CORS configuration" 섹션을 볼 수 있다. 이 섹션을 선택하고 아래 코드를 적용한다:

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>https://YOURWEBSITEADDRESS.com</AllowedOrigin>
   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

붙여넣기 후, <AllowedOrigin></AllowedOrigin>을 자신의 웹사이트 주소로 변경하고 "Save" 버튼을 클릭한다.

결론

이제 CORS 설정이 성공적으로 완료되었으며, 사용자는 Amazon S3 버킷에 위치한 콘텐츠를 볼 수 있다.