[Svelte 앱 S3, CloudFront에 배포하기] 3. CloudFront 연결하기

 

[Svelte 앱 S3, CloudFront에 배포하기] 2. S3 버킷에 배포하기

 

이번엔 지난번에 생성한 S3버킷과 CloudFront를 연결해보겠습니다.

 

그 전에 CloudFront는 무엇이냐

- AWS에서 제공하는 CDN(Content Delivery Network) 서비스입니다.

- 전세계 AWS 리전의 엣지 로케이션에 컨텐츠를 캐싱해놓고, 사용자들은 가까운 엣지 로케이션에서 리소스를 빠르게 받아볼 수 있게 해줍니다.

 

CloudFront를 사용하는 이점은 다음과 같습니다.

- CDN을 이용해 사용자들에게 리소스를 빠르게 응답할 수 있다.

- S3에 직접 접근해서 리소스를 받아보는 것보다 요금이 싸다.

- S3에 부하가 몰리지 않고 각 엣지 로케이션에서 응답을 줌으로써 부하가 분산된다.

- 커스텀 도메인을 사용할 수 있다.

- HTTPS를 사용할 수 있다.

 

 

간략하게 알아봤으니 이제 CloudFront를 연결해보겠습니다.

 

 

AWS 서비스 검색창에서 Cloudfront를 검색합니다. <Create a CloudFront distribution>을 클릭하겠습니다.

 

 

 

Origin domain의 검색창을 포커싱하면 저번에 만들어둔 S3 버킷이 검색됩니다. 선택해줍시다.

 

 

 

그리고 스크롤을 내려 Redirect HTTP to HTTPS를 선택해주고 저장합니다.

 

 

 

 

 

이제 마지막으로 CloudFront의 General 탭에서 Settings의 Edit 버튼을 누르고 Default root object에 index.html을 입력하고 저장해줍니다.

 

 

 

 

그리고 Distribution domain name에 적힌 도메인을 브라우저에 입력하면 화면을 확인할 수 있습니다.

 

 

 

그런데 한 가지 문제가 있습니다. 우리가 웹사이트를 수정해서 S3버킷에 새로 업데이트하더라도 엣지 서버에 캐싱된 데이터가 있어 수정 내역이 즉각 반영되지 않습니다. 그래서 엣지 서버에 있는 기존의 데이터를 삭제하고 새로운 데이터를 응답해주는 작업이 필요합니다.

 

이를 위해 다시 IAM의 사용자 목록으로 돌아갑니다.

우리의 IAM 계정에 권한을 추가해줄겁니다.

 

권한을 부여할 사용자를 선택하고

 

 

권한을 추가합니다.

 

 

<기존정책 직접 연결>을 누르고 CloudFrontFullAccess 권한을 검색하여 체크합니다.

이어서 권한을 추가해줍니다.

 

 

이제 AWS CLI로 기존 리소스를 무효화하고 새로운 리소스를 받아오도록 명령을 날릴 수 있습니다.

aws cloudfront create-invalidation --profile=내IAM계정 --distribution-id 내클라우드프론트배포아이디 --paths /*