Vue + Nuxt + GitHub Pages + TravisCIでの自動デプロイのやり方

# Travis CIとは
GitHub上のソフトウェアのビルドやテストを行う、オンラインのCIサービスです。
PublicなRepositoryであれば、無料で利用することができます。

システムや記事のDEMOとして公開するような場合に、このTravisCIでGitHub Pagesに対して簡単に自動デプロイすることができます。

- [Vue + nuxtでボードゲームを6時間で作ってみた](https://qiita.com/dorarep/items/b9783ea6cd18308a06a0)

# GitHub Pagesへの自動デプロイ設定のやり方
## GitHubへのアクセストークンの作成
[GitHub上のトークン設定画面](https://github.com/settings/tokens)で、アクセストークンを作成します。
Scopeは`public_repo: Access public repositories`のみで大丈夫です。

<img width="749" alt="access_token.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/33490b52-9e4c-620a-fa8a-d9d321d6bb06.png">

作成したアクセストークンはあとで使うので、どこかにメモしておきましょう。

## RepositoryのGitHub Pagesを有効にする
GitHubのリポジトリの設定画面を開きます。

```
https://github.com/<username>/<repository-name>/settings
```

下の方にGitHub Pagesの設定項目があるので、そこでsourceをmasterにしてsaveしておきましょう。
これで該当リポジトリのGitHub Pagesが有効になります。

<img width="740" alt="github pages.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/925bb648-20ab-0dab-e4b1-e892add73cb3.png">

## Travis CIへリポジトリの登録
次に[Travis CI](https://travis-ci.org/)に登録します。

するとGitHubと連携しPublic Repositoryの一覧が出てくるので、自動デプロイしたいRepositoryのトグルをオンにします。

<img width="654" alt="travis_ci.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/c96a76b3-0d94-b424-cebe-cb3efcd8c697.png">

そしてそのRepositoryのSettingsを開き、Environment VariablesでGITHUB_ACCESS_TOKENに先ほど取得したアクセストークンを入れます。

<img width="781" alt="environemnt variables.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/ff0bc1e7-e90b-c952-37e3-f8fb9c88299e.png">

これでTravis CI側は準備完了です！

## GitHub Pages用の設定をNuxtプロジェクトに追加

GitHub Pagesはカスタムドメインを使用していない限り、URLは下記形式になります。

```
https://<username>.github.io/<repository-name>
```

Nuxtは通常ウェブサイトのルートが` / `となることを想定しているため、そのままだとアセットにアクセスできないなどの問題が起きてしまいます。

そのため、DEPLOY_ENVがGH_PAGESのときのみ、routerのBASEが<repository-name>となるようにします。

```nuxt.config.js
// `DEPLOY_ENV` が `GH_PAGES` の場合のみ `router.base = '/<repository-name>/'` を追加する
const routerBase = process.env.DEPLOY_ENV === 'GH_PAGES' ? {
  router: {
    base: '/<repository-name>/'
  }
} : {}

module.exports = {
  ...routerBase
}
```

## Travisの設定ファイルをNuxtプロジェクトに追加

次にtravisの設定ファイルを追加します。

```.travis.yml
language: node_js
node_js:
  - "8"

cache:
  directories:
    - "node_modules"

branches:
  only:
  - master

install:
  - yarn install
  - DEPLOY_ENV=GH_PAGES yarn run generate

script:
  - echo "Skipping tests"

deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GITHUB_ACCESS_TOKEN
  target-branch: gh-pages
  local-dir: dist
  on:
    branch: master
```

DEPLOY_ENV=GH_PAGESにすることでGitHub Pages用の設定が有効になり、アクセストークンは環境変数の$GITHUB_ACCESS_TOKENに入っているというわけですね。

この変更をコミットすると、Travis CIがCommitをトリガーに自動デプロイしてくれるようになります。

## GitHub Pagesのsource設定の変更
Travis CIのビルドが成功すると、gh-pagesというブランチが作成され、その中にdistの中身が入っています。

<img width="986" alt="gh-pages.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/86fd15dc-6223-f6b0-b8bb-25ed4d26945d.png">

今のGithub Pagesはmasterブランチでbuildされているため、これをgh-pagesに変更する必要があります。

<img width="743" alt="github-pages.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/8482bbd0-2425-98a3-3c3f-b36567e6e319.png">

これで設定は完了ですが、今はmasterブランチを元にビルドされているため、またビルドしなおしましょう。

<img width="939" alt="Travis_CI_restart_build.png" src="https://qiita-image-store.s3.amazonaws.com/0/74964/5b63fc75-e5d2-8646-8093-37442a241814.png">

## 完了！
これで対象のリポジトリのGitHub Pagesにアクセスできるようになっているはずです、お疲れ様でした！

```
https://<username>.github.io/<repository-name>
```

## 感想
ここまで書いといてなんですが、正直、nuxtでCIするならNetlifyの方が簡単で良いなーという印象です。
2017年の比較記事によるとFirebaseが早そうなので、次回あたりはFirebaseも試してみたいですね。

[Static website hosting: who's fastest? AWS, Google, Firebase, Netlify or GitHub?](https://www.savjee.be/2017/10/Static-website-hosting-who-is-fastest/)