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

7618 ワード
Vue.js nuxt.js github-pages TravisCI TravisCI テキストリンク

Travis CIとは

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

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

GitHub Pagesへの自動デプロイ設定のやり方

GitHubへのアクセストークンの作成

GitHub上のトークン設定画面で、アクセストークンを作成します。
Scopeはpublic_repo: Access public repositoriesのみで大丈夫です。

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

RepositoryのGitHub Pagesを有効にする

GitHubのリポジトリの設定画面を開きます。

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

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

Travis CIへリポジトリの登録

次にTravis CIに登録します。

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

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

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

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

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

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

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

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

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の中身が入っています。

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

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

完了！

これで対象のリポジトリの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?