AWS S3와 Cloudfront를 활용한 배포 방법 정리 - 프론트엔드 편

프론트 엔드 배포 방법

여기서는 리액트를 기준으로 설명합니다.

프론트 엔드 배포 구조는 기본적으로 아래 그림과 같습니다.

 

cloudfront 를 사용하는 이유

s3 를 퍼블릭 액세스로 사용해서 배포하는 방법도 있다.

하지만 그렇게 하면 그 S3 저장소는 모두에게 모든 방식으로 (GET, POST, PUT, DELETE...) 열려있다.

위험하다.

 

GET 방식으로만 정적 웹사이트(index.html) 전송하기 위해서 cloudfront 를 사용한다.

또한 https 를 적용하기 위해서도 cloudfront 가 필요하다.

 

 

 

그럼 지금부터 이 내용을 하나씩 해보고 https까지 적용해보겠습니다.

1. npm run build 명령어를 입력합니다.

build 폴더 안에 배포 항목이 생성됩니다.

2. aws s3에 들어갑니다.

3. S3 버킷을 하나 만듭니다.

클릭하고 그냥 만듭니다.

build 파일 안에 있는 내용을 업로드 합니다.

 

기존에 들어있는 내용이 없다면 아래 그림이 첫페이지로 나옵니다.

 

드래그해서 업로드 했습니다.

 

자 이제 cloudfront 로 갑니다.

 

Create Distribution을 클릭합니다.

 

 

Get Started 를 클릭합니다.

 

Get Started 를 클릭하면 아래 페이지로 이동합니다.

 

 

여기서 배포정보를 입력합니다.

Origin Domain Name 을 클릭하면 S3, 로드밸런서등의 항목이 나타납니다.

어떤 것을 사용해서 배포 할지 정하는 부분입니다.

아까 만든 S3 버킷을 클릭하면 됩니다.

 

Origin ID 는 고유값인데 아무거나 입력하면 됩니다.

Restrict Bucket Access를 Yes 로 체크합니다.

OAI 는 Create a New Identity 를 선택하면 됩니다.

저는 기존에 만들었던 게 있어서 Uee an Existing Identity 를 선택했습니다.

Grant Read Permission 은 Yes 를 선택합니다.

 

Viewer Protocol Policy 를 [Redirect Http to Https] 를 선택합니다.

선택하면 모든 트래픽이 https 로 서빙 됩니다.

 

아래로 내려가서 [Distribution Settings] 정합니다.

 

1. Alternate Domain Names를 입력합니다.

Alternate Domain Names은 도메인 주소를 말합니다.

예를 들어서 Route53에서 fors.com 이라는 주소를 받았다고 해보겠습니다.

 

route53 에서 도메인 주소를 먼저 발급 받아야 합니다.

ssl 인증서도 받습니다. ssl 인증서는 *.<도메인 주소> 형태로 신청합니다.

fors.com 이면 *.fors.com 으로 신청하는 것입니다.

 

그러면 Alternate Domain Names에는 www.fors.com 처럼 발급받은 도메인 앞에 문자열을 넣은 것을 입력합니다. 

www 대신에 다른 것을 입력해도 상관없습니다.

 

발급 받는 도메인과 SSL 인증서를 써서 https 를 적용하는 부분입니다.

Custom SSL Certificate 를 클릭해야 합니다.

여기서 중요한 부분이 있습니다.

이전에 SSL 인증서를 [서울] 리전에서만 받았다면 항목 선택이 안됩니다.

[버지니아 북부] 에서 인증서가 있어야만 여기서 선택 할 수 있습니다.

 

그래서 보통 개발할때는 같은 도메인 주소에 대해서 SSL 인증서를 서울, 버지니아 북부 둘다 받아 놓습니다.

여기까지 했다면 Create Distribution을 클릭합니다. 

CloudFront가 만들어졌습니다.

 

이제 Route53에 가서 www.<도메인 주소> 로 접속하면 cloudFront 로 가도록 정의합니다.

레코드 세트 생성을 클릭합니다.

CloudFront 를 클릭하면 됩니다.

그런데 저처럼 CloudFront 가 표시되지 않을 수도 있습니다.

그럴때는 아래 그림의 CloudFront 배포 도메인 이름을 참고해서 직접 작성하면 됩니다.

CloudFront 배포 도메인 이름은 아까 CloudFront를 만들었을때 표에 적혀 있었습니다.

Domain Name 을 가져가서 작성합니다.

자 이제 https:// 로 접속을 해보면 접속이 됩니다.

그런데 문제가 한가지 있어서 해결했습니다.

다른 경로로 이동하면 아래 에러가 표시됩니다.

아래와 같이 해결합니다.

CloudFront 에서 이전에 만든 CloudFront 페이지에 들어갑니다

 

Error Pages - Create Custom Error Response 를 클릭합니다.

자 이제 Response 를 만듭니다.

Create합니다.

Status가 Deployed인 것을 확인하고 다시 접속해봅니다. 접속 됩니다.