서브 도메인과 AWS 서비스 연결하기 2. CloudFront에 SubDomain 연결하여 HTTPS 통신하기

잘못된 내용이나 의견 있다면 편하게 말씀해주세요.🙏🏻

 

시리즈

1. 이전 글 : AWS Route 53에서 Domain name(root) 구입하기

2. 현재 글 : CloudFront에 SubDomain 연결하여 HTTPS 통신하기

3. 다음 글 : 로드 밸런서에 SubDomain 연결하여 HTTPS 통신하기 

 

서비스 아키텍처 중, 프론트(파란색) 도메인 연결

 

이전 글에서 Domain Name(jjikmuk.com)을 구입하였습니다.

이번 글에서는 파란색, CloudFront에 서브 도메인을 연결하여 HTTPS 통신하는 방법에 대해 알아보고자 합니다.

 

Root Domain과 SubDomain

이전 글에서 jjikmuk.com 이란 Domain Name을 구입하였습니다. 현재 프론트와 백엔드 서버에 두 가지 도메인 이름이 필요합니다.

앗, 하나밖에 없으니 도메인을 하나 더 구입해야 할까요? 이럴 때는 SubDomain을 사용하여 하나의 도메인을 가지고 하위에 여러 도메인을 두어 사용할 수 있습니다.

 

구입한 jjikmuk.com 은 사실 먼저 Root Domain이라고이라고 합니다. Root Domain은 "." 기준으로 두 가지로 나눌 수 있습니다

- jjikmuk : 도메인 네임

- com : 최상위 도메인(TLD, Top-Level Domain)

 

SubDomain(하위 도메인) 이란 도메인 이름의 확장자. 보조 도메인이라고 합니다.

예를 들어 naver.com 루트 도메인이 있다고 한다면 아래와 같은 SubDomain이 존재합니다.

네이버 영화 : movie.naver.com

네이버 지도 : map.naver.com

네이버 블로그 : blog.naver.com

 

프로젝트에서 서브 도메인을 사용하기로 하였고 다음과 같습니다.

FE 웹(CloudFront) : sikdorak.jjikmuk.com

BE 서버 : api.jjikmuk.com

 

이제 AWS CloudFront에 서브 도메인 + HTTPS를 연결해봅시다. (단, CloudFront는 이미 배포되어있다고 가정합니다. CloudFront 배포가 궁금하시다면 해당 글을 참고해주세요)

순서는 다음과 같습니다.

 

1. SSL 인증서 생성하기

2. CloudFront에 SSL 인증서와 SubDomain 연결

3. Route 53, RootDomain에 SubDomain 레코드 추가하여 CloudFront 연결하기

4. 결과

---

1. SSL 인증서 생성하기 (with AWS ACM)

먼저 HTTPS 연결을 위해 AWS가 무료로 제공해주는 SSL 인증서를 만들려고 합니다.

AWS에서 SSL 인증서를 만들려면 ACM(AWS Certificate Manager) 서비스에서 만들어야 합니다. 이때 ACM은 리전에 속하는 서비스입니다.

1.1. ACM - 리전 선택 - 인증서 요청 - 퍼블릭 인증서 요청 - 다음

CloudFront에 SSL을 연결하기 위해서는 미국 동부 버지니아 리전(us-ease1)만 제공하기 때문에 버지니아 북부에서 SSL을 생성합니다.

1.2. 서브 도메인 이름 지정(sikdorak.jjikmuk.com) - DNS 검증 - 요청

1.3. 인증서 요청 후 - 인증서 보기 또는 인증서 나열에서 새로고침

인증서 요청 후, 해당 인증서를 Route 53 레코드에 생성해야 합니다. 대기 중인 인증서에 들어가 Route 53에서 레코드 생성을 누르면 손쉽게 생성할 수 있습니다.

1.4. 대기중인 인증서 - Route 53에서 레코드 생성

1.5. 레코드 생성

1.6. 인증서 발급완료

저의 경우 약 3~5분 시간이 지난 후 인증서가 발급되었습니다.

1.7. Route 53 - 호스팅 영역 - 레코드 영역

Route 53에도 SSL을 위한 레코드가 생성된 것을 확인할 수 있습니다.

---

2. CloudFront에 SSL 인증서와 사용할 SubDomain 연결하기

2.1. CloudFront - 배포 - 편집

이미 배포된 CloudFront 서비스에 SubDomain을 연결하기 위해 편집을 누릅니다.

2.2. CNAME 추가 / 사용자 정의 SSL 인증서 추가

대체 도메인 이름(CNAME)에 사용할 SubDomain(sikdorak.jjikmuk.com)과 생성한 인증서를 선택합니다.

2.3. 편집 완료

이제 CloudFront에 SubDomain이 연결되었습니다. 

마지막으로 Route 53에서 Root Domain에 SubDomain 레코드를 추가하여 CloudFront와의 연결을 마무리하면 됩니다.

---

3. Route 53, RootDomain에 SubDomain 레코드 추가하여 CloudFront 연결하기

3.1 Route 53 - 호스팅 영역 - 편집할 도메인 선택 - 레코드 생성

3.2 레코드 이름 / 레코드 유형 / 트래픽 라우팅 대상 설정 후 - 레코드 생성

레코드 이름은 SubDomain으로 지정할 이름을 입력합니다.

레코드 유형은 A로 선택합니다.

별칭을 클릭하고 CloudFront 배포에 대한 별칭을 사용합니다. 이때 CloudFront 인증서가 버즈니아 북부가 아니라면 리소스를 찾을 수 없으니 유의해주세요.

 

+a) CloudFront 배포할 때 뷰어 프로토콜 정책(HTTP 연결 시 HTTPS로 리다이렉트 옵션)을 선택하면 자동으로 HTTPS로 리다이렉트 됩니다.

CloudFront 배포 생성 시 뷰어 프로토콜 정책 옵션

---

결과

위 과정을 거쳤다면 CloudFront 배포 서비스를 CloudFront 도메인이 아닌 설정한 SubDomain으로 연결할 수 있습니다.

CloudFront domain

SubDomain

# 터미널에서 dig 명령어로 확인해도 DNS가 매핑 되는것을 확인할 수 있음
>dig sikdorak.jjikmuk.com

; <<>> DiG 9.10.6 <<>> sikdorak.jjikmuk.com
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 18400
;; flags: qr rd ra; QUERY: 1, ANSWER: 4, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 1232
;; QUESTION SECTION:
;sikdorak.jjikmuk.com.		IN	A

;; ANSWER SECTION:
sikdorak.jjikmuk.com.	60	IN	A	54.192.60.85
sikdorak.jjikmuk.com.	60	IN	A	54.192.60.170
sikdorak.jjikmuk.com.	60	IN	A	54.192.60.163
sikdorak.jjikmuk.com.	60	IN	A	54.192.60.181

;; Query time: 45 msec
;; SERVER: 168.126.63.1#53(168.126.63.1)
;; WHEN: Tue Sep 13 15:12:50 KST 2022
;; MSG SIZE  rcvd: 113

---

마치며

이번 글에서는 CloudFront에 SubDomain 연결하여 HTTPS 통신하는 방법에 대해 알아보았습니다.

다음 글에서는 백엔드 서버가 연결된 로드 밸런서에 SubDomain 연결하여 HTTPS 통신하는 방법에 대해 알아보려 합니다.

---

⛓ Reference

서브 도메인을 활용하여 AWS 서비스에 연결하기 1. Route 53에서 도메인 네임 구입 방법

GitHub Actions를 활용해 React를 S3, CloudFront를 사용해 배포하기

Requirements for using SSL/TLS certificates with CloudFront

  - https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/cnames-and-https-requirements.html