CloudFront 관련및 S3연동

  • 블로그를 만들기전 따로 정리한 내용을 올려봅니다 (참고 부탁드립니다.)
  • 해당 부분들에 대하여선 다음에 좀 더 자세히 혹은 다른 관점으로 포스팅할 수 도 있습니다.
  • S3연동, 연동 후 특징, 파일 무효화, 요금, 캐시 정책, 지리적 제한에 대한 내용 입니다.

CloudFront + s3 연동

  • 사전단계

먼저 s3 접속 → 이 계정의 퍼블릭 액세스 차단 설정을 아래와 같이 전부 차단해줍니다.

설정을 해주는 이유는 버킷으로 직접 접속이 아니라 버킷은 외부의 접근을 막고 CloudFront 를 통해서만 접근을 시키기 위해서 입니다.

CloudFront 배포 생성 및 설정

  • s3에 업로드한 정적 파일들을 CDN을 통하여 배포를 하기 위해서 설정을 아래와 같이 해줍니다.
  1. CloudFront 배포를 생성을 누릅니다.

2. 원본 도메인을 선택 합니다. (s3가 있는 경우 기본적으로 출력 됩니다.)

3. CloudFront 에 대한 엑스만을 원하므로 OAI를 설정 해줍니다 없는 경우 생성을 해주면 되며, 버킷 정책은 “예” 로 선택을 해주시면 됩니다.

4.Origin Shield를 활성화 및 원하는 리전을 선택 하여 줍니다

CloudFront Origin Shield 공식문서: https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/origin-shield.html

기능 으로서는 CloudFront에서 캐싱 계층을 하나 더 추가하여 사용자(클라이언트)와 엣지 서버간의 거리를 줄이는 기능이다. 캐시 적중률을 높이고 오리진 서버의 부하를 줄여주어 로드 속도를 향상시키는 효과가 있습니다. (각 리전별로 캐싱을 합니다)

단점으로는 Origin Shield를 활성화하면 요청이 Origin Shield를 경유할 때마다 비용이 추가로 발생됩니다. (프리티어는 무료입니다.)

5. 자동으로 객체 압축을 Yes로 설정합니다. 요청할 리소스의 파일 크기를 비약적으로 줄여줄 수 있다.

6. 뷰어 프로토콜은 정책은 HTTP and HTTPS 선택 하여 줍니다.

7.허용된 HTTP 방법은 GET, HEAD로 설정하여 줍니다.

8.뷰어 액세스 제한은 No로 해줍니다.

9.캐시 키 및 원본 요청은 CachingOptimized를 선택합니다. 대부분의 상황에서 적절한 캐시 정책을 바로 적용할 수 있습니다. (캐시 효율성을 최적화하도록 설계되었습니다.)

10.가격 분류는 보통 모든 엣지 로케이션에서 사용(최고의 성능)을 사용하면 됩니다.

11.대체 도메인을 설정하려면 대체 도메인 이름(CNAME)을 입력합니다. 구입한 도메인을 적용하고 싶다면 이 항목에 원하는 도메인 이름을 입력하면 됩니다. (말 그대로 CloudFront의 도메인이 아닌 다른 도메인을 사용하고자 할 경우 작성 합니다.)

12.커스텀 도메인을 설정했다면 SSL 인증서를 요청해서 HTTPS로 올바르게 접속될 수 있게 설정해야 합니다. [인증서 요청] 링크를 눌러 안내에 따라 도메인에 맞는 인증서를 생성하고 선택합니다.

→ 뷰어 프로토콜 정책에서 HTTPS를 사용하도록 지정하였다면 SSL 인증서를 넣어주어야 합니다.

인증서 생성을 하였다면 아래와 같이 나옵니다.

그 다음 레코드 생성을 눌러 주고 Route 53 에서 아래와 같이 레코드를 만들어 줍니다.

13.기본값 루드 객체에 인텍스 페이지의 파일명을 입력 합니다.

14.기타 설정은 냅두며 한번더 검토하고 문제없으면 [배포 생성]을 클릭 합니다.

사용자 정의 오류 응답 생성

  • S3에서는 찾는 파일이 없을 때 403을 응답하기 때문에, HTTP 오류 코드를 403으로 설정해줍니다.

워드프레스 설정

  1. 먼저 설정 -> 오프로드 미디어 라이트 들어갑니다.

2. 페이지의 전송(Delivery) 섹션에서 Amazon S3 레이블 옆의 변경(Change)을 선택합니다.

3. 미디어 전송 방법을 CDN으로 변경 합니다.

4.그다음 맞춤 도메인 및 강제 HTTPS를 설정 및 서버에서 파일 제거도 설정합니다.

결과확인

워드프레스를 통하여 이미지를 업로드를 합니다

그리고 F12를 통하여 계발자 모드로 들어간 후 해당 이미지의 주소를 봅니다.

그럼 아래 이미지와 같이 내가 설정한 cdn의 도메인이 나오는 것을 알수가 있습니다.

참고URL: https://lightsail.aws.amazon.com/ls/docs/ko_kr/articles/amazon-lightsail-using-distributions-with-buckets

연동 후 특징

연동 완료 후 특징이라고 하면 처음에 워드프레스의 로그를 보면 아래처럼 나옵니다.

만약 해당 URL을 계속 새로고침을 하면 계속해서 로그가 줄력되어야 하지만 이미지는 CDN을 통하여 이미 캐싱이 되어있으므로

새로고침을 해보았자 로그는 출력 되지 않으며, 계발자 모드로 보았을때 아래처럼 max-age 즉 최대 캐시를 얼마동안 가지고 있을지 나오고 있습니다.

위의 초를 환산을 하면 365일이 나옵니다.

혹은 CloudeFront의 캐시 정잭에서도 아래와 같이 확인이 가능 합니다.

파일 무효화

  • 무효화는 작업이 일정 이상 수준으로 넘어가면 비용이 발생합니다.

aws 공식 문서: https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html

무효화 생성

무효화를 클릭하여 줍니다.

클릭 후 idnex.php를 적은 후 생성 하여 줍니다.

여기서 해당 파일을 명확하게 지목을 하거나, image 라고 시작하는 파일들을 지목 하거나 하위 경로를 전체 지정하면 됩니다.

아래와 같이 무효화 확인 가능 합니다.

캐시정책 설정

CloudFront→배포 -> 해당 ID 클릭 후 동작으로 넘어가서 편집 클릭 후 아래로 내려가면 정책 생성이 있습니다.

클릭 후에 TTL 설정 부분에서 설정이 가능합니다. (기본 TTL은 24시간 입니다.)

혹은 Legacy cache settings 에서도 정책 설정이 가능합니다.

요금

아래 그림은 CloudFront의 구동 방식 입니다.

  • 2번 같은 경우는 데이터를 인터넷으로 전송을 하는 부분입니다.

aws 요금에서 보면 온디맨드 요금이라는 부분이 있는대 이부분이 해당 됩니다.

3번은 리전데이터를 오리진으로 전송하는 부분입니다.

추가적으로 HTTP 요금은 각 각의 클라이언트 들이 각각의 엣지 로케이션에 요청을 한 수 입니다.

그럼 위에서 설명한 부분들을 설정하는 곳은 CloudFront에서 배포 부분의 설정을 보시면 됩니다.

아래 이미지를 보면 한국이 미국 보다 훨씬 비싸다는 것을 알수가 있습니다. 그래서 해당 금액 에따른 설정을 해주시면 됩니다.

관련URL:

Amazon CloudFront CDN – 요금제 및 요금 – 무료 체험

Amazon Web Services Simple Monthly Calculator

지리적 제한

  • 상단에 WAF 있는경우 WAF에서 막을수 있지만 클라우드프론트에서도 가능합니다.

아래와 같은 설정을 통하여 허용 목록 혹은 차단 목록을 설정 가능 합니다.

결과

위로 스크롤