CircleCIでgithub pagesに自動デプロイする

動機

作っているアプリケーション のデモページをgithub pages で公開しているが、デプロイ作業を自動化したかった。

概要

• gh-pages ブランチで公開する方式
• ビルドタスクで dist ディレクトリにアプリケーションを生成する
• push-dir でデプロイする
• master ブランチ以外は無視するようにする

設定

package.json

{
     :
   <snip>
     :
  "scripts": {
       :
     <snip>
       :      
    "deploy:github": "cross-env DEPLOY='github' run-s build send:github",
    "send:github": "push-dir --dir=dist --branch=gh-pages --message='[ci skip] Deploy'"
  },
    :
  <snip>
    :
}

config.yml

version: 2
jobs:
  build_deploy:
    docker:
      - image: node:10
    steps:
      - checkout
      - add_ssh_keys:
          fingerprints:
            - "xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx"
      - run:
          name: Install Node dependencies
          command: npm install
      - run:
          name: Deploy
          command: |
            git config --global user.name "Circle CI"
            git config --global user.email "<>"
            npm run deploy:github
workflows:
  version: 2
  deploy:
    jobs:
      - build_deploy:
          filters:
            branches:
              only: 
                - master

説明

• deploy:github タスクは buildタスクと send:github タスクを順次実行する
  • buildタスクはビルドされたアプリケーションが dist ディレクトリに配置される
  • send:github タスクで github pagesへのデプロイをする
• push-dirコマンド
  • --dir：デプロイ対象ディレクトリ
  • --branch：デプロイ対象ブランチ
  • --message：コミットメッセージ
    • デプロイした dist ディレクトリには circleciの設定が含まれていないため、コミットメッセージに　"[ci skip]" が含まれていないとビルドに失敗する
• Circle CIが自動で作るsshキーはリードオンリーなので、自分で登録して書き込み可能にする必要がある
  • 参考: https://esnetk6.com/2018/04/circle-ci-deployment/
• workflows の filters でmasterのみに限定するとほかのブランチではビルドが走らない
  • 参考: https://circleci.com/docs/2.0/workflows/#using-contexts-and-filtering-in-your-workflows