概要
以前 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特有の暗号化手法を使います。
以下のように 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 に設定。
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
以上です。