Firebase HostingとCIの連携

Firebase HostingとCIを連携する方法を書きます(•̀ᴗ•́)و
GitHubにpushされるとCIが動き、通ったらFirebase Hostingにdeployする感じです。

今回は、CIに**Travis CIを使います。**
※一応、暇の時に他のCIも書いていく予定です。

①Webサイト作成とFirebase Hostingの設定

はじめにWebサイトを作成します。
そして、firebase deployできる環境を作ります。

この辺りのことは、こちらに詳しく書かれていますので、参考にしてください^^

②GitHubとTravis CI

※Travis CIやGitHubの登録がまだの方は先に登録してください。

GitHubにリポジトリを作成し、そのリポジトリをTravis CIに追加します。
※すでにあるリポジトリを使う場合はこの作業は不要です。

Travis CIの管理画面のプラスボタンを押すと、GitHubのリポジトリ一覧が表示されます。

この中から、先ほど作成したリポジトリを選びます。

Travis CIの詳しい説明はここでは省略しています。使い方などはこの辺りをみると分かりやすいと思います。

③.travis.ymlの作成

deployするだけならこれで、大丈夫です(•̀ᴗ•́)و
テストなどの所は、お好きなように書いてください（笑）
$FIREBASE_TOKENについては、次で説明します。

.travis.yml

language: node_js

node_js:
  - "4.0"

script:
  - echo "Deploy"

install:
  - npm install -g firebase-tools
  
after_success:
  - firebase deploy --token $FIREBASE_TOKEN

④FIREBASE_TOKENの取得

CIからFirebase Hostingにdeployするにはtokenが必要です。
はじめに、こちらをターミナルで実行します。

firebase login:ci

ブラウザが開きログイン画面が開くので、ログインします。

ログインが成功するとこんな画面が表示されます。

で、ターミナルにはSuccess! Use this token to login on a CI server:と表示されているはずです。
その下辺りにtokenがあるので、このtokenをコピーします。

⑤FIREBASE_TOKENをTravis CIに設定

④のtokenをTravis CIに設定します。

まず、Travis CIのリポジトリのSettingsを開いてください。

Environment Variablesに先ほどのtokenを入れてAddを押して追加(^O^)／

⑥CIをまわしてみる＼(^o^)／

⑤ですべての設定が完了です。
あとは、GitHubにPushする度に、こんな感じにTravis CIが動くはずです。

そして、 無事にパスできたら、Firebase Hostingにdeployされているはずです( *• ̀ω•́ )b