[AWS] S3에 CloudFront 적용하기
이 글은 공부를 하면서 알게 된 내용들을 기록하는 글 입니다. 오류나 고쳐야 할 사항들이 있다면 지적 부탁드립니다!
✅ CloudFront
AWS CloudFront는 AWS에서 제공하는 CDN 서비스로서, 정적 및 동적 컨텐츠를 사용자에게 더 빨리 배포할 수 있도록 지원하는 서비스입니다.
CloudFront는 edge location라는 전 세계의 네트워크를 통해 컨텐츠를 제공합니다.
AWS 백본 네트워크를 통해 Edge location을 이용하여 컨텐츠를 효과적으로 서비스합니다.
✅ AWS S3에 CloudFront 적용하기
AWS CloudFront를 적용하기 이전에, 당연하지만 S3에 CloudFront를 적용하고자하는 S3가 존재해야 합니다.
🔥 CloudFront 배포 생성
우선 AWS CloudFront로 들어간 후, 오른쪽 상단이 `배포` 버튼을 눌러 배포를 생성하도록 합시다.
1) Origin domain
CloudFront(CDN)을 적용하고자 하는 원본을 선택합니다. Origin domain 밑의 버튼을 누르면 S3, ELB, API gateway등 CloudFront를 적용할 수 있는 목록들이 나옵니다.
우리는 S3 bucket을 적용하고 싶으므로, S3 내역 하위에 있는 버킷 내역들 중 원하는 버킷을 선택합니다.
버킷을 선택하면 이름이 자동으로 지정됩니다.
2) 원본 엑세스
이 항목은 CDN과 연결하는 원본:Origin(지금의 경우 S3 버킷 내의 객체)에 어떤 방식으로 접근이 가능하게 할 것인지 설정하는 부분입니다.
`공개`로 설정하면 S3 버킷 객체에 대한 접근이 가능하며, `원본 엑세스 제어 설정` 또는 `Legacy access identities`는 S3 버킷 접근에 대한 정책을 설정하여 무분별한 접근을 차단할 수 있습니다.
🧐 OAC(원본 엑세스 제어 설정)과 OAI(Legacy access identities)은 무슨 차이점이 있을까요?
OAC는 OAI의 확장 버전으로서, 보안 강화 및 여러가지 옵션을 제공합니다. AWS에서는 OAC(원본 엑세스 제어 설정)을 사용하는 것을 권장하고 있습니다.
AWS에서는 `원본 엑세스 제어 설정`을 사용하는 것을 권장하므로, 이를 사용합시다. 위과 같이 OAC를 생성해줍시다.
그 아래의 항목들도 위와 같이 설정해주도록 합시다.
SSL 인증서의 경우 필수는 아니지만, 대체 도메인을 사용하고자 한다면 SSL 인증서를 설정해주어야 합니다.
🔥 AWS S3 퍼블릭 엑세스 차단 설정 변경
CloudFront 배포를 생성했다면 상단에 `S3 버킷 정책을 업데이트해야 합니다.`라는 배너와 함께 `정책 복사` 버튼이 나옵니다.
버튼을 눌러 정책을 복사한 후, CloudFront에 Origin(원본)으로 설정한 S3의 버킷으로 이동합시다.
버킷의 `권한`탭으로 이동 후, `퍼블릭 엑세스 차단` 설정을 해줘야 합니다.
CloudFront 배포를 생성하면서 `원본 엑세스 제어 설정(OAC)`을 했기 때문에, S3 버킷에서 `퍼블릭 엑세스 차단`을 설정해줘야 합니다.
`모든 퍼블릭 엑세스 차단`을 선택하여 외부에서 S3에 맘대로 접근을 하지 못하도록 합니다.
⚠️ 만일 POST, PATCH와 같이 버킷 객체에 대한 변경(조회 외의 동작)이 제대로 동작하지 않는다면,
새 ACL(엑세스 제어 목록)을 통해 부여된 버킷 및 객체에 대한 퍼블릭 엑세스 차단을 해제해보시길 바랍니다!
🔥 AWS S3 정책 변경하기
S3 버킷의 `보안 탭` - `버킷 정책` 편집 버튼을 누릅니다.
(저의 경우에는 S3 버킷을 서비스에 적용하면서 버킷 정책을 이미 설정해 `버킷 정책` 항목에 이미 작성되어 있지만, 만일 S3 버킷을 생성하고 바로 적용을 하는 경우시라면 버킷 정책 항목이 공란일겁니다!)
만일 기존에 설정해둔 버킷 정책이 존재하지 않는다면, 위에서 복사한 정책 내용을 그대로 복사하고 저장합니다.
만일 기존에 설정해둔 버킷 정책이 존재한다면 복사한 정책 내용에서 `Statement` 내의 중괄호 부분(`{ }`)만 복사한 후,
기존의 버킷 정책의 `Statement`의 중괄호 뒤에 쉼표(`,`)을 붙이고, 복사한 내용을 붙여넣기 하면 됩니다.
🔥 CloudFront 동작 확인
그렇다면 CloudFront가 제대로 동작하는지 확인해볼까요?
CloudFront의 배포의 `일반` 탭에서 배포 도메인 이름 왼쪽의 복사 아이콘을 눌러 도메인을 복사합니다.
그리고 CloudFront에 연결한 S3 버킷 내에 있는 객체 중 테스트하고자하는 객체의 정보를 조회합니다.
이 정보들에서 `키`에 해당하는 내용을 복사한 후, CloudFront 도메인의 뒤에 붙여넣습니다.
https://{CloudFront 도메인 명}.cloudfront.net/profile/337fb132-be09-4149-a229-ba04d0844005.jpg
위와 같은 URL을 만들 수 있는데, 브라우저 탭을 생성한 후 F12를 통해 네트워크 탭을 띄우고 해당 URL을 넣은 후 접속해봅시다!
위와 같이 응답 헤더의 `X-Cache` 항목을 확인해보면 `Miss from cloudfront`를 확인할 수 있고,
타이밍 탭에서는 응답까지 57.51밀리초가 소요된 것을 확인해볼 수 있습니다.
여기에서 새로고침을 통해 이미지를 다시 요청하면 어떻게 될까요?
CloudFront를 통해 캐싱된 이미지가 응답으로 전송될 것입니다.
마찬가지로 응답 헤더의 `X-Cache`를 항목을 보면 `Hit from cloudfront`를 확인할 수 있고, 이는 cache hit이 되어 캐싱된 이미지가 전달된 것을 이야기합니다.
`타이밍` 탭에서 응답까지 얼마나 걸렸는지 확인해볼까요?
15.05밀리초로 기존에 비해 응답 속도가 73.83% 가량 감소한 것을 확인할 수 있습니다!
✅ 참고 자료 & 링크
- Spring Boot, React, AWS S3, AWS CloudFront를 활용한 파일 업로드/다운로드 기능 구현하기
- AWS-S3-CloudFront를-이용한-CDN-구축하기