✨소개

이번 시간에는 vercel로 배포하는 법에 대해 알아보겠습니다.

vercel은 사람들이 자주 쓰는 프레임워크를 간편하게 배포해주는 사이트입니다. vercel은 next js를 만든 곳인 만큼 next js는 물론 React, Vue, Nuxt, Gatsby 등 다양한 프레임워크로 만든 웹사이트를 배포해줍니다.

vercel의 간편한 점은 깃헙의 레포지토리에 연결하면 자동으로 배포를 해주는 것도 있지만 무엇보다 레포지토리에 수정 사항이 생기면 자동으로 수정하고 배포를 해준다는 점이 편합니다.

그래서 vercel에 배포하는 방법보다는 도메인을 연결하는 것을 설명해 드리려고 합니다. 준비사항은 cloudflare 계정과 도메인입니다.

✨도메인 연결

🎐도메인 추가

배포를 하셨다면 해당 섹션에 View Build Logs, View Function Logs, View Domains 버튼이 있을텐데 View Domains 버튼을 눌러주세요. 그리고 구매하신 도메인을 추가해주세요.

🎐Cloudflare에 연결

추가하셨다면 Invalid Configuration이라는 빨간 문장이 나올겁니다. 그렇다면 vercel에서는 A Record 혹은 Nameserver를 사용하라고 할 것입니다. 네임서버를 사용하셔도 괜찮지만 우리는 클라우드플레어를 사용할 것이기 때문에 A Record 방법을 사용하겠습니다.

cloudflare에 가셔서 도메인을 추가하시고 레코드에 Type, Name, Value를 vercel에 적혀져있는 것처럼 적어주면 됩니다.

🎐Non-www 설정

그리고 저는 non-www이기 때문에 vercel에서 www 포함한 도메인도 입력하셔서 Edit 버튼을 누르시고 Redirect to를 www가 없는 도메인으로 연결시켜주시면 됩니다. 마찬가지로 클라우드플레어에 가서 CNAME 레코드를 추가하셔서 www가 non-www 도메인으로 리다이렉트되게 해주셔야 합니다.
그리고 status code도 설정해주셔야 하는데 저는 일단 307 Temporary Redirect로 했습니다.

만약 subdomain을 만들어 백엔드를 넣고 싶으시다면 CNAME 레코드를 추가하셔서 백엔드 주소로 리다이렉트되게 해주시면 됩니다.

참고로 도메인을 구입하신 곳에 가서 클라우드플레어에서 준 네임서버를 입력을 해야 클라우드플레어가 자기 역할을 할 수 있습니다. 네임서버를 수정하면 최대 2~3일 정도 걸릴 수도 있다고 합니다.

그리고 레코드를 만들 때 DNS Only 혹은 Proxied 중에 선택을 해야하는데 vercel에서는 특별한 제한이 없다면 DNS Only를 추천한다고 합니다.