[ Netlify + 가비아] 도메인 연결부터 SSL(https) 인증까지

내앞의냐옹이·2025년 1월 24일

DNS Gabia https netlify ssl 가비아 네임서버 도메인 연결 커스텀 도메인

🔥 목표

"리액트로 개발한 프로젝트를 netlify에 배포하고 커스텀 도메인을 연결해 https를 설정한다."

나의 경우, netlify로 배포는 해보았지만 커스텀 도메인을 구매해 연결해본 적은 없어서 이 과정에서 헷갈렸던 부분들을 한번에 정리해보고자 한다. 설명은 netlify 기본 배포와 가비아에서 도메인을 구매한 상태를 전제로 한다.

🚀 순서

netlify 기본 배포 - example.netlify.app
가비아에서 도메인 정보 확인- example.com
도메인 연결
3-1. netlify에서 서버 IP 주소, 네임서버 정보 복사
3-2. 가비아에 DNS 설정, 네임서버 레코드 입력
netlify에서 https 적용 대기

📌 1. netlify 기본 배포

먼저 아래와 같이 https://example.netlify.app으로 기본적인 netlify 배포가 된 상황에서부터 시작하도록 하겠다.

📌 2. 가비아에서 도메인 정보 확인

가비아에서 도메인을 구입했으면 먼저 가비아 홈페이지에서 My 가비아 > 이용 중인 서비스 > 도메인 > (사용하려는 도메인) 관리 버튼을 클릭해 해당 도메인 관리 페이지로 들어간다.

전체 도메인 메뉴 내 도메인에 대한 정보들이 나오는데 여기서 아래로 스크롤 하면

네임서버와DNS 정보메뉴를 볼 수 있다. 이 두가지가 우리가 netlify에서 정보를 확인해 입력해줘야 하는 부분이다.

📌 3. 도메인 연결

이제 다시 Netlify로 간다.

Domain management로 가서 Production domains의 Add a domain 버튼을 누른다.

Custom domain or subdomain에 내가 구매한 도메인 example.com을 입력하고 Verify 버튼을 누른다.

그럼 이와 같이 'example.com is already registered.'라는 문구가 나올 수 있는데 무시하고Add a domain 을 눌러준다.

그러면 example.com과 www.example.com이 도메인 목록에 추가되는데 아직 가비아에 정보를 등록하지 않았기 때문에 Awaiting External DNS 상태로 뜬다.

📌 3-1. netlify에서 서버 IP 주소, 네임서버 정보 복사

여기서 example.com의 Awaiting External DNS를 클릭하면 이와 같은 화면이 뜬다. 이 중 빨간색 박스 안에 있는 정보를 복사해서 메모장 등에 저장해둔다. 이는 추후 가비아에 DNS 레코드로 추가할 서버의 IP 주소이다.

그 다음엔 example.com에서 option을 누르고 Set up Netlify DNS로 이동한다.

Verify - Add domain - Continue 순서로 쭉 누르며 진행한다.

그럼 이렇게 4개의 name 서버 정보가 나온다. 이 4개 값을 복사해서 메모장 등에 저장한다.

한 번 셋팅해뒀으니 이 값은 나중에 Options > Set up Netlify DNS에서 다시 확인할 수 있다.

3-2. 가비아에 DNS 설정, 네임서버 레코드 입력

두 가지 값을 확인 했으면 이제 다시 가비아로 간다.

DNS 설정을 먼저 해준다.DNS 정보 > 도메인 연결 > 설정을 클릭하면 여기로 이동하는데 여기서 example.com에 체크를 누르고 DNS 설정 버튼을 클릭한다.그럼 레코드를 설정할 수 있는 화면이 나오는데 2개의 레코드를 설정해준다. 첫 번째 A 레코드는 아까 netlify에서 복사한 IP 주소를 넣으면 된다.
1. A @ 12.3.45.6
2. CNAME www example.com.

A 레코드는 도메인 주소와 서버의 IP 주소가 직접 매핑시킨다. 사용자가 example.com을 url에 쳐서 접속하면 실제로는 netlify에서 배포한 IP 서버로 연결 된다. 따라서 여기에는 example.netlify.app과 같은 텍스트 도메인을 넣을 수 없고 IP 값만 넣어줘야 한다.
@는 앞에 www.example.com이나 api.example.com 등을 붙여 만든 서브도메인이 아니라 example.com 자체를 도메인으로 사용할 때 넣어준다. 가비아에서 호스트값을 비운 채로 레코드 등록이 안 되기 때문에 example.com 앞에 아무것도 안 붙이고 싶을 때는 @를 넣어주면 된다.
CNAME 레코드는 직접 IP 주소로 이동하는 것이 아니라 다른 등록된 서버로 연결해준다. 따라서 여기에서 example.netlify.app과 같은 텍스트 도메인을 넣을 수 있으며 보통 www.example.com으로 접속해도 example.com로 접속되도록 할 때 많이 사용한다.
CNAME 레코드를 등록할 때 주의할 점은 CNAME 타입의 값/위치는 점(.)으로 끝나야 한다는 것이다. 그래서 이 값을 example.com으로 넣으면 아래와 같은 오류가 나기에 example.com.과 같이 끝에 .을 붙여서 입력해주어야 한다.

그 다음 네임서버 > 설정에 들어가면
디폴트 값으로 1~3차까지 가비아의 네임서버가 들어가 있는 걸 볼 수 있다.
여기에 아까 복사해두었던 netlify의 네임서버 4개 정보를 1~4차에 넣어준다.

4. netlify에서 https 적용 대기

이제 다시 netlify로 돌아가 Domain management > Production domain를 보면 ✅ Netlify DNS가 뜨는 걸 볼 수 있다. 그리고 아래로 스크롤 하면

https 설정에 대한 부분에서 Waiting on DNS propagation가 뜨면서 옆에 톱니바퀴 모양이 돌아가는 걸 볼 수 있다. 이 상태로 1시간 정도 기다리면 자동으로 https 설정이 된다.

아래 Verify DNS configuration 버튼은 뭔가 해서 눌러봤는데, 이미 ✅ Netlify DNS가 되어서 그런지 더 건드릴 건 없고 기다리면 되는 것 같다.

이 상태로 1시간 정도 기다리니 어느 순간 새로고침 했을 때 https 설정이 완료되었다고 뜬다. 경험상 저렇게 떠도 실제 https://example.com에 들어갔더니 연결이 안 되는 경우도 있는데, 10분 정도 지나니 정상적으로 접속이 가능해졌다. 반영하는데 여러모로 시간이 좀 걸리는 듯하니 조급해하지 말고 기다리면 될 듯하다.