군붕이의 메모장

AWS에 React 배포하기 - 4, CloudFront + Route53 사설도메인 연동하기 본문

클라우드/AWS

AWS에 React 배포하기 - 4, CloudFront + Route53 사설도메인 연동하기

초보군붕이 2023. 4. 11. 13:42
반응형

이전글 : https://iamiet.tistory.com/entry/AWS%EC%97%90-React-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-3-CloudFront-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

 

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, Route5

iamiet.tistory.com

 

이제 마지막으로 CloudFront에서 배포한 URL을 Route53을 통해 사설 도메인에 연동하면 된다.

 

 

● Route53에서 CloudFront 레코드 추가하기

Route53 레코드 생성

Route53에서 레코드 생성을 누르면 위 사진과 같은 화면이 나온다.

 

여기서 CloudFront에 배포에 대한 레코드를 생성해야 하므로 아래처럼 세팅해준다.

 

레코드 이름 : 서브도메인을 입력해준다. 여기서 hdev.site로 접속하거나 www.hdev.site로 접속했을때 CloudFront로 연동되게 진행 예정이므로 총 2개의 레코드를 생성한다.

 

별칭 : 별칭을 통해서 CloudFront 배포에 대한 별칭을 선택해줘야 한다. 별칭을 체크해준다.

 

트래픽 라우팅 대상 : CloudFront 배포에 대한 별칭을 선택해주고, 아래는 배포선택을 눌러서 CloudFront 배포를 선택해준다.

 

 

생성된 Route53 레코드 목록

기존에 생성된 NS, SOA 레코드 총 2개

SSL 인증서를 발급할때 추가된 CNAME 레코드 1개

CloudFront를 연동할 A 레코드 2개

 

총 이렇게 5개의 레코드가 생성되면 성공적으로 완료다.

 

 

● 사설도메인으로 접속해서 확인해보기

도메인연결 성공

 

정상적으로 연결됬다!

반응형
저작자표시

'클라우드 > AWS' 카테고리의 다른 글

S3로 배포한 React에 CI/CD 구축하기 with Github Actions  (0) 2023.04.19
EC2 + Docker + ECR로 Nestjs 어플리케이션 배포하기  (0) 2023.04.11
AWS에 React 배포하기 - 3, CloudFront 배포하기  (1) 2023.04.11
AWS에 React 배포하기 - 2, Route53 도메인 연결 및 SSL 인증서 발급  (0) 2023.04.11
AWS에 React 배포하기 - 1, S3 웹호스팅 설정  (2) 2023.04.11
'클라우드/AWS' Related Articles more