[AWS] AWS CloudFront 가비아 도메인 연동하기

AWS CloudFront에 가비아에서 발급받은 도메인 연동하기

---

관련포스팅

[AWS] AWS S3 CloudFront(CDN)-S3 정적 웹 호스팅 하기

 

[AWS] AWS S3 리액트 정적 웹 호스팅 하기

[AWS] AWS S3 퍼블릭 액세스 차단 , CloudFront OAC로 S3 버킷 접근 설정하기

[GitHub Actions] React 프로젝트 AWS S3 CloudFront 자동배포 하기

 

---

개요

이전 포스팅에서 AWS S3와 CloudFront를 사용해서 정적 웹 호스팅을 진행했습니다.

현재 가비아에서 발급 받아 놓은 도메인이 있습니다.

해당 도메인인을 CloudFront 웹 엔드포인트 주소와 연동을 진행하겠습니다.

 

---

 

A레코드

A레코드는 도메인 이름을 IPv4주소로 매핑합니다.

• www.example.com → 192.0.2.1

 

 

CNAME 레코드

CNAME 레코드는 하나의 도메인 이름을 다른 도메인 이름으로 매핑합니다. 

사용자가 이 별칭 도메인에 접근하면, DNS는 최종 목적지인 실제 도메인의 주소를 찾아 사용자를 리디렉션합니다.

• 예시: blog.example.com → www.example.com

 

 

 

---

 

 

DNS 레코드 수정

가비아에서 DNS 레코드를 CloudFront 엔드포인트 주소와 연결합니다.

 

 

호스트 : @

하위 도메인 없이 단순히 도메인 이름만을 지칭합니다. 예를 들어, 
example.com이라는 도메인이 있다면, "@"는 example.com 을 직접 가리킵니다.

 

호스트 : www

"월드 와이드 웹"을 의미하는 전통적인 호스트 이름입니다. 
www.example.com 처럼 웹 브라우저를 통해 접근하는 일반적인 웹 서비스를 가리킬 때 사용됩니다.
CNAME 레코드에서 "www"를 사용하면, 이는 "www.example.com"을 의미합니다.

 

 

 

403 Error 발생

레코드를 수정한 URL로 접속 시 403 Error가 발생합니다.
CloudFront 에서 허가되지 않은 CNAME 도메인에서의 접속을 차단하고 있기 때문입니다

 

 

CloudFront 대체 도메인 이름 추가

CloudFront에서 대체 도메인 이름 추가 설정을 하겠습니다.

 

1. CloudFront 콘솔 접속

 

 

2. CNAME 설정 변경

CloudFront -> 배포 -> 설정 -> 편집

 

 

 

에러가 발생합니다!

클라우드프론트 배포에 대체 도메인 이름(CNAME)을 추가하려면
해당 도메인 이름 사용 권한을 검증하는 신뢰할 수 있는 인증서를 첨부해야 합니다

 

3.1 인증서 발급

사용자 정의 SSL 인증서에서 인증서 요청을 합니다.

 

3.2 퍼블릭 인증서 요청 

 

3.3  DNS 검증

 

3.3  CNAME 이름과 CNAME 값 확인

해당 이름과 값을 가비아 도메인 레코드에 등록을 해줍시다.

 

3.4  CNAME 이름과 CNAME 값 등록

 

 

3.4  등록 성공

저는 3분정도 기다리니 등록이 되었습니다.

 

 

4. 발급받은 SSL 인증서 선택

 

 

이제 발급받은 도메인으로 접속을 해봅시다

짜잔!