travis-ciでgithub-pagesへの自動デプロイを行う

自分用メモ以外の何物でもないです。

Travis CI

やったこと

• vue.jsで作成したSPAアプリをビルドし、github pagesにデプロイする。
• デプロイ先は、ブランチごとに以下のように変更する。（それぞれ別のgithub pagesのリポジトリを立てている）
  • master ：本番環境
  • feature/xxx ：開発環境

JSのビルド

travis.yml

language: node_js
node_js:
  - "6.11.5"           #利用するnode.jsのバージョンを指定。現在のバージョンをそのまま指定した。
before_install:        
  - npm i -g npm@4.0.5 #npmのバージョンを指定。
cache: npm
script:
  - npm run build      #ビルドスクリプトを指定。testを走らせると落ちるので（・・）

Github pagesへのデプロイ

travis.yml

deploy:
  - provider: pages
    repo: direboar/embriosupport-dev-page　 #デプロイ先のリポジトリを指定。
    target_branch : master　　　　　　　　　　
    skip_cleanup: true
    github_token: $GITHUB_TOKEN
    keep_history: true
    local_dir : ./gh_dist　　　　　　　　　　 #アップロードするディレクトリパスを指定。
    verbose : true
    on:
      all_branches: true
      condition: $TRAVIS_BRANCH =~ ^feature #featureで始まるブランチ名を対象とする。

  - provider: pages                         #複数並列で記載することで、ブランチごとに別のdeployを実施できる
    repo: direboar/embriosupport-prod-page
    target_branch : master
    skip_cleanup: true
    github_token: $GITHUB_TOKEN
    keep_history: true
    local_dir : ./gh_dist
    verbose : true
    on:
      branch: master

github tokenの設定

・Personal Access Tokenの発行
・発行したトークンをEnvironment Variablesに秘匿情報として設定
・Environment Variablesに設定した変数名を、travis.ymlに設定

ぶっちゃけ、手順は以下の通りやればよい。設定自体は簡単。
https://docs.travis-ci.com/user/deployment/pages/

はまった点

push先のURL

デフォルトの挙動では、local_dirに指定したディレクトリ自体はgithubpagesにアップロードされない。
いままではディレクトリ自体もアップロードしていたので、そのままではURLが変わってしまう。
仕方ないので、deploy前に実行するフックでディレクトリをコピーして対応した。

travis.yml

before_deploy: | #普通にシェルがかける（　＾ω＾）
  mkdir gh_dist　
  mv ./dist ./gh_dist 

エラーになったときのログがあんまりでなくて、解析に困る

pushに失敗したとき

Couldn't push the build to github.com/test_repo.git:gh-pages

ぐらいしかCIの画面には表示されない。
リポジトリ指定が間違っていたり、いろいろしていたらしいが、そのあたりの情報が出ない。
どこかにログが出ているのか？この辺りはまだ未確認なので、わかり次第追記。

##参考
https://qiita.com/hoshimado/items/4090d8e64beb8a7f95e1
https://poyo.hatenablog.jp/entry/2018/06/08/145255