많은 개발자분들이 여러 가지 이유로 Next.js 를 이용해 개인 블로그를 만듭니다. 저도 옛날부터 ‘FE 개발자라면 개인 블로그 하나쯤은 있어야지!’ 라고 생각만 하고 정작 만드는 것을 미루고 있었습니다. 결국 미루고 미루다 이번에 개인 블로그를 하나 만들었습니다.
새로 만든 블로그를 Vercel 을 이용해 배포하고 Cloudflare에서 구매한 개인 도메인을 연결했던 경험을 기록으로 남겨보았습니다.
앱을 만들고 배포하기
우선, 첫 시작은 Next.js 프로젝트를 만드는 것이겠죠? CLI를 이용해 프로젝트를 만들어 줍시다. 저는 CLI 마법사를 이용해서 간편하게 환경을 설정했습니다.
$ npx create-next-app@latest
예시로 만든 프로젝트라 모두 기본값으로 설정했는데요, 취향에 따라 옵션을 선택하시면 됩니다.
프로젝트가 만들어지면 IDE를 통해 열심히 개발하고, GitHub에 연결합니다. 저는 WebStorm 을 사용하고 있기 때문에 WebStorm을 이용해서 GitHub 프로젝트와 연결했습니다.
이제 로컬 프로젝트가 GitHub과 연동되었으니, 배포를 하러 갈까요?
Vercel로 앱 배포하기
Vercel 홈페이지에 접속해서 새로운 프로젝트를 만듭니다.
Add New Project 버튼을 누르면 다음과 같은 화면이 뜨는데요, 방금 만들었던 프로젝트를 가져옵시다.
Import 버튼을 누르면, 다음과 같이 새로운 프로젝트를 생성하는 화면이 뜹니다.
프로젝트 이름은 동일하게 “deploy-test”로 설정했습니다. 프레임워크 프리셋은 Next.js로 선택합니다. 만약 앱 내에서 환경변수를 사용하신다면 여기서 환경변수를 추가할 수 있습니다.
약 1분 정도 기다리면 프로젝트 생성과 함께 앱 배포가 완료됩니다. Continue to Dashboard 를 눌러 대시보드로 이동합니다.
대시보드에서 Settings → Domains 를 눌러 도메인 관리 페이지로 이동합니다. 여기서 Add 버튼을 눌러 새 도메인을 추가해 줍니다. (혹은 하단의 기본 도메인을 수정할 수도 있습니다.)
Cloudflare 에서 도메인 구매 후, 기본 설정하기
저는 iCloud의 기능 중 하나인 “사용자 설정 이메일”을 위해 미리 구입해 둔 도메인(einere.me)이 있는데요, 이 도메인을 개인 블로그 도메인으로도 사용하려고 합니다.
본격적인 도메인 연결을 시작하기 전, Cloudflare에 접속해서 DNS 관리 메뉴에 들어가시면 다음과 같이 www 설정을 하라는 알림이 있을 것입니다.
“www에 대한 A, AAAA 또는 CNAME 레코드를 추가해야 www.einere.me이(가) 확인됩니다.” 라는 안내의 의미는 www.einere.me 로 접속한 유저를 어디로 보내야 하는지 설정되지 않았다는 얘기입니다. 보통 www 도메인은 그 상위 도메인에 연결하는 게 보통이기 때문에, 저도 그렇게 하도록 하겠습니다.
www에 대한 레코드 추가하기
해당 페이지에서 다음과 같이 레코드를 추가해 줍시다.
항목 | 값 |
유형 | CNAME |
이름 | www |
대상 | einere.me (구매한 도메인) |
프록시 상태 | off (DNS 전용) |
TTL | 자동 |
이 설정을 하게 되면 Cloudflare 가 “www.einere.me”에 대한 CNAME인 “einere.me”를 알려줍니다. 즉, www.einere.me가 einere.me를 가리키는 것이죠. 레코드를 추가하고 나면, 아까의 안내는 사라집니다.
이제 Cloudflare 설정을 모두 마쳤으니, 도메인 연결을 재개해 봅시다.
배포된 앱과 개인 도메인 연결하기
Vercel 페이지로 돌아와서, 도메인 추가를 이어 합시다.
도메인 추가에는 세 가지 선택 항목이 있는데요, Vercel은 “www… 도메인을 추가하고, 구매한 도메인이 www 도메인으로 리디렉트되는 항목”을 추천합니다.
세 항목이 무슨 차이인지 궁금해서 하단의 apec domains, and www redirects 링크를 방문하여 이유를 알아보았습니다. 간단히 말하자면 추천 방식이 제일 유연하고 빠르기 때문입니다.
해당 내용을 조금 더 자세히 살펴보면, 다음과 같은 설명이 있습니다.
- 제가 구매한 einere.me 도메인은 apex 도메인(혹은 루트 도메인)이라고 하는데요, 이 루트 도메인에는 CNAME을 쓸 수 없고 A 레코드로 고정 IP를 지정해야 합니다. 반면에 www.einere.me 도메인은 아까 Cloudflare 도메인 관리 페이지에서 했던 것처럼 CNAME을 이용해 다른 도메인을 지정할 수 있습니다. 즉, www 도메인은 훨씬 유지보수하기가 용이합니다.
- 루트 도메인에 설정한 쿠키나 CAA 레코드들은 자동으로 하위 도메인에 적용됩니다. 하지만 역으로 www 도메인의 설정은 루트 도메인에 영향을 끼치지 않습니다. 즉, 하위 도메인은 세부 설정하기가 용이합니다.
- Vercel은 전 세계에 서버를 뿌려두고, 가장 가까운 서버로 연결되는 Anycast 방식을 사용합니다. www 도메인은 CNAME을 설정할 수 있기 때문에, 이러한 애니캐스트 방식을 잘 활용할 수 있습니다.
제일 좋은 방식을 추천해 줬으니, 제일 좋은 방식으로 도메인을 추가해야겠죠? 추천 방식을 선택한 뒤 Add 버튼을 누르면 자동 설정과 직접 설정을 선택할 수 있습니다.
둘 다 Cloudflare 도메인 레코드에 A, TXT 두 개의 레코드만 추가하는 게 전부더라고요. 그냥 편하게 자동 설정을 하시면 됩니다.
Cloudflare의 레코드 권한 부여 페이지로 이동합니다. 내용을 보면 제가 구매한 도메인에 A, TXT 레코드를 추가하는 게 끝입니다.
저는 혹시 몰라 가리긴 했지만, A 레코드의 콘텐츠에 특정 IP가 적혀 있습니다. 위에서 언급했던 “루트 도메인에는 A 레코드로 고정 IP를 할당해야 한다”는 내용이 기억나실 텐데요, 바로 이 레코드가 einere.me 도메인에 연결되는 IP 주소를 지정하는 내용입니다.
권한 부여 버튼을 눌러 레코드를 추가하면, 다시 Vercel 대시보드로 돌아오게 됩니다. 조금 기다리면 다음과 같이 도메인 설정이 완료된 것을 확인할 수 있습니다.
이제 einere.me로 접속을 하면 www.einere.me로 리다이렉트되며, 배포한 블로그에 접속이 됩니다!