Vercel에 도메인 적용하는 방법

JuneTein

July 10, 2023

Next Js 프로젝트를 Vercel에 Deploy하고 Domain을 구입하여 입히는 과정입니다. 저는 도메인을 기존에 사용하던 호스팅Kr에서 도메인을 구입하였고, Vercel에다가 제가 구입한 도메인을 입혔습니다. 먼저 말씀드리고 싶은 것은 시간 여유를 두셔야 한다는 것입니다. 바로바로 적용되지 않습니다.

Vercel에 도메인 등록 하는 법

vercel에 로그인하여 Domain탭을 클릭하여 들어갑니다.

vercelDomain {caption: vercel -> Domain}
vercel -> Domain

화살표가 가리키는 곳에다가 구입한 도메인 주소를 입력합니다. http, https 제외하고 도메인명만 입력하고 Add버튼을 누릅니다. 그 다음에 리다이렉트 설정이 나오는데 그냥 추천하는데로 클릭하고 넘어갑니다. 이부분은 나중에 변경할 수 있습니다.

vercelDomain {caption: vercel 설정}
vercel 설정

그러면 이제 Vercel에서 주는 DNS레코드가 나옵니다. 위 빨간 네모상자안에 있는 주소와 내가 구입한 도메인 회사에 연결을 시켜줘야 합니다.

호스팅kr에서 설정하기

호스팅kr에서 도메인을 구입하고 도메인 관리창으로 넘어갑니다. 여기서 DNS레코드라는 것을 설정 해줘야 vercel에 deploy된 내 사이트를 연결할 수 있습니다.

vercelDomain {caption: vercel DNS record}
vercel DNS record

구입한 도메인에 DNS레코드 설정화면으로 넘어갑니다. 꼭 호스팅kr이 아니더라도 다른 많은 도메인 업체도 비슷하게 설정을 하면됩니다.

vercelDomain {caption: vercel 설정}
vercel 설정

레코드 추가버튼을 누른 후 빨간 화살표가 있는 부분에 아까 Vercel에서 알려준 레코드를 입력 해줍니다. 유형과 이름, 그리고 값이 틀리면 안됩니다. TTL은 조금 달라도 상관없습니다.

이렇게 저장하고 Vercel에 돌아가면 SSL을 알아서 발급하고, 도메인과 내 사이트를 연결 해줍니다. 여기서 시간이 오래 걸릴 수 있습니다. 저는 2시간 이상 소요되었고, 호스팅kr에서는 최대 24시간까지 걸릴 수 있다고 말하고 있습니다.

vercelDomain {caption: vercel 설정}
vercel 설정

위 화면처럼 나오면 모든 연결이 완료된 것입니다. Vercel에서 처음에 무료료 준 도메인은 Edit버튼을 눌러 새로 연결한 도메인으로 리다이렉트 해주면 됩니다.

도움이 되셨으면 좋겠습니다.


참고

[Next Js] sitemap 만들고 업로드 하는 방법

[Next Js] Error with permissions-Policy header

[Next Js]a title element error

kakao_share_button

카카오톡 공유하기 →