2017年9月9日 星期六

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

沒有留言:

張貼留言

© ERIC RILEY , 自由無須告知轉貼
Background Japanese Sayagata by Olga Libby