GithubにpushしたらFirebaseにデプロイされるようにする #Firebase

概要

以前 FirebaseにホストしていたSPA modeのNuxt.jsをSSRで稼働させるためにやったことという記事を書きました。
このとき、

これで準備が整いました。 put push origin master してTravis CIにデプロイさせます。

という文を書きましたが、Travis CIの動きについては触れませんでした。
Travis CIではmasterブランチにpushされたのを感知してtestが走り、問題なければFirebaseにデプロイするCI/CDのような振る舞いをしています。
このTravis CIの設定をまとめておくと便利だと思うので書きます。

前提

https://travis-ci.org/ でGithubリポジトリを監視している
Node.js/Nuxt.jsのSSRアプリ
Firebase Hosting および Cloud Functionsにデプロイ

前の記事にあるのでアプリケーションの紹介はURLを貼るだけで割愛します。

ソースコード: https://github.com/yysaki/shikibetsuhyo/

これは npm run build によりデプロイ用のファイルが生成される環境にしています。
また、 firebase deploy により手動でFirebaseへのデプロイが可能な状態です。

travis CIの設定

これから Firebase Deployment - Travis CI の記事を参考にTravis CIの設定を見ていきます。
まずFirebaseのCI用の認証トークンを取得します。
CLIで firebase login:ci を叩くとブラウザのログイン画面が表示されるのでプロジェクトの登録されているアカウントでログインします。

すると、以下のようなメッセージとともにトークンが表示されます。

$ firebase login:ci
Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd47bqnekij5i8b5pr03ho849e6.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloudplatformprojects.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ffirebase%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&state=1018089289&redirect_uri=http%3A%2F%2Flocalhost%3A9005
Waiting for authentication...
✔  Success! Use this token to login on a CI server:
1/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

この認証トークンをTravic CIに伝える必要がありますが、インターネット上に平文で晒せない情報のためTravic CI特有の暗号化手法を使います。

Encryption keys - Travis CI

以下のように travis encrypt を実行することでプロジェクトごとに固有のRSA秘密鍵により暗号化された文字列を取得できます。

$ travis encrypt "1/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
Shell completion not installed. Would you like to install it now? |y| y
Detected repository as yysaki/shikibetsuhyo, is this correct? |yes| yes
Please add the following to your .travis.yml file:
- secure: "aJLy... (Encryption Key) ...1Nbw="
Pro Tip: You can add it automatically by running with --add.

これを以下のように .travis.yml に設定。

travis.yml

language: node_js
node_js:
  - "8.12.0"
before_install:
  - 'npm i -g eslint'
  - 'npm i -g eslint-plugin-promise'
script:
  - 'npm run build'
  - 'npm run test'
  - 'npm run lint'
deploy:
  provider: firebase
  skip_cleanup: true
  token:
    secure: "aJLy... (Encryption Key) ...1Nbw="

deployの前段にいくつか記述がありますが、testやlintがパスしたらbuildしたものをFirebaseにデプロイする、という処理をかましています。

デプロイしてみる

この状態でmasterブランチにpushするとデプロイが走ります。
URLのように、testやlintが成功した場合デプロイが行われる様子が確認できます。

おまけ: Slackに通知

Slack向けの設定をFirebaseと同様に.travis.ymlに記述することで、デプロイ成否をslackに通知できるようにしました。

やり方はは参考記事がいくつかあるため割愛します。

図解: Travis CIの結果をSlack通知する方法 - Qiita

以上です。