Posted at

Firebase HostingとCIの連携

More than 1 year has passed since last update.

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のリポジトリ一覧が表示されます。

スクリーンショット 2016-09-07 7.29.29.png

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

スクリーンショット 2016-09-07 7.29.42.png

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

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

スクリーンショット 2016-09-04 23.34.06.png

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

スクリーンショット 2016-09-04 23.34.16.png

で、ターミナルにはSuccess! Use this token to login on a CI server:と表示されているはずです。

その下辺りにtokenがあるので、このtokenをコピーします。

スクリーンショット 2016-09-04 23.34.24.png


⑤FIREBASE_TOKENをTravis CIに設定

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

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

スクリーンショット 2016-09-06 22.56.26.png

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

スクリーンショット 2016-09-04 23.35.12.png


⑥CIをまわしてみる\(^o^)/

⑤ですべての設定が完了です。

あとは、GitHubにPushする度に、こんな感じにTravis CIが動くはずです。

スクリーンショット 2016-09-06 23.08.44.png

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