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

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

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

## ソースコード

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

[https://github.com/sekinoca/sekinoca.github.io](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` 内に以下のようなスクリプトを作成してください。

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

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

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

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

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

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

## TravisCI のインストール
まずは、[GiHub Marketplase](https://github.com/marketplace) から [TravisCI](https://github.com/marketplace/travis-ci) を登録します。
Public リポジトリに対しては Free となっています。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/279694/eb1a68b8-1c3f-62d4-add5-f38d3c9874f6.png)

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

## GitHub Token の取得

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/279694/aa8b198c-1822-998c-5a9a-0cd830a195c1.png)

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

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

## TravisCI へ Token の設定

[TravisCI](https://travis-ci.org/) へ行き、左にある「＋」(Add New Repository) を押してください。

![FireShot Capture 83 - Travis CI - Test and Deploy Your Code_ - https___travis-ci.org_getting_started.png](https://qiita-image-store.s3.amazonaws.com/0/279694/80d9dd59-d07f-ea2a-f5d9-e5afc81a55a4.png)

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

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

![FireShot Capture 84 - sekinoca - Profile - Travis CI - https___travis-ci.org_profile_sekinoca.png](https://qiita-image-store.s3.amazonaws.com/0/279694/eba2d148-ca2a-78e3-afe8-ecf2947d7f14.png)

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

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

![FireShot Capture 82 - sekinoca_sekinoc_ - https___travis-ci.com_sekinoca_sekinoca.github.io_settings.png](https://qiita-image-store.s3.amazonaws.com/0/279694/e543adeb-6d70-7419-02aa-bf146c5d903d.png)

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

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

## .travis.yml の作成

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

```yml:.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](https://docs.travis-ci.com/user/deployment/)
- [GitHub Pages Deployment](https://docs.travis-ci.com/user/deployment/pages/)

## TravisCI でビルドの実行

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

## アクセス

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

## おわりに

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

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