Reactjs/nextjs

Vercel에 Namecheap 도메인 설정 및 연결

志者必得 2024. 1. 24. 10:32

 

Nextjs를 통해서 Vercel에 배포를 하게 되면 도메인이 필요한데 가장 싸게 구입할 수 있는 곳이 Namecheap이라고 생가합니다. 이번에도 간단한 프로젝트를 진행하기 앞서서 도메인을 하나 사서 Vercel에 배포할 프로젝트 도메인 연결을 해보려고 합니다. 먼저 도메인을 구입하기 위해서 Namecheap으로 이동해서 원하는 주소를 한번 찾아 보겠습니다.

 

 

정말 좋은 도메인 이름인데 아직 아무도 등록하지 않았고 1년에 만 사천원 정도 합니다. 이제 결제를 해주고 연결하는 방법을 본격적으로 알려드리겠습니다.

먼저 시작하기에 앞서서 Vercel에 이미 프로젝트가 있고 계발을 해왔던 것을 전제로 시작하겠습니다. 일단 프로젝트를 선택해서 Setting으로 가봅시다.

 

namecheap 도메인을 연결 하려면 세팅에 도메인 텝으로 가면 됩니다. 

내가 앞서 구입한 도메인을 입력하고 Add 선택해 줍니다. 그러면 아마 기존에 있던 Nameservers가 맞지 않거나 Invalid Configuration이라고 볼 수 있습니다. 가장 간단한 방법은 Nameservers를 선택 해준다음 Nameservers를 사용할 수 있게 설정 버튼을 누르면 아래와 같이 나오는데 이 정보를 namespace 사이트에 추가 해주면 됩니다.

 

위에 사진과 같이 자신이 원하는 도메인 주소를 클릭한 다음 Domain을 선택하고 아래 보이는 NAMESERVERS를 선택한 뒤에 Custom DNS를 선택해 줍니다. 그러면 앞에서 본 정보와 같이 2개를 입력해야 되는데 순서대로 입력하고 체크마크를 선택해서 저장해 줍니다.

저장을 하고 아무 문제가 없다면 위에 보이는 것처럼 Vercel이 알아서 체크를 하면서 업데이트를 합니다. 다된것 처럼 보여도 최대 48시간 까지 걸릴 수 있으니 바로 안 되더라도 조금 기다려 보는 것이 좋습니다.

 

이제 도메인을 연결이 성공적으로 끝났다면 Google Search Console에 가서 내 사이트가 구글검색에 노출 될 수 있게 등록을 하고 Sitemap.xml을 올려주는 것이 좋습니다.

 

먼저 다시 도메메인 페이지로 가서

 

도메인 레코드에 Type을 TXT로 설정 해준 다음 다음과 같이 

 

구글에서 복사해 온것을 그대로 붙여 넣기를 한다음에 Add 버튼을 누르고 저장이 완료 되었다면 바로 Verify를 누르면 됩니다.

 

이제 마지막으로 사이트맵 페이지로 가서 자신에 sitemap.xml 주소를 넣으면 완료가 됩니다.