Gatsby + Contentful + CircleCI로 블로그 마이그레이션
블로그 웹사이트 자동 빌드를 위한 길
자동 빌드가 안되는 현재의 블로그
블로그는 Gatsby로 만들었고 콘텐츠는 소스 폴더와 함께 git 저장소에 포함되어 있었다. 배포를 위해서는 로컬에서 직접 빌드를 한 후 서버에 업로드하는 방식을 사용했다.
하지만 콘텐츠가 소스에 포함되어 있으니 사소한 오타 수정도 커밋 로그에 남겨야 하고, 터미널을 띄워서 배포 명령어를 직접 입력해야 한다. 자동화가 전혀 되어있지 않는 데다 아무리 텍스트 에디터가 마크다운 문법을 잘 지원한다 하더라도 콘텐츠 관리 측면에서 좋은 점수를 줄 수 없었다.
그래서 이번 기회에 콘텐츠도 소스에서 분리해서 CMS로 따리 관리하고, 코드 커밋과 콘텐츠 업데이트 시점에 사이트를 자동으로 재배포되도록 블로그 시스템을 업그레이드하기로 했다.
웹사이트 개발/관리 도구
시스템 마이그레이션을 위해서는 도구가 필요하다.
- 정적 웹사이트 프레임워크
- 콘텐츠 관리 시스템
- CI/CD 도구
- 웹 서버
정적 웹사이트 프레임워크
사용하고 있던 Gatsby를 그대로 사용하기로 했다. 프레임워크의 메이저 버전이 v2로 올라간지 몇달이 지난 상태였기에 이번 참에 함께 업데이트 하기로 했다. v2로 올려야 React 16, Babel 7, Webpack 4를 사용할 수 있고 빌드 시간 단축, 번들 사이즈 감소 등의 혜택을 누릴 수 있다. 하지만 긴 마이그레이션 가이드 문서가 보여주듯 플러그인 버전도 모두 변경해야 하고 수정된 스펙도 제법 있다. 그래서 시간은 제법 걸리겠지만, 최대 2년이 넘은 기존 코드도 리뷰도 할 겸 Gatsby v2로 새 프로젝트를 만든 후 기존 코드를 옮기는 방식을 사용하기로 했다.
콘텐츠 관리 시스템(CMS)
유명한 CMS로는 Wordpress가 있다. CMS를 사용하면 웹사이트를 쉽게 만들고 배포할 수 있지만 ‘사용하기 편리하다 == 커스터마이징이 어렵다’는 공식이 성립하기 때문에 마음대로 만들고 싶은 나 같은 개발자에게는 별로 선호되는 도구는 아니다. 그럴 바에는 더 편하게 블로그 전용 웹서비스를 사용하는 편이 낫지 않을까 하는 생각을 하고 있다.
그래서 Gatsby 같은 도구와 사용하기에는 Wordpress처럼 프론트엔드 레이어까지 제공하는 것이 아니라 데이터의 관리만 제공하는 Headless CMS가 적합하다. 그리고 Gatsby는 플러그인을 통해 다양한 CMS에서 콘텐츠를 가져올 수 있도록 도와준다. 오픈 소스 CMS인 Drupal을 포함해서 Wordpress, Contentful, ButterCMS 같은 CMS는 물론 MongoDB, MySQL같은 데이터베이스, 그리고 서드 파티 API를 통해서도 콘텐츠를 가져올 수 있다.
Gatsby에서 플러그인을 제공하는 몇 가지 CMS를 둘러본 후 Contentful을 사용하기로 했다. 무료 플랜은 콘텐츠와 미디어를 합해서 5000개까지 업로드할 수 있다. 지난 근 2년간 작성한 글의 수와 이미지의 수를 합치면 200개가 되지 않으니 개인 블로그로 사용하기에는 충분해 보였다. 인터페이스도 깔끔하며 웹훅 설정 등도 간편하게 제공하는 등 다양한 기능이 잘 준비되어 있다. 다만 해외 서비스라서 웹사이트 속도는 조금 느린 편이다. 관리 도구에서 콘텐츠를 불러올 때 0.5초~1.5초 정도 걸려서 국내 웹사이트와 비교하면 상대적으로 느리게 느껴질 수 있다. 하지만 실제 배포된 웹사이트는 콘텐츠를 모두 포함하고 있으니 CMS API 호출 속도는 큰 문제가 되지 않는다.
CI/CD 도구
웹사이트는 아래 상황에서 자동 배포가 되어야 한다.
- master 브랜치에 커밋이 푸시되었을 때
- 콘텐츠가 생성, 수정, 삭제되었을 때
자동 빌드 도구는 CircleCI를 사용하기로 했다. 다른 사이드 프로젝트를 하면서 사용해 봤는데 무료 플랜의 빌드 성능도 괜찮고 1달에 1000분까지의 빌드 시간을 제공하므로 역시 개인이 사용하기에는 문제가 없을 것이다.
CircleCI는 Github 계정으로 로그인 후 사용할 저장소를 선택하면 기본적인 웹훅1 설정은 자동으로 해준다. 사용자는 설정 파일에 원하는 명령어를 추가하면 된다. CircleCI 설정 파일에 배포 프로세스를 추가하면 1번의 조건은 만족하게 된다.
그리고 2번을 만족하기 위해서는 CMS인 Contentful에서 웹훅 설정을 해야 한다. Contenful은 고맙게도 웹훅을 위한 전용 메뉴까지 제공하며 다양한 서비스를 위한 템플릿도 제공한다. CircleCI는 물론 Netlify, Heroku, TravisCI, Gitlab 등의 서비스를 쉽게 사용할 수 있다.
Contentful에서 CircleCI에 설정된 빌드를 실행하기 위해서는 웹훅 템플릿을 선택한 후 Git 저장소 이름, 서비스 접속 키 등 꼭 필요한 정보만 입력하면 된다. 이렇게 하면 콘텐츠 업데이트 시 웹사이트 자동 배포가 가능하다.
웹 서버
처음에는 Github Pages를 사용하다가 지금은 AWS Lightsail의 우분투 인스턴스에 nginx 웹 서버를 설치해서 배포하고 있다. 이번 마이그레이션 과정에서 Netlify로 옮기는 것도 고려하고 있어서 테스트해 봤는데, 엄청나게 간편해서 놀랬다. Github 저장소를 선택한 후 브랜치, 빌드 스크립트, Public 폴더, 빌드에 필요한 환경 변수 등만 저장하면 끝이다. CircleCI 처럼 docker 기반의 빌드 도구를 가지고 있어서 사용자가 별도로 할 일은 없다.
Netlify의 간단함에 배포가 되는 순간 옮길까? 라는 마음이 들긴 했지만 AWS보다는 역시 느린 속도2가 조금 걸렸다. 그리고 CircleCI에서 빌드 프로세스를 모두 관리하고 싶어서 CircleCI에서 AWS의 nginx 웹 서버에 직접 배포하는 방식을 사용하기로 했다.
정리
이렇게 웹 서버까지 시스템 마이그레이션 위한 도구가 모두 정해졌다.
- 정적 웹사이트 빌드 도구: Gatsby
- 콘텐츠 관리 시스템: Contentful
- CI/CD 도구: CircleCI
- 웹 서버: nginx
현재 이 블로그는 위의 도구들을 사용한 마이그레이션이 완료된 상태다. 비용은 AWS Lightsail 인스턴스에 들어가는 월 5천원 정도가 된다. Netlify나 Google Firebase 호스팅 등의 서비스를 사용한다면 그 비용도 0이 된다.
Contentful에서 글을 작성한 후 ‘published’ 상태로 전환만 하면 사이트가 다시 빌드되어서 배포되니 무척 편리하다. Gatsby에서 Contentful의 소스를 가져와서 콘텐츠별로 페이지를 만들기, CircleCI 설정 등 마이그레이션에 대한 자세한 내용은 다른 글에서 다룰 예정이다.