TOC
들어가며
목표
이번 블로그 마일스톤 목표가 도메인을 설정하는 거에요. 지금까지 vercel에 배포하면서 vercel.app으로 마치는 도메인을 계속 사용해오다보니 제대로 설정을 하고 싶었죠. 그런데 저는 블로그 뿐만이 아니라 포트폴리오나 개인 개발도 별도의 도메인을 두고 싶거든요. 그것마다 연 N만원의 금액이 들어간다면 도메인 사용 가격이 가랑비에 비 젖듯이 꽤 많이 나올 것 같더라고요. 그래서 좋은 방법을 고민하다가 "한 개의 도메인으로 여러 앱을 관리하기"에 도전해보게 되었어요.
대상
- 하나의 도메인으로 여러 앱을 관리하고자 하시는 분
- Vercel에 프로젝트를 배포하여 CI/CD를 관리하시는 분
- 가비아에 개인 도메인을 가지고 계시는/계실 분
- 싸게 도메인을 구매하고 싶으신 분
서브도메인
가장 먼저 접근한 건 서브도메인 방식이에요. 저는 회사에서 채용솔루션을 개발하고 있는데, 멀티테넌시(multi-tenancy)를 지원해요. 한 개의 앱으로 고객사마다 자기만의 사이트인 것처럼 사용하게 해준다는 개념인데, 저희 팀은 서브도메인 방식을 활용해 각 기업마다 다른 도메인처럼 사용할 수 있게 지원하고 있어요. 한 개의 도메인을 확보하더라도, 여러 도메인을 만들 수 있는 거죠. 바로 우리가 원하는 거에요.
예를 들면 이렇게 .recruiter.co.kr이라는 도메인만 가지고 있더라도 기업마다 다른 도메인처럼 검색과 별도 사용이 가능합니다. 이런 방식으로 접근해볼게요.
작업 과정
1. 가비아 - 도메인 확보
원하는 도메인을 가비아에서 구매해줍니다. 저는 huns-log인 제 블로그 이름부터 시작해서, huns라는 키워드로 확장해나가고 싶었어요. 그래서 huns.info라는 도메인을 구매했고, blog.huns.info, portfolio.huns.info 등으로 확장해 나갈 것입니다. 이번엔 블로그에 대한 것이므로 blog.huns.info를 등록하는 방법을 다루겠습니다.
2. Vercel - 도메인 설정
Vercel에서 프로젝트의 [Settings] - [Domains]에 진입합니다. 현재는 vercel에서 기본적으로 제공하는 도메인만 있어요. 여기서 원하는 서브도메인을 등록해볼게요. 저의 경우는 blog.huns.info겠죠.
그러면 이렇게 하나가 더 추가가 됩니다. 그런데 뭔가 이상해요. Invalid Configuration이라고 빨갛게 경고가 나오는데, 정상입니다.
DNS provider에게 정보를 제공하라고 하죠. 정보를 제공하러 가비아로 가볼게요.
3. 가비아 - 도메인 설정
구매한 도메인에 대한 정보는 My가비아에 들어가면 도메인 정보를 확인할 수 있어요.
[도메인 관리] - [DNS 정보] - [DNS 레코드 설정] 에서 [설정] 버튼을 클릭합니다.
아래 사진처럼 원하는 도메인에 대해 [설정] 버튼을 클릭합니다.
[DNS 설정] - [레코드 수정] 버튼을 클릭합니다.
DNS 레코드 수정 팝업모달에서 레코드를 추가해보겠습니다.
2번의 Vercel에서 보여진 정보를 그대로 잘 넣어보겠습니다.
잘 입력했다면 [확인] - [저장]을 클릭해 내용을 저장하고 팝업 모달을 끕니다.
4. 결과 화면
조금 시간이 지나 vercel 배포에서 기존 vercel.app 도메인처럼 blue check가 붙은 걸 확인할 수 있습니다.
실제 블로그에서도 이렇게 blog.huns.info 도메인으로 잘 호스팅이 되는 것을 확인할 수 있어요.
5. redirect
기존 ***.vercel.app 도메인을 계속 사용하고 있었다면, 새로운 도메인으로 redirect를 해줘야겠죠. 그래서 리다이렉트 설정 방법을 알아보겠습니다.
먼저 vercel의 Domain 설정 화면에서 기존 ***.vercel.app 도메인의 [Edit] 버튼을 클릭합니다.
그리고 아래처럼 설정을 변경해줍니다.
- Redirect to : (설정한 서브도메인)
- Status Code : 308 Permanent Redirect
이렇게 설정하면 ***.vercelp.app 도메인으로 진입하더라도 설정한 서브도메인으로 리다이렉트를 시켜줍니다.
다른 도메인 사이트
사실 가비아는 한국 사이트이고, 접근이 간편한 대신 도메인 가격이 조금 비싼 편이에요. 처음에 싼 가격에 이벤트를 하더라도 1년이 지나 갱신을 하려면 훅 뛰어버리는 금액을 확인할 수 있죠. 그래서 다른 도메인 사이트에서 도메인을 구매하고 적용하는 방법을 또 알아보겠습니다.
huns.info는 가비아로 구매했는데, 사실 블로그나 포트폴리오 같은 정보성 서비스에는 나쁘지 않지만, 프로젝트 서비스를 호스팅하기에는 조금 아쉬운 도메인이라 생각했어요. 그래서 보다 더 포괄적인 huns.site를 기준으로 한 번 조사해보겠습니다.
비교군 - 가비아
가비아는 huns.site의 경우, 첫 1년은 1,900원, 이후부터는 연 6만원의 금액이었습니다.
주의사항
도메인은 사이트마다 가격이 천차만별이니 많은 사이트를 돌아보며 원하는 금액의, 원하는 도메인을 얻어보세요.
그리고 사기 사이트들이 많아요. 사용중인 사이트, 즉 구매가 불가능할 도메인을 검색해보며 구매가 안 되는지 잘 확인하세요.(구매 불가능이 정상)
Namecheap
먼저 Namecheap이라는 도메인 구매사이트입니다.
| Year | Price |
|---|---|
| 1 year | $1.16 |
| 2 years | $9.34 |
| 3 years | $49.28 |
| 4 years | $72.94 |
| 5 years | $96.60 |
구매 금액은 이 정도였어요. 정확히 어떻게 가격을 따지는지 알 수 없지만, 특이한 방식으로 올라가네요. 2년까지 가격이 10달러 정도라면 매력적으로 보입니다.
Cloudflare
다음은 Cloudflare이라는 클라우드 제공 사이트입니다. 도메인 구매도 가능한 것 같네요.
아쉬운 점은 huns를 검색했음에도 불구하고 완전히 일치하지 않는 단어들에 대한 도메인까지 다 보여줘서 정확도가 낮아보였어요. 그래서 정확히 huns.site를 검색해본 결과, 돈장난 없이 연 $25.18의 금액이 찍히네요. 저의 경우에는 매력적이지 않아 보습니다.
SquareSpace
그리고 SquareSpace이라는 웹 빌더 사이트입니다. 마찬가지로 Cloudflare처럼 본업은 따로 있고 도메인 판매나 호스팅 관련 서비스를 제공하는 듯 하네요.
...그리고 하는 것도 똑같이 정확도는 조금 떨어져 보입니다. 기본 가격도 그리 착한 편은 아니네요($14-20)
Namecheap 도메인 설정
도메인 구매
가장 싼 Namecheap으로 구매해보기로 했어요. 테스트 삼아 1년치만 구매해봤습니다.
좋은 점은 연간 갱신이 자동으로 되고, Domain Privacy를 통해 도메인 개인정보보호 서비스를 무료로 제공한다는 점입니다. 여러모로 매력적이네요.
DNS 설정
놀라움의 연속이에요. DNS 설정을 어떻게 하면 좋은지 영상과 캡쳐 문서(링크)를 제공하고 있어 편하게 따라했어요.
일단 이 화면에서 구매한 도메인의 [Manage] 버튼틀 클릭해요.
그리고 Vercel에서 서브도메인을 추가해주세요. 저의 경우 blog.huns.site를 Add하면 되겠죠. 그리고 Nameservers 탭의 [Enable Vercel DNS] 버튼을 클릭하면 이런 화면을 만날 수 있어요.
저희는 Vercel DNS 네임서버를 사용할 것이기 때문에, NAMESERVERS 섹션의 Custom DNS를 선택하고, vercel의 nameserver를 적용해주세요. CNAME이 아니라 Nameservers를 사용하는 것이 가비아와 차이인 것으로 보이네요.
그렇게 약 5분 정도의 시간을 대기하니 잘 적용된 것을 확인할 수 있었어요. CNAME을 사용하는 것보다는 조금 더 걸리고 적용되고 있다는 spinner조차도 뜨지 않아 당황했지만 말이에요.
마치며
생각보다 간단했다
우선순위에서 밀려서 많이 미뤘던 작업인데 도메인 구매부터 적용까지 정말 단숨에 할 수 있었어요. 서브도메인이라는 컨셉을 알고 있어서 포커스를 잡고 조사했고, 레퍼런스를 많이 참고해서 결과적으로는 너무 간단하게 할 수 있었어요.
리버스 프록시
하지만 조사 과정은 조금 있었어요. 회사에서는 프로젝트를 Vercel로 배포하는 게 아니라, Docker와 BitBucket Pipeline으로 배포하기 때문에 Apache와 리버스 프록시를 활용하는 것으로 알고 있어요. 나중에 혹시 Vercel 배포를 자체 배포로 변경하게 된다면, 웹 서버와 트래픽 우회를 통해 서브 도메인을 적용하는 또다른 R&D를 진행해보겠습니다.
