[AWS] AWS S3 CloudFront(CDN)-S3 정적 웹 호스팅 하기

AWS S3 CloudFront(CDN)-S3 서비스를 사용하여 리액트 프로젝트 정적 웹 호스팅

---

관련 포스팅

1. AWS S3 리액트 정적 웹 호스팅 하기

2. AWS S3 CloudFront(CDN)-S3 정적 웹 호스팅 하기

3. AWS AWS S3 퍼블릭 액세스 차단 , CloudFront OAC로 S3 버킷 접근 설정하기

4. [Git Actions] React 프로젝트 AWS S3 CloudFront 자동배포 하기

---

 

저번 포스팅에서는 S3에 리액트를 정적 웹 호스팅하였습니다.

 

이번에는 이전에 배포한 S3를 오리진으로하여 CloudFront 서비스를 사용하겠습니다.

 

S3와 CloudFront를 함께 사용하는 이유에 대해 간단하게 알아보겠습니다.

 

 

개선된 로딩 속도 및 성능

• cloudFront는 전 세계 엣지 로케이션를 통해 자주 요청되는 콘텐츠를 캐싱하여 콘텐츠를 빠르게 전달합니다.
• S3 버킷으로의 요청 수를 감소시켜 전체적인 성능을 향상시킵니다

높은 확장성 및 가용성

• S3는 저장 공간에 대한 걱정 없이 콘텐츠를 안전하게 저장하고 CloudFront는 글로벌 스케일에서 콘텐츠를 효과적으로 제공합니다

비용 절감

• S3에서 직접 콘텐츠를 제공하는 것보다 CloudFront를 통해 콘텐츠를 제공하면 데이터 전송 비용을 줄일 수 있습니다
• 캐싱을 통해 S3의 요청 수를 줄여 추가 비용 절감 효과를 냅니다.

보안 강화

• CloudFront는 SSL/TLS를 통해 데이터 전송 시 암호화를 제공하여 보안을 강화합니다.
• AWS의 보안 기능과 통합되어(WAF,Shield) 웹 공격, DDoS 공격과 같은 보안 위협으로부터 보호할 수 있습니다.

 

---

 

CDN(Content Delivery Network)

 

전 세계에 분포된 서버 네트워크를 통해 웹 콘텐츠(예: HTML 페이지, 이미지, 비디오)를 사용자에게 빠르게 전달하는 시스템입니다.

CDN의 주요 목적은 웹 콘텐츠의 로딩 속도를 향상시키고, 원본 서버에 대한 트래픽 부하를 줄이는 것입니다.

https://www.hostinger.ph/tutorials/what-is-cdn

 

https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/getting-started-secure-static-website-cloudformation-template.html

 

Cloud Front

Amazon CloudFront는 .html, .css, .js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 더 빨리 배포하도록 지원하는 웹 서비스입니다.

CloudFront는 엣지 로케이션이라고 하는 데이터 센터의 전 세계 네트워크를 통해 콘텐츠를 제공합니다.

CloudFront를 통해 서비스하는 콘텐츠를 사용자가 요청하면 지연 시간이 가장 낮은 엣지 로케이션으로 요청이 라우팅되므로 가능한 최고의 성능으로 콘텐츠가 제공됩니다.

 

 

---

Cloud Front 생성하기

 

 

Cloud Front 설정하기

기존에 생성한 S3를 원본 도메인으로 설정 해줍니다.

 

원본 도메인

S3 웹사이트 엔드포인트, S3 엔드포인트 사용 CloudFront에 캐싱할려는 버킷 원본 도메인을 설정해줍니다.

오리진 프로토콜 정책

오리진에 연결할 때 CloudFront에서 사용할 프로토콜(HTTP 또는 HTTPS)을 결정합니다. 

 

HTTP만(HTTP Only)

CloudFront에서 HTTP만 사용하여 오리진에 액세스합니다.

S3 웹사이트 엔드포인트, S3 REST API 엔드포인트 차이

- S3 웹사이트 엔드포인트 사용
S3의 웹호스팅 기능을 활성화 했을 때 나오는 웹사이트 엔드포인트로 접속 가능하고
CloudFront 배포를 생성할 때 생기는 엔드포인트로도 접속 가능합니다.

즉, 웹사이트 접속을 2가지 주소로 할 수 있습니다.

- S3 REST API 엔드포인트 사용
REST API 엔드포인트를 Origin으로 입력하면,
OAI(Origin Access Identity)를 이용해서 S3에 접근할 수 있는 권한을 CloudFront에만 부여할 수 있습니다.

이렇게 되면, 웹사이트 접속을 위해서는 CloudFront 배포를 생성할 때 생기는 엔드포인트로만 웹사이트에 접속 가능합니다.
물론 REST API 엔드포인트를 사용할 때는 S3 버킷의 웹호스팅 기능을 활성화 하지 않기 때문에
접속 방법이 CloudFront 엔드포인트 밖에 없긴 합니다.

웹서버인지 아닌지의 차이

- S3 웹사이트 엔드포인트 사용
S3 웹호스팅 기능을 사용한다는 것은 웹서버를 가동한다는 것입니다.
웹서버의 특징 중 하나는 브라우저의 주소창에 입력한 주소가 html 확장자로 끝나지 않는다면 자동으로 해당 경로 하위의 index.html 파일을 반환한다는 것입니다.
그래서 CloudFront 배포로 생성된 엔드포인트를 사용하더라도 Origin이 웹서버이기 때문에 동일한 행동을 보여줍니다.
예를 들어서, https://abc.com/about 을 브라우저 주소창에 입력한다면 자동으로 웹서버의 about 폴더 하위의 index.html 파일 내용을 보여주는 것입니다.

- S3 REST API 엔드포인트 사용
S3 REST API 엔드포인트를 CloudFront Origin으로 설정한 경우에는 CloudFront가 Origin(S3)로 객체를 요청하는게 웹서버로 요청하는게 아니라 정말 객체 저장소에 객체를 요청하는 것입니다.
그래서 Host 뒷 부분의 경로(= 객체 Key)와 매칭되는 실제 객체가 없으면 에러를 반환합니다.
특히, CSR 프로젝트를 S3에 올려서 사용할 때는 거의 모든 경로에 대해서 실제 객체가 존재하지 않을 것이라서 항상 에러가 발생하는데요.
객체가 존재하지 않아서 발생하는 에러를 방지하기 위해서 CloudFront 설정에서 403, 404 에러 발생시 /index.html 을 반환하도록 해야합니다.

 

 

참고링크 : https://blog.walkinpcm.com/18

 

 

원본 액세스

Origin Shield 설정

 

 

https://intuitive.cloud/blog/aws-cloudfront-delivering-content-at-the-speed-of-light

Origin shield란

CloudFront 캐싱 인프라에 계층을 하나 더 추가하여 오리진의 로드를 최소화하고 가용성을 높여줍니다.

• 캐시 적중률 향상 - 모든 CloudFront의 캐싱 계층에서 오리진에 이르는 모든 요청이 Origin Shield를 통과하여 캐시 적중 가능성을 높입니다.
• 오리진 로드 감소 - Origin Shield는 동일한 객체에 대한 콘텐츠 요청을 통합하여 동시 요청 수를 줄입니다.
• 네트워크 성능 향상 - 오리진에 대한 대기 시간이 가장 짧은 AWS 리전에서 Origin Shield를 활성화하면 향상된 네트워크 성능을 얻을 수 있습니다.

Origin Shield 비활성화

활성화 하는게 기능적 측면에서 좋지만 과금 문제가 발생할 수 있어 비활성화 하겠습니다.

 

WAF 설정

 

보안 보호 활성화를 합니다.

 

월별 요청 10000건에 대해서 월 8달러의 비용부터 점점 증가되는 방식입니다.

*과금하기 싫으신 분들은 비활성화 꼭 하세요

 

 

기본 캐시 동작

 

 

 

캐시 키 및 원본 요청

캐시 정책

• 캐싱 방법 및 압축

TTL 및 캐시 정책

• 원본 요청 정책 : Origin에으로 어떤 내용을 보낼지
• 응답 헤더 정책 : CloudFront가 응답과 함께 실어 보낼 HTTP Header

 

이외 설정

* 기본값 루트 객체

index.html을 추가합니다. (사진에 미표시)

 

 

 

Cloud Front 생성 완료

CloudFront가 생성이 완료되었습니다.

 

 

 

배포 도메인 이름으로 접속해 보겠습니다~~

 

 

 

CloudFront 도메인으로 접속이 잘 되네요~~

 

 

 

 

현재 CloudFront와 S3 버킷 두 엔드포인트로 접근이 가능합니다.

다음 포스팅에서는 S3 버킷 접근을 제한하고 OAC를 통해 CloudFront만 S3 버킷에 접근하도록 하는 보안 설정을 진행하겠습니다.

 

 

다음포스팅 :  AWS S3 퍼블릭 액세스 차단 , CloudFront OAC로 S3 버킷 접근 설정하기

AWS S3 퍼블릭 액세스 차단 , CloudFront OAC로 S3 버킷 접근 설정하기

AWS S3 퍼블릭 액세스 차단 , CloudFront OAC로 S3 버킷 접근 설정하기

 AWS S3 퍼블릭 액세스 차단 , CloudFront OAC로 S3 버킷 접근 설정하기

 AWS S3 퍼블릭 액세스 차단 , CloudFront OAC로 S3 버킷 접근 설정하기