Vercel에 커스텀 도메인 연결하기

이전 글에서 Vercel로 Next.js 프로젝트를 배포하는 방법을 알아보았습니다. 이번에는 배포한 프로젝트에 도메인을 연결하는 방법을 정리하였습니다.

Vercel 대시보드의 메뉴에 있는 도메인 화면으로 들어가 Add 버튼을 클릭합니다. Buy를 누르면 구매도 가능하지만 다른 곳에 비해 가격이 비싸므로 저는 타 도메인 업체인 호스팅케이알에서 구매한 도메인을 연결해보겠습니다.

도메인 연결을 원하는 프로젝트를 선택하고 CONTINUE 버튼을 누릅니다.

도메인이 연결되면 A Record 혹은 네임서버를 설정하라고 나옵니다. 저의 경우에는 호스팅케이알 사이트에서 DNS 레코드 관리에 A 레코드를 아래와 같이 추가하였습니다. DNS 레코드를 호스팅케이알에서 관리하기 위해서는 도메인 네임서버를 호스팅케이알 네임서버로 변경해야합니다.

일정 시간이 지나면 프로젝트 설정의 도메인에서 연결된 도메인을 확인할 수 있습니다. 파란색 체크박스가 나오면 도메인이 연결되었다고생각하시면 됩니다.

Edit 버튼을 누를 경우 각 도메인마다 다른 브랜치를 지정하거나, 리다이렉트를 설정할 수 있습니다. 만약 vercel.app 도메인으로 접속하면 연결한 도메인으로 이동하고 싶으면 리다이렉트로 설정하면 됩니다.