Github 리포지토리 Netlify로 배포하고 커스텀 도메인 연결하기 (feat. Gatsby Cloud 종료)

때는 2023년 9월 23일.

라는 제목의 메일이 날아왔다.

🙁…?

메일의 내용으로 현실을 파악하기 까지 수 분이 소요되었다. 그래… 그러니까… 내 블로그를 호스팅 중인 Gatsby Cloud가 불과 며칠 뒤, 2023년 9월 29일에 서비스가 종료된다는 말이지??

메일함을 뒤적거려보니 9월 8일, 처음 서비스 종료로 인해 Netlify로 마이그레이션을 요청하는 메일이 있었다. 그 때는 그냥 광고메일인 줄 알고 넘겨버린 듯 싶다.

심지어 Gatsby Cloud 에서도 상단 공지를 통해 계속 알려주고 있었다. 내가 인지하지 못했을 뿐이다.

조금 더 사정을 알아보니 2023년 2월, Netlify는 Gatsby를 인수했다. 이후 2023년 8월 24일, Netlify의 CEO Mathias Biilmann은 Gatsby Cloud를 진정한 개방형으로 유지하기 위해 종료를 발표했다. 결국 Gatsby를 인수하여 Netlify의 규모를 키우면서 관리 포인트를 줄이기 위해 중단한다는 의미일테다.

Weezip의 호스팅 환경을 구성할 때 Gatsby가 인수된 줄 몰랐다…

GC의 무료 사용자도 마이그레이션을 위한 고객 지원이 이뤄진다고 하는데, 영어를 잘 못하는 나는 그냥 혼자 진행하기로 했다. 그냥 클라우드 마이그레이션 하는 건데 뭐!

다시 호스팅하고 DNS를 설정할 걸 생각하니 두통이 밀려왔지만, 그래도 사용하기 편하게 만들어두었을 것이란 기대와 함께 Netlify로 ‘treefeely’와 ‘weezip’을 이사시키기로 했다.

회원가입 후 자연스럽게 하나의 팀을 생성했다. 팀은 웹사이트 관리를 위한 그룹이며, 팀원들을 초대해서 권한을 부여해 같이 관리할 수 있다.

사이트는 팀 내에 생성되는 웹 사이트로 Netlify 서버를 통해 호스팅 된다. 각 사이트 별 배포 설정과 히스토리, 트래픽 등의 정보를 가지고 있다.

treefeely 팀을 생성한 후, ‘treefeely’와 ‘weezip’을 위한 사이트 생성을 진행한다.

사이트에 배포될 저장소를 연결할 수 있다. Github, GitLab, Bitbucket, Azure 모두 연동 가능하며, 나는 Github를 선택했다.

Github 계정에 Netlify를 연결한 후 접근 가능한 리포지토리를 설정한다.

이어서 연결을 진행하며, 현재 생성하려는 사이트에 배포할 리포지토리를 선택한다.

이후,

하여 사이트를 생성하면 자동으로 빌드와 배포가 진행된다.

이 설정은 사이트가 생성 된 후에도 [Site configuration] 에서 변경할 수 있다.

[Build settings]의 Publish directory에는 리포지토리에서 배포될 폴더의 경로를 입력해주어야 한다. 대부분

이며, Next.js의 경우

로 자주 설정된다.

사이트는 임의의 이름으로 처음 생성되는데, [Site Configuration] - [Site details] - [Site information] - [Change site name] 을 통해 이름을 변경한다.

배포가 성공하면

경로로 호스팅된다.

해당 사이트의 [Domain Management] - [Production domains] 에서 추가 도메인을 설정할 수 있다.

도메인이 Netlify DNS를 통해 연결되어야 하기 때문에 Google Domains에서 네임 서버를 변경해주어야 한다.

연결이 잘 되면 HTTPS를 위한 SSL 인증서도 자동 발급해준다. 이런 부분들을 신경쓰지 않아도 되게 해줘서 참 편하다.

Google Domains에서 [맞춤 네임버서] - [네임서버 관리]를 통해 구글에서 구입한 도메인의 네임서버를 Netlify의 네임 서버로 변경해준다. 최소 2개 이상의 네임 서버를 설정해야 하는데, Netlify를 비롯해 보통 4개를 제공해주니 모두 설정해준다.

Netlify의 네임 서버 정보는 팀의 [Domains] - [Name Servers] 에서 확인할 수 있다.

해당 사이트의 [Domain Management] - [Production domains] 에서 현재 도메인 연결 상태를 확인할 수 있는데, 도메인 옆에 ‘Netlify DNS’ 가 아닌 ‘Awaiting External DNS’ 로 설정되어 있으면 아직 제대로 연결이 안된 것이다. 이 텍스트를 클릭해서도 네임 서버를 확인할 수 있다.

설정이 완료되면, 이전되기 전까지는 구글의 약관이 적용되고 이후 해당 네임서버의 약관이 적용된다는 내용의 공지와 함께, 변경사항이 전파되는 데 시간이 걸릴 수 있다고 안내해준다.

treefeely 사이트의 경우, 처음에는 둘 다 Awaiting 상태였다가, 구글 네임 서버를 변경 한 후 2시간 쯤이 지나고 www 도메인이 먼저 변경된 것을 볼 수 있다. 새로고침하면 다시 Awaiting 되기도 하는데, 아직 전파중이라 그런 듯 싶다.

Gatsby Cloud에서 hosting도 비활성화했다.

treefeely는 아직 접속되지 않지만, weezip은 무사히 접속이 되는 것을 확인했다. 좀 더 기다려봐도 안되면, treefeely의 설정을 다시 확인해볼 생각이다.

사실 중요한건 weezip이었기 때문에 이사는 잘 마무리되었다고 봐도 될 것 같다.

약 반 년 간 내 호스팅 해 준 Gatsby Cloud야, 고마웠어.

그런데… Hosting integrations를 지원하는 기능이 있었네…? 🔫

하루가 지난 9월 28일, Netlify로부터 ‘Your Netlify site awaits’ 라는 제목의 메일을 받았다.

사이트 호스팅이 잘 마무리 되었다 :)

이번 이사 과정에서 예상치 못했던 복병은 다름 아니라

라이브러리에 있었다. 노션 DB의 데이터를 불러오는 가장 코어한 기능을 맡아주는 라이브러리인데, 갑자기 해당 라이브러리에서 데이터를 온전히 가져오지 못하고 에러를 토해내며 계속 빌드를 실패했다.

당장 이사가야되는데, 빌드가 안되니 속은 타들어가고… 임시방편으로 어찌어찌 해결되어서 이사는 마무리했지만, 여전히 개운치 못하다.

로도 올리긴 했지만, 이 부분에 대한 내용은 다음 글에서 온전히 다뤄보자.