[블로그 만들기 #2] Vercel 블로그에 개인 도메인을 연결해보자 (feat. Cloudflare)

들어가며

이전 포스팅에서 30분만에 블로그 배포하기를 시도해봤습니다.(디자인은 일단 버리고)

xxxx.vercel.app 도메인이 만들어지고 인터넷에서 접속이 가능하지만 그래도 명색이 개인 블로그 운영하는 개발자이고, 서울 아파트에는 등기 못올려도 인터넷 상에서는 개인 도메인으로 등기 한번 올려봐야하지 않을까요?

바로 도메인 구매 후 Vercel 블로그를 개인 도메인에 연결해보도록 합시다. 렛츠고.

Cloudflare? AWS?

처음에는 익숙한 AWS Route53으로 진행하려고 하였지만 .com 도메인은 AWS에서 최소 $15부터 시작하는데 한푼이라도 아끼고자 우리 인터넷의 수호신 Cloudflare를 이용해서 진행하기로 결정하였습니다.

개인적으로

1. 얼마전에 코엑스에서 진행한 AWS Summit Seoul 2025에서 Cloudflare 부스 잠깐 구경했는데 담당자분이 친절하셔서 기억에 남기도 했고
2. AWS의 데이터 전송료 비싸다고 까면서 송신료 없는 객체 스토리지 서비스인 R2를 런칭하는 Cloudflare의 철학도 멋있고
3. 전 세계 단위로 사업하는 회사인데, 뭔가 Fancy함
4. 무엇보다 도메인 등록 기관에서 부과하는 비용만 청구하는 Cloudflare가 다른 회사들에 비해 저렴함.

이런 이유들도 있었던 것 같습니다.

Cloudflare가 동네 구멍가게도 아니고 나중에 연장 수수료로 장난치지 않을거라는 믿음과 하루 천만 방문자, 커스텀 댓글 서비스, 자체 CMS, 로그 분석 같이 추가 기능들이 필요해지면서 AWS와의 연동이 중요해지는 시점이 오면(근데 이런 시점은 안올 것 같습니다) 그때 도메인 이전하면 되니까 우선은 저렴하고, 안정적이고, 네트워크 속도 빠른 Cloudflare를 이용해서 바로 도메인 등록해보도록 하겠습니다.

Cloudflare 도메인 등록하기

우선 당연한 이야기지만 Cloudflare 회원가입 후 원하는 도메인 검색해서 사용 가능한지 확인해주시고

쿨하게 Automatic renewal 체크 후 $11 결제 해줍니다.(나중에 도메인 필요 없어지면 해지 가능합니다.)

네임서버 등록 잘 되었는지 개발자답게 nslookup으로 확인 한번 해주고 이어서 Vercel에서 도메인 연동하도록 하겠습니다.

nslookup -type=ns day1swhan.com

Non-authoritative answer:
day1swhan.com	nameserver = dave.ns.cloudflare.com.
day1swhan.com	nameserver = chin.ns.cloudflare.com.

Authoritative answers can be found from:
chin.ns.cloudflare.com	internet address = 108.162.192.84
chin.ns.cloudflare.com	internet address = 172.64.32.84
...
dave.ns.cloudflare.com	has AAAA address 2803:f800:50::6ca2:c16d
dave.ns.cloudflare.com	has AAAA address 2a06:98c1:50::ac40:216d

Vercel에 도메인 연동하기

이제 Vercel Project - Settings - Domain 탭 들어가서 기존 배포 프로젝트에 방금 구매한 개인 도메인을 연결해보도록 하겠습니다.

셋방살이중인 xxx.vercel.app 도메인 확인 후 위에 Add Domain 클릭

도메인도 구매했는데 나름 블로그라는 정체성을 들어내줄 수 있게 서브도메인으로 blog 설정해주고 배포되어있는 Production 환경이랑 연동해준 후

DNS를 설정해줘야하는데, 저희는 Vercel에서 구매한 도메인이 아니니까 Continue manually 클릭하면

어떻게 DNS 설정해줘야하는지 친절하게 알려줍니다. 이제 DNS 레코드 추가해주기 위해서 다시 Cloudflare로 돌아간다음

Dashboard - DNS - Record - Add Record 클릭 후

• Type: CNAME (dns서버가 어느 ip주소로 가야하는지 vercel에게 물어보라고 해야하니까)
• Name: blog (위에서 저희가 선택한 서브도메인)
• Target: cname.vercel-dns.com (Vercel이 알려준 레코드)
• Proxy status: DNS Only (중요: 개인 도메인 연결하면 Vercel에서 SSL 인증서를 자동으로 발급해주는데, Proxy가 켜져있으면 소유자 인증 오류나니까 꼭 꺼주셔야 합니다.)

다시 Vercel로 돌아와서 I've added my records 버튼 눌러서 DNS 레코드 업데이트 했다고 알려주고 조금 기다리면

알아서 refresh 하면서 도메인 검증 후 완료되었다고 알려줍니다.

웹에서 확인하기전에 나름 개발자답게 nslookup, curl 요청 한번 날려서 잘 나오는지 확인 한번 해준 후에

nslookup blog.day1swhan.com

Server:		168.126.63.1
Address:	168.126.63.1#53

Non-authoritative answer:
blog.day1swhan.com	canonical name = cname.vercel-dns.com.
Name:	cname.vercel-dns.com
Address: 66.33.60.193
Name:	cname.vercel-dns.com
Address: 66.33.60.34

curl -LI blog.day1swhan.com

#http 요청도 자동으로 https 리다이렉트 해주네요.
HTTP/1.0 308 Permanent Redirect
Content-Type: text/plain
Location: https://blog.day1swhan.com/
Refresh: 0;url=https://blog.day1swhan.com/
server: Vercel

HTTP/2 200
...
server: Vercel
x-vercel-cache: HIT

브라우저로 접속해보시면 도메인 연결 잘 된거 확인할 수 있습니다.

추가 팁

하루 방문자 한명 있을까 말까한 블로그여도 나름 루트 도메인으로 접근하는 사용자들을 블로그 홈페이지로 우아하게 redirect 시켜주기 위해서 Vercel 설정 몇개 바꿔주겠습니다.

저희의 목표는 이렇게 두개입니다.

• www.day1swhan.com ⮕ blog.day1swhan.com
• day1swhan.com ⮕ blog.day1swhan.com

www 도메인은 먼저 진행하면 위에서 blog 서브도메인 등록한 것과 동일하게 Vercel Project - Domain - Add domain 클릭 후

• Vercel: Production 환경 연결이 아닌, Redirect 옵션에서 301 Moved Permanently 선택 후 적용.
• Continue manually 이용해서 레코드 정보 확인
• Cloudflare:
  • Type: CNAME
  • Name: www
  • Target: cname.vercel-dns.com
  • Proxy status: DNS Only 레코드 추가

이제 루트 도메인 연결이 남았는데, 주의할점은 루트 도메인은 DNS 레코드 추가할 때 CNAME이 아니라 A 레코드로 처리해줘야 합니다.

방금 진행한것과 동일하게

• Vercel: Project - Domain - Add domain - Redirect 옵션에서 301 Moved Permanently 적용
• Continue manually 이용해서 레코드 정보 확인
• Cloudflare
  • Type: A
  • Name: @(알아서 루트 도메인으로 변경됩니다.)
  • Target: 76.76.21.21(Continue manually에서 알려준 ip주소)
  • Proxy status: DNS Only 레코드 추가.

최종 설정 완료된 cloudflare 화면입니다.

최종 설정 완료된 vercel domains 설정 화면입니다. (기존에 존재하던 xxx.vercel.app 도메인은 이제 쓸모없으니 바로 삭제했습니다.)

마무리

이렇게 최대한 쉽고, 빠르게 못생긴 xxx.vercel.app 도메인에서 개인 도메인으로 변경하는 방법을 알아봤습니다.(약간의 자본을 들여서)

이제 인터넷 상에서라도 셋방살이를 넘어 개인 도메인으로 등기 올린거 축하하면서 열심히 글 작성하고, 하루 1000만 방문자 오면 어떻게 처리할지 행복한 망상을 하면서 글 마무리 하겠습니다.

다음 포스팅에서는 인터넷에서 도메인 주소 등기 올렸으니 전입 신고를 하기 위해서 구글 서치 콘솔(Google Search Console)에 블로그 등록하고 인증하는 방법을 알아보도록 하겠습니다.