[AWS] 배포된 React 프로젝트에 도메인 연결하기

배포한 React 프로젝트에 도메인을 연결해 보겠습니다.

S3, CloudFront를 활용하여 배포하였는데,
자세한 내용은 아래의 글을 참고 부탁드립니다.

[AWS] S3, CloudFront를 활용해서 React 프로젝트 배포하기

 

사용자 정의 도메인을 연결하려면, 일단 도메인이 있어야겠죠??

저는 내도메인.한국 사이트에서 도메인을 무료로 얻었습니다.

내도메인.한국 - 한글 무료 도메인 등록센터

회원가입 및 로그인 후, 쓰고 싶은 도메인을 검색하면 이렇게 도메인 리스트가 나옵니다.

첫번째 도메인은 제가 이미 등록해서 등록 불가라고 뜨는 것 같습니다.

아무튼 등록하기에 접속하면 [고급설정 (DNS)] 옵션이 보입니다.
여기 별칭(CNAME)에 CloudFront에서 받은 배포 도메인 이름을 넣어주면 됩니다.

이렇게요!

그리고 CloudFront에서도 설정을 해줘야 합니다.

여기 CNAMEs를 새로 설정하려는 도메인으로 추가해 줘야 해요.

그냥 추가할 수는 없고, 인증서가 필요합니다.
이유는 사용자 정의 도메인(CNAME)을 HTTPS로 보호하기 위해서 라고 합니다.

 

밑에 보이는 [Custom SSL certificate] - [Request certificate]에 들어갑니다.

도메인 이름을 넣은 후 요청을 하면,

이렇게 [도메인]에 [CNAME 이름]과 [CNAME 값]이 나옵니다.

이걸로 제가 도메인의 주인이 맞는지 확인하는 과정을 거쳐야 인증서를 발급해 준다고 해요.

내도메인.한국 사이트에 다시 가서, 별칭에 또 추가합니다.

앞에는 [CNAME 이름]에서 .facebook-web-page-xu.p-e.kr을 뺀 나머지를 복붙하면 되고,
뒤에는 [CNAME 값]에서 맨 끝에 .(dot)을 제외한 나머지를 복붙하면 됩니다.

수정을 하고 조금 기다리면, 인증서가 정상적으로 발급이 됩니다.

 

이제 아까 CloudFront 설정으로 다시 넘어갑니다.

이렇게 인증서까지 넣어주고, 편집을 끝내고 나면 도메인에 정상적으로 접속이 가능할 겁니다!

HTTPS로 제대로 보호까지 되는 걸 보실 수 있습니다.