버셀로 간단하게 배포는 여러번 해봤지만, 그럴 때마다 도메인에 .vercel.app 이 붙곤 합니다.
하지만 실제로 사업 혹은 창업을 준비하는 사이트의 경우 .verel.app 이라는 도메인을 그대로 사용하면... 보기 좋진 않죠.
동물 병원 리뷰를 중심으로 하는 반려인 커뮤니티 프로젝트를 진행하며, 도메인을 구매하고 연결한 과정을 정리해보고자 합니다.
1. 도메인 구매하기
우선 도메인을 구매해야 합니다. 도메인별로 가격은 다르며, 한번 사면 영구적으로 유지할 수 있는게 아니라 특정 기간동안 해당 도메인을 대여해서 사용하는 개념으로 이해하시면 됩니다. 그래서 사용 기한에 따른 도메인 견적서 비용이 달라집니다.
도메인은 도메인 구매 대행 사이트를 통해 구매하시면 되는데, 크게 2가지 방식이 있습니다.
1. 1 ) AWS Route 53 으로 구매하기
route53에서 도메인을 구매하면, 도메인이 자동으로 등록된다는 장점이 있습니다.
그러나, 제공하는 TLD 의 타입이 한정적이에요. 예를 들어 .kr 이나 .co.kr 과 같은 TLD는 사용하실 수 없습니다.
(https://docs.aws.amazon.com/ko_kr/Route53/latest/DeveloperGuide/registrar-tld-list.html)
1. 2 ) 가비아로 구매하기
가비아는 한국 사이트라, 한국인이 쉽게 도메인을 구매하기 좋은 DNS 대행 서비스입니다.
(정확히는 route 53과 달리 가비아는 외부 호스팅 업체라고 보시면 됩니다.)
가비아는 .kr 이나 .co.kr 도 지원해주지만 도메인을 구매 후, Route53에 따로 등록해주는 과정을 거쳐야 합니다.
그런데 버셀을 사용한다면, 딱히 등록해주는 과정이 없어도 돼요!
2. 버셀에 도메인 연결하기
구매한 도메인을 등록해줘야합니다. 가비아 DNS 관리 사이트로 이동해서, 타입에 따른 호스트값, 값, TTL(time to live) 같은 걸 저장해둡니다. 아래와 같이요!

위와 같이 값을 저장하기 위해서는

처음에 버셀에 구매한 도메인을 연결하면 뜨는 Invaild Configuration 과 함께 뜨는 A 와 CNAME 값들을 복사해오면 됩니다! (확인하면 됩니다) - 그리고 recommended 를 클릭해서 domain을 연결하면 됩니다.
여튼 그렇게 가비아에서 DNS에 잘 등록해두고, 버셀 도메인 refresh를 진행하면 아래와 같이 Valid 로 변하고 연결이 성공합니다!

또한 필요에 따라, 보기 좋지 않은 .vercel.app은 기본적으로 구매한 도메인으로 리다이렉트 시켜버리면 됩니다(Edit 버튼 누르고)
https://m42-orion.tistory.com/140
https://mnxmnz.github.io/frontend/deploy-web-frontend-project-to-vercel/
https://www.chanwooyam.dev/series/next-blog/lD9yWotUTqpdmAqaCvux
'Develop > Frontend' 카테고리의 다른 글
| zod 유효성 검사에서 겪은 트러블 슈팅 (0) | 2025.02.04 |
|---|---|
| 배포를 위한 PAT (0) | 2025.01.18 |
| useCallback은 도대체 언제 사용하는게 좋을까? (0) | 2025.01.09 |
| pnpm 도입기 (왜 yarn berry가 아닌가?) (0) | 2025.01.03 |
| Web Socket을 도입하며 겪었던 트러블 슈팅들 (0) | 2024.12.31 |