All Articles

Travis-CI를 이용한 Gatsby 블로그 자동 배포하기

이전 글 [개츠비(gatsby)로 스팀잇 블로그 만들기]에서는 Travis-CI 자동 배포에 실패했었습니다. 이번에는 Travis-CI 에서 자동 배포에 성공하여 다시 포스팅합니다.

Travis-CI 는 깃허브에 사이트를 배포할 수 있습니다. 그리고 Cron Jobs 기능을 제공합니다. 저는 이 두 가지 기능 때문에 Netlify 보다는 Travis-CI 를 사용할 것 같습니다.


연관글


* * *

빌드 과정에서 오류가 발생하는 플러그인을 제거하였다. gatsby-config.js 파일을 수정하였다.

    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          // {
          //   resolve: 'gatsby-remark-images',
          //   options: {
          //     maxWidth: 960
          //   }
          // },

gatsby-remark-images 은 마크다운에서 이미지를 처리하는 플러그인이다. 나는 스팀잇에 업로드한 이미지를 사용하기 때문에 해당 플러그인은 없어도 된다.



GITHUB_TOKEN 발급 받기


GitHub에서 Developer settings 메뉴의 Personam access toknes 페이지에 접속한다.

Personal access tokens: https://github.com/settings/tokens

Generate new token 버튼을 클릭한다.

repo 권한을 모두 선택한다. 그리고 Generate token 버튼을 클릭한다.

깃허브 access token 발급이 완료되었다. 참고로 이 페이지를 닫고 나면 access token은 다시 확인 할 수 없다.



Travis-ci를 이용하여 자동 배포하기


.travis.yml 파일을 생성한다. 설정에 대한 자세한 내용은 [공식 메뉴얼]을 참고한다.

language: node_js

node_js:
- "8"

cache:
  directories:
    - node_modules

# 배포 설정
deploy:
  provider: pages
  skip-cleanup: true
  keep-history: true
  github-token: $GITHUB_TOKEN
  local_dir: public
  on:
    branch: master

before_install:
  - npm install -g gatsby-cli

install:
  - npm install

script:
  - gatsby build --prefix-paths

Travis-CIRepositories에서 blog 프로젝트를 검색하여 활성화한다.

Travis-CI Repositories: https://travis-ci.org/account/repositories

Settings 버튼을 선택한다. 그리고 Environment Variables에 발급 받은 GITHUB_TOKEN 를 등록한다.

주기적으로 자동 배포를 실행하려면, Cron Jobs 을 활성화한다.

빌드(build)를 실행하면 아래와 같이 로그에서 과정을 볼 수 있다.

배포까지 끝나면 아래와 같이 완료되었다는 메세지를 볼 수 있다.

이제 24시간마다 블로그가 깃허브 페이지에 자동 배포가 될 것이다. 그리고 깃허브에 코드를 업데이트를 해도 자동 배포가 실행된다. 또는 Travis-CI 에서 강제로 빌드를 실행해도 된다.


* * *

이제 제가 원했던 스팀잇 블로그의 자동 배포 환경이 셋팅되었어요. Travis-CI 를 이용하면 24시간마다 자동 배포가 됩니다. 나중에는 스팀잇에 글 작성을 인지하고 자동 배포가 실행되도록 구현할 예정입니다.

이제부터 시간날때마다 블로그에 필요한 기능을 붙여나갈 예정입니다. 우선 구글 통계와 구글 광고 부터 삽입해봐야겠습니다.

여기까지 읽어주셔서 감사합니다.


Sponsored ( Powered by dclick )

dclick-imagead

Published 26 Dec 2018

안피곤의 블로그입니다.