좌충우돌 1인 개발기
← 목록으로
AI와 1인 개발하기

Vercel에 도메인 연결 및 네이버 구글 연동

전 글에 이어집니다.

AI와 Vercel 직접 배포해본 과정

1. 도메인 연결

호스팅케이알 화면2

지금 이 화면은 이미 연결을 어느정도 한 시점의 이미지이고, 처음에는 비어있습니다.

Vercel로 배포를 했지만 도메인을 따로 또 구매하는 이유는 도메인이 있으면 추후에 Vercel을 유료로 올리든 호스팅을 옮겨도 글 주소가 그대로 남아 귀찮은 일이 없어 구매하는 길을 택했습니다.

우선 도메인으로는 호스팅케이알로 구매했습니다.

DNS 레코드 관리만 사용합니다.

먼저 간단하게 설명하자면, 새 레코드 추가를 통해서 유형을 선택하고 이름을 넣어 값을 추가합니다. 이 또한 AI가 안내해줘서 어렵지 않게 진행했습니다.

지금 화면에 보이는 2개의 값은 도메인 연결을 위한 설정입니다. (아래에서 설명하겠습니다.)

1년 구독제고 비용은 15000원 쯤 되었습니다.

2. Vercel 연동

Vercel 페이지에 들어가 왼쪽 카테고리에 Domains 로 들어가면 이런 화면이 나옵니다.

도메인 창
도메인 연결을 위한 설정

처음엔 3번째 값만 보이실겁니다. 그건 냅두고 위처럼 1~2번째 목록을 추가해주면 됩니다.(호스팅케이알 도메인 연결) 3번째껀 Vercel에서 기본으로 주는 도메인입니다.

받은 도메인에 www를 추가한거와 www가 없는 거 2개를 추가하면 됩니다. 오른쪽 위에 Add Existing 버튼을 누르면

도메인 추가 창
추가하는 창입니다.

검색창에 제가 말한 2개를 각각 하나씩 추가해줍니다. ex) www.domain.com, domain.com

www는 대표로 두고, www가 없는 건 이 도메인을 사용하면 www가 있는 도메인으로 넘어가게끔 해줍니다.

추가하시면 위에 이미지처럼 새로운 2개의 값들이 보이실 겁니다. 그 값들을 호스팅케이알에 DNS 레코드 관리에 추가해주면 됩니다. 각각 A, CNAME 유형으로 보시면 됩니다

A 는 IP 형태의 값이고, CNAME 는 도메인 형태의 값입니다.

호스트 이름은 A는 @, CNAME는 www 로 하시면 됩니다. 값은 Vercel에서 받아온 값 그대로 넣어주면 됩니다.

TTL 은 기본값 그대로 사용합니다.

처음엔 빨간 표시가 뜨면서 연결되기까지 대기 시간을 가지게 됩니다. 시간은 최소 몇 분에서 몇 시간이 걸린다고 안내받습니다.

저는 30분 정도 걸렸습니다.

3. 사이트맵 업데이트

분명 연동을 해서 새 도메인으로 잘 나왔지만 사이트맵은 옛 주소(Vercel)로 떴습니다. AI와 의논해보니 SITE_URL 이란 환경변수를 등록해줘야 했습니다.

Environment Variables 화면
Environment Variables 화면

잠시 설명하자면 순서대로 네이버 소유 확인을 위한 설정 지금 해야할 설정 나머지 2개는 이전에 supabase 배포를 위해 적용한 설정들입니다.

Domains 위에 카테고리 Environment Variables 로 이동합니다. 그 후 우측 상단에 Add Environment Variables를 눌러 추가해줍니다.

Add Environment Variables 화면
Add Environment Variables 화면

key 는 SITE_URL을 넣어주고 value 는 https://www.자신이받은도메인 을 넣어주고 Environment는 Production을 선택합니다. 그 후 Save 를 눌러줍니다.

그러면 중앙화면에 추가되는 것을 확인할 수 있습니다. 그 후 Production 을 다시한번 배포해줍니다.

4. Vercel 재배포

환경변수를 추가하게 되면 무조건 다시 배포해야 합니다. 안 그러면 적용이 되지 않은 채 진행됩니다.

배포목록
production 확인

좌측 카테고리에 Deployments 에 이동해서 우측 상단에 점 세개 있는 버튼을 클릭합니다. Create Deployment 를 클릭합니다.

재배포를 위한 창
production을 눌러줍니다

저는 production을 눌러야 실제 사이트가 재배포 되니 production을 클릭합니다. (!중요: 저는 production 브랜치로 운영 배포가 되기 때문에 이렇게 설정합니다.) 저처럼 하는게 아니라면 무난하게 main 으로 하셔도 됩니다.

잠시 뒤 Create Preview Deployment 버튼이 활성화됩니다.

재배포를 위한 창
우측 아래 버튼 눌러줍니다.

활성화되면 Deploy to Production 에 주황색 버튼으로 바뀝니다.

그 버튼 눌러주면 새로운 배포가 됩니다. 그 후 받은도메인/sitemap.xml을 열어 보면 안의 주소가 새 도메인으로 바뀐 것을 확인할 수 있습니다. 위에도 설명했지만, 저처럼 하시는게 아니면 main 으로 진행하시면 됩니다.

5. 구글 및 네이버 연결

마지막으로 구글 서치콘솔 및 네이버 서치어드바이저를 연결합니다.

구글 서치콘솔

먼저 내 사이트라는 걸 확인(소유 확인)하고, 그다음 사이트맵을 제출합니다.

서치콘솔에서 속성 추가를 누르면 도메인과 URL 접두어 두 가지가 나옵니다. 저는 도메인을 골라 www 없이 받은도메인을 넣었습니다. 도메인 방식은 www가 있는 주소와 없는 주소를 한 번에 등록할 수 있고, 다시 배포할 필요도 없습니다.

그러면 서치콘솔이 google-site-verification=으로 시작하는 TXT 값을 보여 줍니다. 이 값을 위에서 봤던 호스팅케이알 DNS 레코드 관리에 유형 TXT, 이름 @로 넣고, 서치콘솔로 돌아와 확인을 누릅니다.

구글 서치콘솔
구글 사이트맵 적용

확인이 끝나면 왼쪽 Sitemaps 메뉴에서 https://www.받은도메인/sitemap.xml을 넣고 제출을 눌러 줍니다. 이 과정은 AI의 안내를 받으며 진행했습니다.

네이버 서치어드바이저

네이버는 구글과는 다르게 사이트맵과 RSS 를 추가해줘야 합니다. 홈페이지를 들어가 우측 상단에 웹마스터 도구 버튼을 눌러줍니다.

https://www.받은도메인을 입력해주고 추가해줍니다. 사이트를 추가하면 소유 확인 창이 바로 뜹니다. 저는 HTML 태그 방식을 골랐습니다.

<meta name="naver-site-verification" content="…"> 같은 한 줄이 나오는데, 여기서 content 따옴표 안의 값만 복사합니다. 이 값을 Vercel 환경 변수에 Key NAVER_SITE_VERIFICATION으로, Production에 넣습니다. 그다음 위 4번처럼 다시 배포하고, 네이버로 돌아와 소유확인을 누릅니다.

네이버 서치어드바이저
네이버 사이트맵 적용

소유확인이 되면 아래에 추가된 사이트를 클릭해줍니다.

네이버 서치어드바이저
네이버 사이트맵 적용2

거기에 들어가 왼쪽 카테고리에 요청을 눌러서 RSS 제출에는 https://www.받은도메인/rss.xml, 사이트맵 제출에는 https://www.받은도메인/sitemap.xml 을 제출해줍니다.

호스팅케이알 화면
호스팅케이알

전부 다 연결하고 제출하고 난 후 호스팅케이알 화면입니다.

이렇게 각각 제출해주면 바로 되는게 아니라 며칠동안 제 블로그 사이트를 검수하는 기간을 가집니다.

지금까지 블로그 이용을 위한 도메인 구매 및 구글, 네이버 연결에 대해 글을 작성했습니다. 이 글이 도움이 되었으면 좋겠습니다.

#Vercel#도메인 연결#구글 서치콘솔#네이버 서치어드바이저#DNS 설정#블로그 배포