AWS CloudFront, S3를 이용한 정적 페이지 React 앱 배포

이 포스팅에서는 AWS CloudFront와 S3를 사용한 정적 웹페이지를 배포하는 방법을 학습합니다.

 

왜 CloudFront인가요?

- CloudFront는 CDN 서비스로 다양한 리전에서 빠른 접근을 할 수 있는 캐시서버를 제공합니다.

- 단순한 정적 웹페이지의 경우 S3-Cloudfront 조합으로 사용하면 속도가 빠를 뿐아니라 안정성도 보장됩니다.

- SSL이나 도메인 적용도 가능하기 때문에 완벽합니다.

- CloudFront는 접근 트레픽에 따라 요금을 과금합니다. 트래픽이 적은 사이트라면 비용 절감 효과까지 있습니다.

 

 

1. S3 생성 및 설정

1.1 S3 버킷 생성

- S3버킷은 [버킷만들기] 버튼을 통해서 쉽게 만들 수 있습니다.

- 리전은 내가 주로 사용할 리전을 선택합니다.

- 그 외의 설정은 건들지 않습니다.

 

1.2. S3에 홈페이지 코드 업로드

- 내가 사용할 코드를 버킷에 업로드 합니다.

 

 

2. CloudFront 생성

2.1 배포설정

CloudFront를 만들고 원본 도메인을 S3로 지정하고 액세스를 위한 OAI를 생성합니다.

이를 통해서 CloudFront에서 S3로 접근을 허용합니다.

 

원본 도메인 : S3의 도메인 선택

 

원본 엑세스 : Legacy access identities(OAI) 선택

원본 엑세스 ID : 새 OAI를 S3로 생성해서 ID를 발급받는다.

버킷정책: 예, 버킷 정책 업데이트 선택

 

캐시동작

뷰어 프로토콜 정책 (Redirect HTTP to HTTPS) : https를 사용할 거기 때문에 리다이렉트를 사용합니다.

 

2.2 도메인 및 SSL 인증서 설정

대체 도메인 (CNAME) 선택 - 해당 도메인은 AWS Route53에 호스팅 등록이 필요합니다.

사용자 정의 SSL 인증서 - 도메인에 대한 인증서가 AWS Certificate Manager에 등록되어야 합니다.

 

2.3 CloudFront 배포

기본값 루트 객체 : 실제로 내가 사용하는 앱에서 처음으로 읽는 root의 파일입니다.

우리는 실습간 react를 사용하고 index.html을 처음으로 읽기 때문에 /index.html을 설정했습니다.

 

3. route53 레코드 생성

route53에서 CloudFront로 해당 도메인에서 바로 연결되도록 설정합니다.

A레코드에서 라우팅 대상을 CloudFront로 두고 CloudFront ID를 선택합니다.

 

4. CloudFront  에러 페이지 설정

만약 클라이언트가 잘못된 페이지를 호출할 경우 에러 페이지 설정이 없다면 react router의 통제를 받을 수 없습니다.

따라서 잘못된 요청에도 index.html 파일을 응답할 수 있도록 에러페이지를 설정합니다.