[AWS] S3, CloudFront를 활용해서 React 프로젝트 배포하기

오늘은 S3와 Cloudfront를 활용해서 React 프로젝트를 한 번 배포해 보겠습니다.

 

먼저 CloudFront에 대해 알아보겠습니다.

CloudFront

AWS CloudFront는 콘텐츠 전송 네트워크(CDN) 서비스입니다.

CDN은 사용자와 가까운 서버에서 데이터를 제공하여 웹사이트, 애플리케이션, 또는 미디어 파일을 빠르고 안전하게 전송하도록 돕습니다. CloudFront는 전 세계 엣지 로케이션(Edge Location)을 활용해 속도와 안정성을 보장합니다.

 

CloudFront의 주요 기능

1. 빠른 콘텐츠 제공
: 전 세계에 위치한 엣지 로케이션을 통해 사용자가 가까운 서버에서  콘텐츠를 전달 받음.

2. 보안 강화
: HTTPS를 지원하고, AWS Shield와 통합하여 DDoS 공격을 방어함.

3. 캐싱
: 데이터를 엣지 로케이션에 캐싱하여 오리진 서버의 부하를 줄이고 사용자 요청에 빠르게 응답.

4. 유연한 통합
: AWS 서비스와 쉽게 연동 가능 (비AWS 오리진도 지원)

5. 글로벌 커버리지
: 전 세계 수백 개의 엣지 로케이션 운영

 

CloudFront의 작동 원리

1. 사용자가 요청
- 사용자가 CloudFront의 도메인 이름을 통해 콘텐츠 요청

2. 가까운 엣지 로케이션 선택
- CloudFront는 사용자의 위치를 기준으로 가장 가까운 엣지 로케이션에서 요청 처리

3. 캐시 확인
- 엣지 로케이션에 요청한 데이터가 캐싱되어 있다면 즉시 사용자에게 전송
- 캐싱되어 있지 않다면 오리진 서버에서 데이터를 가져와 캐싱하고 사용자에게 전달

4. 반복 요청 처리
- 이후 동일한 데이터 요청은 엣지 로케이션에서 처리되어 빠른 응답 제공

---

이제 React 프로젝트를 배포해 봅시다.

 

React 프로젝트 빌드

배포하려는 React 프로젝트 디렉토리에서, 빌드 명령을 실행합니다.

npm run build

 

이렇게 하면 build 폴더가 생성이 되는데, 이 폴더에는 배포할 정적 파일이 포함돼 있습니다.

 

AWS S3 버킷 생성 및 설정

[AWS] S3에 웹 프로젝트 호스팅 하기

버킷 생성 및 설정은 윗글을 참고해 주세용.

버킷 생성이 완료되면, 아까 만든 React 프로젝트의 build 폴더 안에 있는 모든 파일을 업로드 합니다.

 

CloudFront 설정

CloudFront를 설정하러 가봅시다.

배포 생성에서 [Origin domain]은 S3 생성할 때 나왔던 도메인을 선택해 줍니다.
그리고 [웹 사이트 엔드포인트 사용]을 클릭해 줍니다.

쭉 내려서

뷰어 프로토콜 정책에서
Redirect HTTP to HTTPS를 선택해 줍니다.

사용자가 http://example.com으로 접속해도 CloudFront가 자동으로 https://example.com으로 리다이렉트하기 때문에,
보안이 적용된 버전을 사용할 수 있어 웹사이트 보안과 사용자 경험을 동시에 개선할 수 있습니다.

 

어차피 예시로 배포하는 것이기 때문에, [가격 분류]에서는 제가 속한 아시아가 있는 3번째 옵션을 선택해 줍니다.

그리고 이제 생성해주면 됩니다!

생성된 CloudFront에 들어가보면 이렇게 배포 도메인이 나오는데,
보통 엣지 로케이션에 캐싱하고 분산할 때까지 2-3분 정도 걸린다고 합니다.

저 도메인에 들어가보면, 우리가 배포하려 했던 프로젝트가 나오는 것을 볼 수 있습니다.