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

公開日:2018-11-05
最終更新:2018-11-05
※この記事は外部サイト(https://qiita.com/dorarep/items/010a8a7c27...)からのクロス投稿です

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がとなるようにします。

// `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の設定ファイルを追加します。

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?

記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
@zd2JVKCd8JyW6MUgの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする