モジュールバンドラで生成したファイル群をGithub PagesにCircle CIでデプロイする手順

自動Deployしたい

Webpackなどのモジュールバンドラで生成したものをGithub Pagesに公開するとき、手元のソースでビルドすると、うっかりスタッシュせずに試し処理やデバッグ処理を入れたままにしてしまうことがあります。

また、ソースを修正したけどビルドを忘れてたみたいなことも。

pushしたソースをそのまま自動でビルドしてデプロイしてくれると便利です。

手順

Github リポジトリは既にあるとします。

アプリケーションを用意

VueCLIでもNuxt.jsでも素のWebpackでも何でもいいので npm run build を実行すると dist ディレクトリに出力するようにします。

npm パッケージ gh-pages をインストール ＆ 設定

Github Pagesを公開するにはいくつか方法がありますが、今回は ph-pages ブランチにpushする方法を使います。

その場合 npm パッケージの gh-pages を使うととても簡単です。

npm install gh-pages --save-dev

package.json の scriptsにdeploy用コマンドを追加します。

  "scripts": {
    "build": "(distに出力する処理)",
    "deploy": "npm run build && npm run deploy-only",
    "deploy-only": "gh-pages -d dist -m \"Built from commit $(git log -n 1 --format=%h) [ci skip]\"",
    ...
  },

gitコメントに[ci skip]を入れているのはgh-pagesへのpushをさらにビルドしようとさせないためです。

「Built from commit〜」の部分についてはこちらを御覧ください。
npm パッケージの gh-pages 利用時 コメントに gitのcommit idを入れる

これらをcommitし、pushします。

Circle CIにプロジェクト作成

既に作成済みの場合は飛ばしてください。

1. https://circleci.com/dashboard へ行く
2. ADD PROJECTS から対象リポジトリの Set Up Project を押す。
3. [Operating System]はLinux 、 Language は Node を選択
4. Start Building を押す。

これでプロジェクトが登録され、ビルドが走ります。まだ設定ファイルがないのでビルドエラーになりますがそれで大丈夫です。

Circle CIからpushさせるために Github に write access 可能な Deploy key を設定する

こちらの記事を参照してください。

Circle CI で Github に write access 可能な Deploy key を設定する

Circle CI用設定ファイルを追加する。

既にある場合はこれ相当の設定を追記してください。

.circleci/config.yml ファイルを追加し、下記のようにします。

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:10
    environment:
      GIT_AUTHOR_EMAIL: [e-mail]
      GIT_AUTHOR_NAME: Circle CI
      GIT_COMMITTER_EMAIL: [e-mail]
      GIT_COMMITTER_NAME: Circle CI
    working_directory: ~/repo
    steps:
      - checkout
      - restore_cache:
          keys:
          - v1-dependencies-{{ checksum "package-lock.json" }}
          - v1-dependencies-
      - run: npm install
      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package-lock.json" }}
      - run: npm run deploy

最小の構成なので他に色々やりたい場合は公式ドキュメントを参考にいろいろ設定しましょう。

これをpushします。

Circle CI のビルドとデプロイが成功するのを待つ

待ちます。

Github 側の設定

gh-pagesブランチへのデプロイが成功したら Github Pages へ反映されているはずです。

反映されていない場合は Github側の設定を見直します。

https://github.com/(ユーザ or 組織)/(対象リポジトリ)/settings へ行き、GitHub Pages の項を見ます。

Sourceが gh-pages branch になっていなければそれに変更しSaveボタンを押します。

ソース