Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Firebase HostingとCIの連携

More than 3 years have 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

gupuru
decentralized application engineer.
https://gupuru.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away