AWS - S3, CloudFront를 통한 React 배포

CloudeFront란?

CloudeFront란 AWS에서 제공하는 글로벌 콘텐츠 전송 네트워크(CDN) 서비스입니다. CloudFront는 사용자에게 콘텐츠를 더 빠르게 제공하기 위해 전 세계에 분산된 서버(에지 로케이션) 네트워크를 활용합니다. 사용자가 콘텐츠를 요청하면 CloudFront는 사용자에게 가장 가까운 에지 로케이션에서 콘텐츠를 제공하여, 대기 시간을 줄이고 다운로드 속도를 향상시킵니다.

 

웹 사이트의 주요 데이터를 원본 데이터가 있는 서버에서 직접 가져온다고 했을 때 사용자가 있는 위치에 따라서 데이터 전송 시간이 다를 수 밖에 없습니다.

 

하지만 CloudFront를 사용하게 되면 사용자와 가장 가까운 위치에 있는 서버에 저장된 캐시 데이터(HTML, CSS, IMG 등)를 전송함으로써 데이터 전송 시간을 줄일 수 있습니다. 예를 들어 S3에 저장된 데이터가 한국에 있다고 가정해 보겠습니다. 한국 사용자는 해당 데이터를 빠르게 전송받을 수 있지만, 미국이나 유럽에 있는 사용자는 전송 시간이 오래 걸릴 수 밖에 없습니다.

 

이러한 문제를 해결하기 위해 사용자는 자신의 위치와 가장 가까운 임시 저장소의 데이터를 가져와 데이터 전송 시간이 획기적으로 줄어들게 됩니다. 이를 우리는 CDN(Content Delivery Network)이라고 부릅니다.

 

ClouddFront를 사용하게 되면 사용자는 직접 S3에 접속하는 것이 아니라 CloudFront를 통해 S3에 접속하게 됩니다.

 

CloudeFront를 사용하는 이유는 지금처럼 콘텐츠 전송 시간을 줄이기 위해 사용합니다. 그리고 HTTPS 또한 적용할 수 있습니다.

 

---

 

이제 S3와 CloudFront를 통해 React App을 배포하는 과정을 보겠습니다.

 

버킷 만들기

버킷 만들기 클릭

 

 

버킷 이름 작성

 

 

객체 소유권 설정

 

 

정적 웹사이트 공유를 위한 퍼블릭 엑세스 차단 체크 해제

 

 

나머지 옵션들은 기본 옵션으로 둔 뒤 버킷 만든 뒤 만들어진 버킷 확인

 

 

버킷 이름 클릭하여 상세페이지로 이동

객체 업로드하고 퍼블릭으로 공개하기

 

 

React App을 빌드하여 나온 결과물을 객체에 업로드해준다.

 

 

속성탭으로 이동 후 아래쪽에 있는 "정적 웹 사이트 호스팅" 섹션에 편집을 눌러 이동한다.

 

 

아래와 같이 정보 수정 후 변경사항 저장

 

 

버킷 상세페이지의 권한 탭으로 이동한뒤 아래쪽에 있는 "버킷 정책" 옆 편집버튼 클릭

 

 

우측 상단에 있는 "정책 생성기" 버튼 클릭

 

 

Select Type of Policy, Effect, Principal, Actions 입력

 

 

Amazon Resource Name(ARN)에는 "버킷 -> 속성 -> ARN 복사 후 끝에 /* 를 붙여준다"

 

"Add Statement" 버튼 클릭 후 "Generate Policy" 버튼 클릭 이후 나온 json을 복사한다.

 

 

이후 다시 정책 편집으로 돌아와 복사한 json을 붙여 넣은 뒤 변경사항을 저장

 

 

버킷 상세페이지 -> 속성 탭 -> 아래쪽에 "정적 웹 사이트 호스팅"에 있는 주소를 클랙해보면 S3에 업로드한 페이지를 볼 수 있다.

 

 

S3와 CloudFront 연동

"배포 생성" 버튼 클릭

 

 

원본 도메인에 이전에 생성한 S3버킷 선택

 

 

"웹 사이트 엔드포인트 사용" 버튼 클릭

 

 

아래 "기본 캐시 동작"에 "Redirect HTTP to HTTPS" 선택

 

 

웹 애플리케이션 방화벽(WAF) "보안 보호 비활성화" 선택

 

 

설정 섹션은 다 기본값으로 둔 뒤 "기본값 루트 객체  - 선택사항"에만 index.html 입력 후 "배포 생성" 버튼 클릭

 

 

2 ~ 3분뒤 "배포 도메인 이름"을 복사하여 웹 페이지로 접근시 배포한 페이지를 볼 수 있습니다.

 

 

CloudFront -> 상세 -> "오류 페이지 탭"에서 "사용자 정의 오류 응답 생성" 버튼 클릭

 

 

404 오류코드에 대해 아래와 같이 작성한다.

 

 

403 오류에 대해서도 위에 작성한 것과 같이 작성한다.

 

 

도메인 및 SSL 인증서 설정

아래 과정을 진행하기 전에 구입한 도메인이 있다면 Route53에 호스팅 영역 생성

 

CloudFront -> 상세 -> 설정에 있는 "편집" 버튼 클릭

 

 

대체 도메인 이름에 구입한 도메인 입력

SSL 인증서 선택 -> 인증서가 없을경우 "인증서 요청" 버튼을 클릭하여 인증서 생성

 

 

인증서 요청 -> "완전히 정규화된 도메인 이름"에 구입한 도메인 입력 후 "요청" 버튼 클릭

 

 

다시 CloudFront -> 상세 -> 설정으로 들어와서 새로만든 인증서 선택 -> "변경사항 저장" 버튼 클릭

 

 

Route53 호스팅에 들어와 "레코드 생성" 버튼 클릭

 

 

별칭 토클 전환 후 "트래픽 라우팅 대상"에 "CloudFront 배포에 대한 별칭" 선택

아래 "배포 선택"에 CloudFront의 배포 도메인을 선택한 후 "레코드 생성" 버튼 클릭

 

 

 

나중에도 기록한 것을 보아 편하게 배포하기 위해 S3와 CloudFront를 이용하여 React App을 배포하는 과정을 적어보았습니다. 다음글은 S3와 CloudFront를 통해 배포한 App에 Github Action을 적용하여 배포 자동화 시키는 글을 작성해보도록 하겠습니다!