리액트 AWS S3 + CloudFront로 배포하기 - 2. 도메인 구매 + Route 53 + ACM 설정

 

이전에 S3와 CloudFront 설정을 마쳐주었다.

2025.03.31 - [AWS] - 리액트 AWS S3 + CloudFront로 배포하기 - 1. S3, CloudFront 설정

리액트 AWS S3 + CloudFront로 배포하기 - 1. S3, CloudFront 설정

 

이제 다음으로 도메인 구매부터 해보겠다.

 

✋ 배포 순서 3. 도메인 구매

먼저 도메인이란 인터넷 주소를 사람이 읽을 수 있게 만든 것이다.

예를 들어, 실제 주소(IP)가 13.124.22.9 이고 이에 대한 도메인은 www.petlog.com인 것과 같다. 

DNS를 통해 IP주소를 찾아가고 그 IP주소로 접속하게 된다.

🔥 DNS란?
Domain Name System (도메인 이름 시스템)
도메인 이름을 컴퓨터가 실제로 이해할 수 있는 IP 주소로 변환해주는 시스템

비유로 설명하면?
- 도메인 = "친구 이름"
- IP 주소 = "친구 전화번호"
- DNS = "연락처 앱"

👤 입력: www.petlog.com
🔎 DNS: petlog.com은 13.124.92.10이네!
🌐 브라우저: IP로 요청 보내기~

작동 방식
1. 사용자가 www.petlog.com 입력
2. 브라우저가 DNS 서버에게 "이 주소의 IP가 뭐야?" 물어봄
3. DNS 서버가 "13.124.92.10" 반환
4. 브라우저가 그 IP 주소로 접속

 

 

여러 도메인 사이트 중 나는 가비아를 사용해서 구매했다.

이름은 내 프로젝트이름으로 하고 가장 저렴한 500원 짜리로 구매했다.

 

✋ 배포 순서 4. Route53

지금까지 나온 도메인, DNS, 인증서, CloudFront를 하나로 연결해주는 핵심 서비스가 바로 AWS Route 53이다.

Route53은 AWS에서 제공하는 도메인 네임 시스템(DNS) 서비스이다.

 

호스팅영역에 CloudFront에 사용할 도메인 등록하기

AWS의 Route53 카테고리로 Route53 시작하기를 선택한다.

우리는 이미 가비아에서 도메인을 구매했으므로 호스팅 영역 생성부터 시작한다.

 

도메인 이름에 구매한 도메인 주소를 입력하고 호스팅 영역 생성을 선택

 

호스팅 영역 생성이 잘된 모습!

이제 저 네모 박스 친 값/트래픽 라우팅 대상 4개의 주소를 가비아에 가져가서 라우팅대상으로 설정해줄것이다.

 

 

가비아의 도메인 정보 변경 > 네임 서버 설정에 와서 호스팅영역 생성 후 나온 라우팅 대상 주소를 입력해준다.

입력 시 마지막 점(.)은 제외하고 입력해줘야한다.

 

 

✋ 배포 순서 5. ACM (AWS Certificate Manager)

ACM은 SSL/TLS 인증서를 무료로 발급/관리해주는 AWS이다.

HTTPS를 사용하기 위해서는 인증서가 필요하고그 인증서를 발급해주는 게 바로 ACM이다.

 

🔥 SSL/TLS란?
인터넷은 기본적으로 누구나 볼 수 있는 공개 네트워크이다.
그래서 누군가 와이파이나 중간 라우터를 해킹하면 HTTP를 통해 전송된 패킷의 정보가 모두 보이게 된다.

그걸 막기위해 나온게 바로 SSL/TLS! 아래와 같은 역할을 한다.
1. 암호화 : 데이터가 도중에 노출되어도 읽을 수 없게 만든다.
2. 인증 : 상대가 진짜 내가 의도한 서버인지 확인한다.
3. 무결성 : 데이터가 전송 중 바뀌지 않았는지 확인한다.

브라우저는 서버와 TLS핸드쉐이크를 사용하여 인증을 한다.
HTTPS는 HTTP + TLS 보안 계층이다.

 

ACM을 통해 SSL인증서 발급받기

 

CloudFront 설정 시 넘어갔던 SSL인증을 해보겠다.

먼저 배포된 CloudFront에 들어가서 편집을 눌러준 후 인증서요청(Request certificate)를 선택한다.

 

인증서 유형에서는 바로 다음을 선택한 뒤 도메인 이름에 우리가 구매했던 도메인 이름을 적어준다.

그 후 요청을 선택하여 마무리 해준다.

 

그리고 같은 방식으로 인증서를 하나더 만들어줘야 하는데 이번에는 도메인 이름 앞에 와일드카드를 추가해서 만들어준다.

그러니까 *.petlog 로 넣어준 뒤 만들어주면 된다.

 

인증서를 신청한 뒤 Route53에서 인증서를 타고 들어오게 하기 위해 인증서에 대한 DNS레코드를 생성해준다.

 

 

시간이 조금 지나면 상태가 발급됨으로 변한다!

그리고 Route 53의 호스팅영역을 보면 CNAME이 만들어진 것을 볼 수 있다.

이 값을 가지고 가비아에서 DNS 설정을 해주어야 한다.

 

 

다시 가비아로 돌아가서 가비아 등록 도메인 > DNS 설정

 

 

레코드 수정 > 레코드 추가

타입에 CNAME, 호스트에는 * , 값/위치에는 Route 53 호스팅영역의 CNAME값을 넣어주고 저장한다.

그리고 값/위치의 CNAME값 마지막에 점(.)을 붙여줘야한다.

 

발급된 인증서 CloudFront에 적용하기

 

CloudeFront에서 설정 편집을 눌러준 뒤 인증서 요청에서 우리가 만든 *.로 시작하는 인증서를 선택해준다.

그리고 대체 도메인도 추가해줘야하기 때문에 항목 추가를 선택하고 우리 도메인 이름을 적어준다.

왜 갑자기 영어로 나오는지는 모르겠다,,

 

 

✋ 배포 순서 6. 다시 Route 53,,,

호스팅영역에 CloudFront에 사용할 도메인 등록하기

 

반갑네 Route 53,,

호스팅 영역 > 내가 만든 호스팅 선택 > 레코드 생성 선택

 

 

별칭을 확성화해서 CloudFront 배포에 대한 별칭을 선택하고 아까 만들었던 CloudFront를 선택하여 레코드를 생성한다.

 

 

정상적으로 레코드가 생성된 모습! 

 

배포가 완료되었고 우리가 설정한 도메인으로 접속하면 이렇게 성공적으로 뜬다! 🥳🥳🥳

그리고 HTTPS 배포했기때문에 자물쇠가 잘 걸려있는 것 까지 확인이 되었다.

 

이렇게 프론트도 처음부터 끝까지 한 사이클을 모두 돌려보았다.

물론 CI/CD가 남았지만 프로젝트 끝이 보이는 것같아서 너무 기쁘고,

그보다 더 기쁜 건 얻어가는 게 많아서 너무 만족스럽다.

 

내가 원했던 프론트의 동작방식 그리고 프론트와 백의 HTTP 데이터 전송 방식과 흐름을 이해할 수 있는 시간이였다.

남은 프로젝트도 더 화이팅이다! 아자잣