AWS에 React 배포하기 - 3, CloudFront 배포하기
AWS에 React 배포하기 - 2, Route53 도메인 연결 및 SSL 인증서 발급
이전글 : https://iamiet.tistory.com/entry/AWS%EC%97%90-React-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-1-S3-%EC%9B%B9%ED%98%B8%EC%8A%A4%ED%8C%85-%EC%84%A4%EC%A0%95 AWS에 React 배포하기 - 1, S3 웹호스팅 설정 리액트 클라이언트를 배포하
iamiet.tistory.com
S3에서 정적 웹 호스팅의 단점을 해결하기 위해 Cloudfront 배포를 생성할 예정이다.
● CloudFront 배포 생성하기
우선 AWS의 CloudFront 기능으로 들어가준다.
원본도메인 : S3에서 정적 웹 호스팅을 통해 발급받은 URL을 입력해준다. 하단에 뜨는 URL을 누르는 경우 비정상적으로 동작할수도 있다.
프로토콜 : 뷰어일치로 선택한다. 추후 SSL 인증서 발급을 통해 https를 활용할 예정이다. 또한 http로 접속한 경우 https로 리다이렉트되게 설정할 예정이다.
뷰어 프로토콜 탐색 :http로 접속하면 https로 리다이렉트 되도록 체크해준다.
가격분류 : 북미, 유럽, 아시아, 중동 및 아프리카에서 사용 체크, 모덴 엣지 로케이션이 제일 빠르지만 우선 비용이 많이 발생할 수 있음로 3번째 메뉴를 체크해준다.
대체 도메인 이름 : 사설도메인을 구매하여 연동할 예정인 도메인명을 입력해준다. 이전 2편에서 구매하고 연동한 도메인의 이름을 입력해준다.
사용자 정의 SSL 인증서 : 선택사항 이지만 https를 사용할 예정으로 SSL 인증서를 발급해야 한다. 마찬가지로 2편에서 발급받은 사용자 정의 SSL 인증서를 선택해준다.
기본값 루트 객체 : 만약 hdev.site에 접속했을때 접속되는 기본값을 지정한다. 리액트의 경우 index.html에 모든 데이터가 들어가기 때문에 index.html을 입력해준다.
그리고나서 배포 생성을 눌러주면 CloudFront 배포가 생성된다.
● CloudFront 배포 결과 확인하기
배포가 잘되었으면 아래처럼 도메인 이름을 확인해볼 수 있다.
http로 접속하면 자동으로 https로 리다이렉트된다.
이제 마지막으로 구매한 사설도메인에 CloudFront에서 배포한 환경을 연동할것만 남았다.