Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

自動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: circleci@example.com
      GIT_AUTHOR_NAME: Circle CI
      GIT_COMMITTER_EMAIL: circleci@example.com
      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ボタンを押します。

ソース

https://github.com/boushi-bird/gh-pages-deploy-example

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away