Firebase: 利用 Travis CI 進行自動化部署

Firebase (新版) 的雲端服務主要提供 Android, iOS 等手機應用程式及 Web Apps 的部署服務提供，你可以使用 Firebase 提供的 SDK 做資料操作、 消息、除錯、分析等等行為，也是一個非常受到歡迎的雲端平台。

本文描述從 Firebase 部署之前，導入自動化測試、部署架構以及版控系統的方式說明。

Outline

以下是本篇導入的方法及步驟概要:

1. 建立 Firebase 專案
2. 安裝 npm 的 firebase 工具
3. 將專案先部署到 github
4. 撰寫 .travis.yml, firebase.json 描述檔案
5. 設定 travis ci
6. 部署完成

Firebase

首先，請先登入 Firebase (https://console.firebase.google.com) 然後建立一個專案:

接著，就可以在 Command Line 安裝 firebase 工具:

npm install -g firebase-tools

再來，工具安裝後，要使用 firebase-tools 進行登入:

firebase login

這個操作後， CLI 會回應你是否幫你打開瀏覽器進行 Google 帳號驗證，按下 y 或是複製網址，並且登入。

完成登入後， firbase-tools 工具才能夠幫你初始化專案，初始化會幫你產生必要的設定檔案:

firebase init

然後 CLI 就會問你要不要新建專案，還是要選擇現有專案 (這裡是用上下鍵選擇)。

好了之後，檔案就會預設幫你建立，此時，如果你是使用需要彙整編譯的框架 (vue,react,angular...etc)，那麼你可能會有 dist 資料夾，本文就以把 index.html 放進 dist 資料夾來當作應用程式目錄，作為設定檔案的範例。

所以目前的目錄結構是:

接著，需要先撰寫 firebase.json 檔案 (詳細 config 的 doc 參考是 https://firebase.google.com/docs/hosting/full-config):

{
    "hosting":{
        "public":"dist", //設定公開程式目錄 (對應 /www 起始位置)
        "rewrites":[  //這個設定是複寫網址所有東西，導向某個設定的文件 (可以有很多條件)
            {
                "source":"**", //導向不管是 "/aa/怕.jpg" 還是 "aa.html" 都會轉向。
                "destination":"/index.html" //都會轉到這個位置。
            }
        ]
    }
}

請注意不要複製到 // 雙斜線的註解， json 會錯誤。

Github

用 Git 來做版控， Travis CI 也直接的支持 Github 的倉庫進行測試、部署任務。


總之就先把剛剛寫的程式先 push 到 Github 上面。 

TravisCI

可以先從 Travis CI 用 Github 帳號登入後，選擇 Github 的 repo ，把要測試的專案打勾:

記得不要用 private repo，因為私人倉庫在 Travis CI 要收費。

打勾後，必須要寫 .travis.yml 在專案目錄中， Travis CI 才會跑測試流程，所以就在專案目錄先建立一個檔案叫 .travis.yml。

檔案的設定是:

language: node_js
node_js:
  - "8.1.2"

branches:
  only:
    - master

before_script:
  - npm install -g firebase-tools  //要讓 Travis CI 自動部署，要安裝 firebase-tools

script:
  - echo "test completed!" //可以在腳本跑 npm build 之類的指令, 或 test 的指令

after_script:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive  //部署後要進行上傳(解釋)

notification:
  email:
    on_failure: change
    on_success: change

請注意不要複製到 // 雙斜線的註解， yml 的格式會錯誤。

以上腳本的指令 after_script 區塊，有一個 $FIREBASE_TOKEN ，是因為 firebase-tools 可以用 token 的方式代替帳號來做 deploy ，所以可以在 TravisCI 留下一個 $FIREBASE_TOKEN 當作系統環境變數。 (直接輸入 token，會造成 firebase 個人部署專案權限洩漏)

然後，再把這個變更做 commit, 推上 Github ，設定部分就告一段落。

接下來，需要取得 firebase 的 deploy token 權限，輸入在 TravisCI 的設定中，才可以讓 TravisCI 自動幫你部署建置 (build) 出來的檔案。

在本地端使用 firebase-tools 指令:

firebase login:ci

然後一樣走正常的登入流程，打開瀏覽器登入，接著 Command Line 就會吐給你一個 Token:

複製這個 Token ，到 Travis CI 的建制任務，找到旁邊的設定，並且進入:

就在 More Options 那邊，進入 Settings，並找到 Enviroment Variables ，在 Name 的地方輸入:

FIREBASE_TOKEN，Value 的地方就輸入剛才複製的 Token，然後到旁邊按下 Add。

TravisCI Auto Deploy To Firebase

然後，你可以到 TravisCI 的建制任務查看:

建置後，最下面就會顯示 Firebase 建置資料 (記得按下三角形展開)，然後也顯示 Application 的網址:

Reference:

https://firebase.google.com/docs/web/setup

https://firebase.google.com/
https://www.facebook.com/eggheadio/videos/1541718335898782/
https://github.com/juristr/egghead-ng-deploy-firebase/blob/master/firebase.json