38
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

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のリポジトリ一覧が表示されます。
スクリーンショット 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

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
38
Help us understand the problem. What are the problem?