Vercel 앱 GoDaddy 도메인과 연결하기

Vercel ↔ GoDaddy 도메인 연결

개요

최근에 Next.js 공부 를! 시작하면서 Next.js 앱을 만들어보고 있는데, 이게 Vercel 에서 만든 프레임워크인 만큼 Vercel 로 배포하는 게 착 잘 붙는다

현재 블로그와 몇몇 내가 만든 앱에 붙어있는 chichoon.com 도메인은 GoDaddy에서 구매했기 때문에 도메인을 연결하려면 고대디 관리 툴을 사용해 주어야 한다

사실 GitHub Pages 나 Vercel이나 Netlify나 다 연결 방식이 고만고만하긴 하지만 조금씩 달라서 정리를 해줬어야 하는데 버셀만 이제 겨우 정리하게 됐다 (게으름)

과정

1. GoDaddy에서 도메인 구매

이미샀지롱

여기서 구매를 한 이유는… 그냥 한국 사이트보다 외국 사이트에서 사는 게 더 쌀줄 알았음

2. Vercel 에 프로젝트 배포

이미 배포했지롱

버셀은 레포지토리 연결만 하면 바로 배포돼서 참 쉽다

특히 Next.js 는 본인들이 만든 프레임워크라 그런가 별다른 package.json 설정 없이도 알아서 싹 배포 해준다

3. Vercel - View Domains

프로젝트에 들어가서 우측 상단쯤에 있는 View Domains 를 클릭한다

 

사용하고자 하는 도메인을 입력하고 Add 를 누르자

 

헉 설정이 잘못됐단다

하지만 정상적인 현상이다

당황하지 말고 CNAME 또는 네임서버를 지정하러 가자

4. GoDaddy - 도메인 설정

GoDaddy 측에서 나의 비즈니스 - (지정하려는) 도메인 - 도메인 설정에 들어가자

 

DNS 탭으로 들어간다

 

신규 레코드 추가 버튼을 클릭하여 DNS 레코드를 추가하자

내가 참고한 자료는 A 레코드를 추천하지만 이건 2021년 기준인가 보다

지금은 Vercel 측에서 CNAME을 추천하고 있으므로 CNAME 을 추가해 볼 것

 

아까 설정한 도메인 (about-me.chichoon.com 이었으므로 about-me) 을 입력하고, 값에는 Vercel 에서 알려준 값을 붙여넣기한다

TTL은 적절한 시간으로 지정하고, 다 적었다면 저장하기를 누르자

5. Vercel - Configuration 확인

CNAME 을 통해 도메인을 잘 연결했다면 아까와 달리 Valid Configuration 이 파랗게 나올 것이다

 

연결된 도메인으로 (비루한 웹사이트가) 잘 렌더링되는 것을 볼 수 있다

---

참고 자료

How to Set up GoDaddy Domain with Vercel