🔑 CloudFront와 S3를 연동했을 때 이점

AWS S3는 저장하는 건 저렴한데, S3에 직접 엑세스하는건 비싸고 느리다.
그래서 CDN(Content Delivery Network)을 이용해 캐싱을 많이하는데, AWS에서는 CloudFront 서비스를 이용해서 CDN을 사용할

CloudFront란?

Amazon CloudFront는 .html, .css, .js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 더 빨리 배포하도록 지원하는 웹 서비스이다. CloudFront는 엣지 로케이션이라고 하는 데이터 센터의 전 세계 네트워크를 통해 콘텐츠를 제공한다. CloudFront를 통해 서비스하는 콘텐츠를 사용자가 요청하면 지연 시간이 가장 낮은 엣지 로케이션으로 요청이 라우팅되므로 가능한 최고의 성능으로 콘텐츠가 제공된다.

AWS에서 사용하는 기능이니 고가용성은 기본적으로 보장이 될거고, SSL/TLS 인증서를 사용할 수 있어 보안적인 측면도 보장된다.
그리고 콘텐츠가 지연 시간이 가장 낮은 엣지 로케이션에 있는 경우 CloudFront가 콘텐츠를 즉시 제공해 속도 면에서도 많은 이점을 얻을 수 있다.

장점 정리

• 콘텐츠 캐싱을 통한 S3 부하 감소
• Edge Location을 통한 응답속도 향상
• 콘텐츠 보안 유지
• 등등

AWS S3 + Cloudfront를 선택한 이유?

하고있는 프로젝트는 Vite 기반 React로 이루어져 있고 CSR 기반이기 때문에 정적 리소스를 대규모로 특화 되어 있는 S3를 선택했다. 또한 CDN 방식인 Cloudfront를 사용해 S3에 직접적 접근을 막고 CloudFront로 접근하여 보안과 속도 두 가지 이점을 모두 잡고자 했다. CloudFront는 Edge 서버를 사용하여 콘텐츠를 캐싱하고 가까운 지역의 서버에서 콘텐츠를 전송할 수 있어 속도가 빠르다는 이점이 있다.

AWS S3 배포 방법

1. AWS S3 - Bucket 만들기

AWS S3 버킷을 만들 때 AWS 리전은 보통 서울로 하고 나머지는 기본 설정으로 버킷 만들기를 하면 된다.

2. Bucket에 Build 파일들을 Upload

만든 Bucket을 클릭하여 Build한 파일들을 Upload를 한다.

Create-React-APP 으로 만든 경우 .build폴더, vite로 만든 경우는 .dist 폴더을 업로드하면 된다.
이때 주의할 것은 .dist 폴더를 한꺼번에 옮기는 것이 아닌 파일 혹은 폴더를 하나하나 옮겨야 한다.

CloudFront 배포 방법

1. cloudfront 배포 생성 클릭 후 배포 생성 진행

S3 에서 생성한 domain 선택한다.
이후 원본 엑세스(Origin access) 에서 원본 액세스 제어 설정(권장) (Origin access control settings) 을 선택한다.

2. Create new OAC 를 눌러서 기본으로 설정되있는 것을 가만히 두고 Create를 누르면 된다.

나머지는 기본 설정 되있는 것으로 다 하면 된다.
웹 애플리케이션 방화벽(WAF)은 보안 보호 비활성화 하면 된다.
(보안 보호 활성화하면 요금이 더 나감)

3. 기본값 루트 객체 (Default root object - optional) 에 index.html 넣기

4. 배포 생성 후 정책 복사 하기(Copy policy) (중요!)

Copy policy 이후 '정책을 업데이트하려면 ~~~.. ' 링크를 클릭하여 이동한다.

5. 권한 탭으로 이동 후

버킷 정책(Bucket policy)에 편집을 누른 후 아까 복사한 것을 붙여넣은 후 저장한다.

6. 이후 CloudFront에 다시 들어가서 배포가 끝날때까지 기다리면 된다.

7. 배포가 끝나면 배포 도메인 이름을 url로 넣어서 검색하면 잘 나오는 것을 확인 할 수 있다.

만약 메인 페이지만 들어가지고 다른 /login 같은 페이지 들어가면 오류난다?

-> Cloudfront에 들어가서 Error pages 에서 Create custom error response 클릭해서 403 (+404) error code 선택하고 Customize error response
는 Yes 누르고 Response page path 는 /index.html 입력하고 HTTP Response code 는 200 으로 선택!

동작 원리

• 사용자가 https://dxjlsysy9rfsa.cloudfront.net/login에 접속.
• CloudFront가 S3 버킷에서 해당 파일을 찾으려고 시도 (404 발생).
• 404 에러가 발생하면 설정된 "Response Page Path"인 /index.html을 반환.
• HTTP 상태 코드도 200으로 변경하여 정상적인 페이지로 인식.
• 프론트엔드의 클라이언트 라우터가 URL을 처리하여 /login 페이지를 렌더링.