將 Angular2 Dart 專案部署至 Firebase

前言

本文介紹如何將Angular2 Dart專案部署至Firebase，這是個十分有趣的應用方式，諸如Angular這種前端框架可幫助我們將特有的系統運作邏輯於前端實現，再配合Firebase提供的Database、Storage與Authentication作為後端，可使我們輕鬆建構並部署Web AP。

本文並無探討Angular2 Dart的設計與建構，僅關注在如何將其部署至Firebase Hosting。

事前準備

實際上在 Firebase Console 中的 Hosting 即有簡明引導教學，但有些細節仍需要注意。

請參考以下步驟進行：

1. 在 Firebase console 中建立 Firebase 專案
2. 安裝 Node.js (以便取得npm)
3. 安裝Firebase CLI (npm install -g firebase-tools) 
4. 登入Google (firebase login)
5. 啟動(初始化) Firebase專案，請見下一小節

Firebase 專案初始化

現有Angular2 Dart專案若要部署至Firebase即需將其初始化為Firebase專案。具體操作為：

1. 切換至專案根目錄。
2. 執行 firebase init 指令。

執行firebase init指令時，會出現互動式的命令列操作，流程如下：

1. Are you ready to proceed? 回答 Y
2. What Firebase CLI features do you want to setup for this folder?
•  Database: Deploy Firebase Realtime Database Rules
•  Hosting: Configure and deploy Firebase Hosting sites 選擇此項
3. What Firebase project do you want to associate as default?
   將會列出您目前在Firebase Console內已建立的專案，也可以在此新建專案。請選擇您要關聯的專案，即您要將專案部署到哪個Firebase專案。
4. What file should be used for Database Rules? 採用預設值 database.rules.json
5. What do you want to use as your public directory?
   預設為public，我們需要調整它，將它指向build目錄，這部份您可以參考下一小節「調整設定檔」，若當下您尚無法確定，也可以事後更改此項。
6. Configure as a single-page app (rewrite all urls to /index.html)? 回答 Y
7.  若一切正常您將看到 Firebase initialization complete!

確認與調整設定檔

當您完成firebase init操作後，在你執行該指令的目錄下將產生兩份重要的設定檔 ── firebase.json與database.urles.json。

讓我們先來看看firebase.json，它的內容大致上是：

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

請特別注意 hosting 節點下 public 值，我們必須把它指定到 build 目錄下。

這是因為 Angular2 Dart 應用需要將 Dart 轉譯為 Javascript，以及將零零總總的 package 資源彙整，這些操作是透過 pub build 來完成，預設所有產出的資源檔案皆置於 build 目錄中。

而database.urles.json記載了Firebase Database的存取權限設定，這份設定會覆蓋您手動透過Firebase Console中進行的Database設定，不可不慎！

執行部署

使用指令 firebase deploy 即可進行部署。
此指令會將定義於firebase.json → hosting → public 所指目錄中的所有資源上載至firebase。