React + Webpack を TravisCI で GitHub Pages に自動デプロイ

はじめまして。sekinoca です。
今回は React を使って作成した Web ページを TravisCI を使って
GitHub Pages に自動デプロイする方法を紹介します。

少し丁寧に説明しすぎた感があるので適宜読み飛ばしてください。

ソースコード

今回の使用するソースコードは以下になってます。

https://github.com/sekinoca/sekinoca.github.io

使ったもの

• React
• Redux
• React Redux
• Webpack
• Webpack-serve
• Material-UI
• TravisCI

リポジトリの作成

Repository name に <username>.github.io と入力し、Public リポジトリとして作成してください。
＊ <username> の部分は自分の GitHub ユーザー名に置き換えてください。

Web ページ開発

とりあえず React と Webpack を使って Web ページを作成してください。
ここで重要なのは package.json と webpack.config.js です。
まずは package.json の script 内に以下のようなスクリプトを作成してください。

"script": {
    "build": "webpack --mode production --config webpack.config.js"
},

何が言いたいのかと言うと、TravisCI でビルドする際に使用するスクリプトをココに定義するということです。

次に webpack.config.js の output は以下のように設定してください。

output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
}

ここでは、ビルドしたファイルを出力する場所が重要となります。
今回は dist に出力しています。

作成したソースを作成したリポジトリに push しておいてください。
ただし、master ブランチ以外にしてください。
理由は TravisCI がデプロイする先を master ブランチに設定するためです。
なので、今回は source ブランチに push します。

TravisCI のインストール

まずは、GiHub Marketplase から TravisCI を登録します。
Public リポジトリに対しては Free となっています。

「Install it for free」からインストールを開始してください。

GitHub Token の取得

TravisCI が GitHub Pages にデプロイするために使用する GitHub Token を取得します。
GitHub の Settings から Developer settings に行ってください。
そこの Personal access tokens から「Generate new token」で Token を作成します。

「Token description」に任意の説明文を入力し、「Select scopes」で Token のスコープを設定します。
Public repository だけに TravisCI を使用するので public_repo だけで大丈夫です。

「Generate token」をクリックし Token を生成します。
表示された Token をコピーしておいてください。
もし忘れた場合はもう一度同じ Token を表示させることは出来ず、再生成する必要があります。

TravisCI へ Token の設定

TravisCI へ行き、左にある「＋」(Add New Repository) を押してください。

すると、<username>.github.io が表示されているはずです。

以下のようにスイッチをクリックしてアクティブ状態にしてください。

アクティブ状態にしたら、その右にある「Settings」を開きます。

「Environment Variables」で、取得した Token を登録します。

ここに設定した値は TravisCI 上で環境変数として使用することができます。
後記する .travis.yml でこの GITHUB_TOKEN を呼び出します。

また、右にある「Display value in build log」をオンにしてしまうと
TravisCI のビルドログに表示されてしまうので、オフになっているのを確認してください。
＊Token は他人に知られてはならないものです。

.travis.yml の作成

TravisCI の設定ファイルとなる .travis.yml を作成します。

language: node_js

node_js:
  - "10"

cache:
  directories:
    - "node_modules"

install:
  - npm install

script:
  - npm run build

deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GITHUB_TOKEN
  keep-history: true
  local-dir: dist
  target-branch: master
  on:
    branch: source

説明していくと

• language: 何の言語を使用するかを選択します。今回は Node.js を選択しています。
• node_js: どのバージョンの Node.js を使用するかを選択します。今回は最新版である 10 を選択しています。
• cache いつも使用するファイルをキャッシュすることで処理時間を短くすることが出来ます。node_modules は毎回使用するのでキャッシュしておきます。
• install: 依存ファイルなどをインストールときに使用するコマンドを指定します。
• script: TravisCI 上で実行されるスクリプトを指定します。先程 package.json で指定した build スクリプトを実行させています。
• deploy: デプロイの設定をしています。
  • provider: どこにデプロイするかを指定します。GitHub Pages を意味する pages を指定しています。
  • skip-cleanup: true を指定することで TravisCI が provider（今回の場合は GitHub Pages）にデプロイする際に作業ディレクトリのリセット及びビルド中の変更を削除することを防ぎます。
  • github-token: TravisCI がデプロイする際に使用する GitHub Token を指定します。ここに先程 TravisCI の Settings で設定した GITHUB_TOKEN を指定します。
  • keep-history: ture を指定するとコミットを生成してから push します。指定しないと force push されます。
  • local-dir: デプロイするディレクトリを指定します。先程 webpack.config.js で指定した dist を指定しています。
  • target-branch: local-dir で指定したディレクトリを push するブランチを指定します。GitHub Pages では master ブランチのファイルを読み込むので、master を指定します。
  • on: デプロイする状況の設定を行います。
    • branch: どのブランチからデプロイするかを指定します。今回はソースコードを source ブランチに入れてあるので source を指定います。

その他設定は TravisCI のドキュメントを参照してください。

• Deployment
• GitHub Pages Deployment

TravisCI でビルドの実行

.travis.yml を push すると、TravisCI 上でビルドが実行されます。
TravisCI 上からリポジトリを開くと、ビルドログが確認できます。
ビルドが終了すると、master ブランチに dist 下のファイルが push されています。
今後は、source ブランチに commit をしていく度に自動でビルドが発生し、デプロイされます。

アクセス

きちんとデプロイされているか見てみましょう。
https://<username>.github.io にアクセスしてみて、きちんと表示されれば OK です。

おわりに

以上で React で作成した Web ページを GitHub Pages に TravisCI を使用して自動デプロイする方法の紹介は終わりです。

初めて CI ツールというものを使ってみましたが便利ですね。
今後はビルドだけでなくテストなどもやっていきたいと思います。