AWS CloudFront / S3와 CloudFront 연동

CloudFront는 CDN 서비스이다. (일반적인 CDN과 차이가 있긴 하지만)

CDN이 무엇인지 잘 모르겠다면 Tip 게시판에 쓴 Cache에 대한 글을 참고하자.

전송 속도 향상과 비용 절감의 이점이 있으며 전세계를 대상으로 하는 서비스를 준비할 때 사용한다.

 

왜냐? 모든 리전에 EC2, S3를 생성하는 것은 비효율적이고 비용도 많이 든다.

EC2, S3는 동작되는 장소가 리전에 한정적이어서 멀리 떨어진 지역에서 접속할 경우 전송 속도가 느리다.

반면 CloudFront를 이용하여 내용을 에지 로케이션에 캐시한다면 사용자는 이 에지 로케이션에서 파일을 바로 받게 된다.

 

 

유저가 원하는 파일이 캐시에 있으면 곧 바로 받고 없으면 오리진에서 받아온다.

CloudFront의 오리진(origin)은 S3, EC2, ELB, AWS 외의 웹 서버 등이 있다.

 

리전은 거리 차이가 어느 정도 있어도 괜찮지만 에지 로케이션은 가급적 최대한 서비스 타켓 지역과 가까워야 한다.

이는 당연한게 CDN은 고속으로 컨텐츠를 제공하기 위함인데 멀면 의미가 없어진다.

 

보통 캐시는 1시간 정도 유지되며(cache-control : pubilc, max-age: 3600) 만약 즉각적으로 서빙하는 컨텐츠를 업로드하고 싶다면 캐시 서버에게 무효화 요청을 날리면 된다.

 

 

 

실습삼아 S3와 CloudFront를 연동해보자

 

우선 S3에 웹 호스팅 속성을 활성화 한 다음 index.html을 넣고 CloudFront와 연동해보도록하겠다.

 

 

Create Distribution

 

전송 방식에는 Web과 RTMP(동영상 실시간 스트리밍 프로토콜)이 있다.

우리는 Web을 구성하려고 하는 것이니 Web 선택

 

 

설정이 상당히 많은데(첨부한 그림 외에도 옵션이 많다) 하나씩 살펴보자

 

 

Origin Domain Name : 클릭하면 콤보박스로 선택 가능한 origin들의 목록이 제공된다. 현재는 S3에 cloudfront를 사용하려고 하는 것이니 생성한 버켓 명으로 선택.  S3 외에도 EC2, 로드 밸런서 또한 지정 가능하다.

(참고로 커스텀 오리진의 경우 자신이 직접 도메인을 입력해야 한다)

 

Origin ID : S3 버켓을 선택했다면 자동으로 설정되었을 것

 

Restrict Bucket Access : S3 버켓에 CloudFront만 접근할 수 있도록 설정함. 즉, s3 url 주소를 통해 캐시 서버를 거치지 않고 직접 접근하는 것이 불가능해지는 것이다. Yes를 누르자.  S3+CloudFront 조합을 사용할 때 Signed URL을 통해 제한을 걸었을 때 S3에 곧장 접근할 수 있다면 서명 URL을 쓰는 이유가 없다. Yes에 체크함을 다시 한 번 확인해주자!

 

Origin Access Identity : origin에 접근할 식별자. 새로 생성하자

 

Comment : 기본값

 

Grant Read Permissions on Bucket : CloudFront가 S3에서 파일을 읽을 수 있는 권한을 버켓 정책에 설정함. "Yes, Update Bucket Policy"를 선택할 경우 다른 접속은 제한되고 CloudFront만 접근할 수 있도록 버켓 정책이 설정됨

 

Origin Connection Attempts : The number of times that CloudFront attempts to connect to the origin. Valid values are from 1 to 3. The default is 3 attempts. 그냥 그대로 둬도 되겠군요

 

Origin Connection Timeout : The amount of time, in seconds, that CloudFront waits when trying to establish a connection to the origin. Valid values are from 1 to 10 seconds. The default is 10 seconds. 이것도 그대로 둡시다

 

Origin Custom Headers : 말 그대로 커스텀 헤더를 붙일 수 있습니다. 이미 존재하는 헤더라면 overwrite 합니다.

 

 

 

 

Path Pattern : CloudFront로 파일을 가져올 규칙. 배포 후 수정할 수 있음

 

Viewer Protocol Policy : CloudFront로 보여질 프로토콜 정책. HTTP and HTTPS로 선택(기본값)

 

Allowed HTTP Methods : 허용하는 HTTP 메소드 종류. 지금은 GET, HEAD을 선택. 무언가 동적으로 일을 처리하고 싶다면 다른 옵션을 선택하면 된다. 현재는 단순히 GET 방식만 허용하도록 하자.

 

Object Caching : 아무래도 캐시 쓰려고 CloudFront 쓰는 건데 캐싱 설정이 중요하겠죠. 파일의 캐시 유지 시간을 설정합니다.

 

기본값(Use Origin Cache Headers)으로 설정하면 오리진 http 헤더의 캐시 설정을 따릅니다. (오리진에서 설정한 Cache-Control의 값을 그대로 따릅니다.) 만약 오리진에서도 따로 Cache-Control을 설정하지 않았다면 24시간을 캐싱합니다.

 

Customize를 선택하면 다음과 같은 화면이 나옵니다. 최소, 최대, 기본 TTL을 적용하시면 됩니다. 단위는 '초'입니다. 만약 오리진에서 Cache-Control이 이미 설정된 경우 더 긴 시간이 적용된다.

 

 

Forward Cookies : 오리진의 쿠키를 CloudFront를 거쳐 사용자에게 전달할지. None을 선택하면 쿠키를 전달하지 않고 캐시 성능이 좀 더 향상된다. Whitelist를 선택할 경우 선별해서 쿠키를 전달할 수 있다. All을 선택하면 쿠키를 그냥 전부 전달합니다.

 

Query String Forwarding and Caching : CloudFront에서 오리진으로 쿼리 문자열을 전달. 오리진에서 쿼리 문자열에 따라 파일을 구분해서 보여주고 싶을 때 설정

 

Smooth Streaming : 실시간 스트리밍 프로토콜인 Microsoft smooth streaming을 사용하고 싶을 때 설정함. 여기서는 실시간 스트리밍이 아니므로 패스.

 

Restrict Viewer Access: Signed URL로 CloudFront 사용을 제한하고 싶을 때 사용

 

Compress Objects Automatically : 자동으로 gzip을 통해 오리진의 컨텐츠를 압축합니다. 예전에 S3에서 객체별로 일일히 메타데이터를 설정하시기 귀찮으셨죠? cloudfront를 쓰시면 gzip을 한 번에 적용할 수 있습니다.

 

 

 

Price Class : 요금 수준이라고 쓰고 어디 까지 엣지 로케이션을 사용할 것인지를 말합니다. 실제 서비스에서 그다지 필요 없는 지역을 제외할 때 설정함. 세부 설정은 불가능하고 US와 유럽 / US, 유럽, 아시아 / 모든 location 이 세 선택지만 존재함. 모든 location을 선택할 시 다른 두 선택지보다 요금이 많이 나옴.

 

 

Alternate Domain Names(CNAMEs) : route 53에서 도메인을 연결하려면 이 부분을 설정하면 된다. 여러 도메인을 넣을 수도 있으며 만약 외부에서 도메인을 구입했다면 그 도메인을 사용하면 된다. 현재는 없으니 비워두자.

기본값은 http://asdfasdf.cloudfront.net/ 와 같이 그냥 랜덤한 이름의 주소가 생성됩니다. 깔끔한 주소를 원한다면 도메인을 등록하면 됩니다. 

 

https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/CNAMEs.html

 

공식 문서를 가져와서 좀 더 확실하게 확인해보았습니다.

CloudFront에서 CNAME이라고 하는 대체 도메인 이름을 사용하면 파일 URL에 CloudFront에서 배포에 배정하는 도메인 이름 대신에 고유의 도메인 이름(예: www.example.com)이 사용됩니다. 웹 및 RTMP 배포 모두에서 대체 도메인 이름이 지원됩니다.

배포를 생성하는 경우 CloudFront는 배포용 도메인 이름을 반환합니다. 예를 들면 다음과 같습니다.
d111111abcdef8.cloudfront.net

파일에 CloudFront 도메인 이름을 사용하는 경우 /images/image.jpg라는 파일 URL은 다음과 같습니다.
https://d111111abcdef8.cloudfront.net/images/image.jpg

cloudfront.net 도메인 이름 대신에 www.example.com 같은 고유 도메인 이름을 사용하려는 경우, 대체 도메인 이름(예: www.example.com)을 배포에 추가할 수 있습니다. 그런 다음 다음 URL을 사용하여 /images/image.jpg를 볼 수 있습니다.

https://www.example.com/images/image.jpg

 

 

 

SSL Certificate : https 프로토콜을 사용하기 위한 SSL 인증서 설정. Certificate Manager를 통해서 인증서를 연결힐 수 있다.

 

 

Supported HTTP Versions : 이건 뭐 당연히 버전이 높은 것을 선택하면 된다

 

Default Root Object : 최상위(root)로 접속했을 때 기본적으로 보여줄 파일 이름. (optional) 

만약 S3를 이용해 웹 호스팅을 하고 있다면 속성에서 지정한 인덱스 문서에 지정한 파일 이름(대개 index.html)을 입력해주면 됩니다.

 

Logging, Bucket for Logs, Log Prefix : CloudFront 접속 로그를 기록한 것인가. 기록한다면 로그 기록을 저장할 S3와 디렉토리명을 설정하는 란.

 

Comment : 그냥 메모.

 

Distribution State : 배포 후 배포 상태 설정. Enabled를 선택하면 곧바로 사용가능하며 Disabled는 배포만 생성하고 비활성화 상태가 됨. Enabled를 선택하자

 

 

설정이 끝났다면 Create Distribution을 통해 CloudFront를 배포해보자.

 

status를 보면 In Progress, 즉, 배포가 진행중이다. 모든 에지 로케이션에 전파되기 까지 대략 20분 정도 걸린다고 한다.

전파가 완료되면 Status가 Deployed로 바뀐다.

 

 

배포 도메인은 Domain Name에 나와있으니 그 쪽으로 접근하면 S3에 저장한 index.html이 화면에 뜰 것이다.

만약 Default Root Object를 따로 설정하지 않았으면 다음과 같이 그냥 S3 버킷 전체 내역을 보여준다.

 

 

 

 

의도한 대로 캐시가 잘 이루어졌는지 확인해뵈 위해서

CloudFront로 직접 접근하여 reponse header를 찾아보면 X-Cache 부분에서 문구를 확인할 수 있습니다.

Hit from cloudfront(캐시에서 가져옴), Miss from cloudfront(캐쉬 실패 혹은 유지 시간이 되어서 오리진에서 가져옴)

 

음... 그런데 저는 반복적으로 접속해봐도 Miss from cloudfront가 뜨네요.

Object Caching부분을 커스텀으로 직접 설정해보니 제대로 작동했습니다.