AWS에 React 배포하기 - 3, CloudFront 배포하기

이전글 : https://iamiet.tistory.com/entry/AWS%EC%97%90-React-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-2-Route53-%EB%8F%84%EB%A9%94%EC%9D%B8-%EC%97%B0%EA%B2%B0-%EB%B0%8F-SSL-%EC%9D%B8%EC%A6%9D%EC%84%9C-%EB%B0%9C%EA%B8%89

AWS에 React 배포하기 - 2, Route53 도메인 연결 및 SSL 인증서 발급

 

S3에서 정적 웹 호스팅의 단점을 해결하기 위해 Cloudfront 배포를 생성할 예정이다.

 

● CloudFront 배포 생성하기

우선 AWS의 CloudFront 기능으로 들어가준다.

CloudFront

 

 

배포생성 - 1

원본도메인 : S3에서 정적 웹 호스팅을 통해 발급받은 URL을 입력해준다. 하단에 뜨는 URL을 누르는 경우 비정상적으로 동작할수도 있다.

 

프로토콜 : 뷰어일치로 선택한다. 추후 SSL 인증서 발급을 통해 https를 활용할 예정이다. 또한 http로 접속한 경우 https로 리다이렉트되게 설정할 예정이다.

 

배포생성 - 2

 

뷰어 프로토콜 탐색 :http로 접속하면 https로 리다이렉트 되도록 체크해준다.

 

배포생성 - 3

가격분류 : 북미, 유럽, 아시아, 중동 및 아프리카에서 사용 체크, 모덴 엣지 로케이션이 제일 빠르지만 우선 비용이 많이 발생할 수 있음로 3번째 메뉴를 체크해준다.

대체 도메인 이름 : 사설도메인을 구매하여 연동할 예정인 도메인명을 입력해준다. 이전 2편에서 구매하고 연동한 도메인의 이름을 입력해준다.

사용자 정의 SSL 인증서 : 선택사항 이지만 https를 사용할 예정으로 SSL 인증서를 발급해야 한다. 마찬가지로 2편에서 발급받은 사용자 정의 SSL 인증서를 선택해준다.

 

배포 생성 - 4

기본값 루트 객체 : 만약 hdev.site에 접속했을때 접속되는 기본값을 지정한다. 리액트의 경우 index.html에 모든 데이터가 들어가기 때문에 index.html을 입력해준다.

 

그리고나서 배포 생성을 눌러주면 CloudFront 배포가 생성된다.

 

 

 

● CloudFront 배포 결과 확인하기

배포완료

배포가 잘되었으면 아래처럼 도메인 이름을 확인해볼 수 있다.

 

배포가 잘된 모습

 

http로 접속하면 자동으로 https로 리다이렉트된다.

 

이제 마지막으로 구매한 사설도메인에 CloudFront에서 배포한 환경을 연동할것만 남았다.