在多個網站上共用專案資源

您可以在單一 Firebase 中設定一或多個 Firebase Hosting 網站 專案。由於這些網站都位於同一個 Firebase 專案中，因此所有網站都能存取專案的其他 Firebase 資源。

  • 每個網站都有專屬的代管設定。
  • 每個網站都有自己的內容集合。
  • 每個網站都可以有一個或多個關聯網域。

在同一個 Firebase 專案中設定多個 Hosting 網站後， 更輕鬆地在相關網站和應用程式之間共用 Firebase 資源。適用對象 例如，如果您將網誌、管理控制台和公開應用程式設為個人 也可共用同一個 Firebase 專案中的多個網站 Firebase Authentication 使用者資料庫，同時擁有專屬網域 內容。

步驟 1：更新 Firebase CLI 版本

如要使用最新的 Firebase Hosting 功能，請按照下列步驟操作： 更新至最新版的 Firebase CLI。

步驟 2：新增其他網站

使用下列任一方法，將其他網站新增至 Firebase 專案：

  • 請使用 Hosting 頁 Firebase 控制台的

  • 使用 Firebase CLI 指令： firebase hosting:sites:create SITE_ID

  • 使用 Hosting REST API： projects.sites.create

針對這些方法，您必須指定 SITE_ID，用於為網站建構 Firebase 佈建的預設子網域：

  • SITE_ID.web.app
  • SITE_ID.firebaseapp.com

由於這些網址使用的是 SITE_ID，因此網站 ID 具有下列特性 規定：

  • 必須是有效的主機名稱標籤，也就是說，其中不得包含 .、_ 等字元。
  • 長度不得超過 30 個半形字元
  • 在 Firebase 中不得重複

針對各個網站，您也可以選擇 新增自訂網域來提供相同的內容， 以便設定多個網址

刪除次要網站

使用下列其中一項工具，將不需要的網站從 Firebase 專案中刪除 方法：

  • 請使用 Hosting 頁 Firebase 控制台的

  • 使用 Firebase CLI 指令： firebase hosting:sites:delete SITE_ID

  • 使用 Hosting REST API： projects.sites.delete

請注意，您無法刪除預設網站，因為其 SITE_ID 與 您的 Firebase 專案 ID。

步驟 3：為網站設定部署目標

如果您有多個網站且執行 Firebase CLI 部署指令， CLI 需要一種方式，傳達應將哪些設定部署至各個 網站。透過部署目標，您就能透過這類目標明確識別 有一個特定網站，TARGET_NAME firebase.json 設定檔 並在 Firebase CLI 指令中對 進行測試或部署至網站

如要建立部署目標並將 TARGET_NAME 套用至 Hosting 網站，請執行以下指令： 從專案目錄的根目錄中呼叫以下 CLI 指令：

firebase target:apply hosting TARGET_NAME RESOURCE_IDENTIFIER

其中的參數如下：

  • TARGET_NAME：您自行定義的專屬名稱，用於 您要部署 Hosting 個網站

  • RESOURCE_IDENTIFIER：Hosting 網站的 SITE_ID，如在 Firebase 專案中列出

舉例來說，假設您在myapp-blogmyapp-app Firebase 專案，可以套用專屬TARGET_NAME (blog) 和 app) 至每個網站，請執行下列指令：

firebase target:apply hosting blog myapp-blog
 
firebase target:apply hosting app myapp-app

部署目標的設定會儲存在您的 .firebaserc 檔案中 因此只需個別設定部署目標一次 專案。

步驟 4：為每個網站定義代管設定

在 firebase.json 檔案中定義網站的代管設定時，請使用網站已套用的 TARGET_NAME。

  • 如果您的 firebase.json 檔案定義了多個網站的設定， 使用陣列格式：

    {
  "hosting": [ {
      "target": "blog",  // "blog" is the applied TARGET_NAME for the Hosting site "myapp-blog"
      "public": "blog/dist",  // contents of this folder are deployed to the site "myapp-blog"

      // ...
    },
    {
      "target": "app",  // "app" is the applied TARGET_NAME for the Hosting site "myapp-app"
      "public": "app/dist",  // contents of this folder are deployed to the site "myapp-app"

      // ...

      "rewrites": [...]  // You can define specific Hosting configurations for each site
    }
  ]
}

  • 如果 firebase.json 檔案只為一個網站定義設定， 不需要使用陣列格式：

    {
  "hosting": {
      "target": "blog",
      "public": "dist",

      // ...

      "rewrites": [...]
  }
}

步驟 5：在本機進行測試、預覽變更，並部署至您的網站

從本機專案目錄的根目錄中執行下列任一指令。

指令 說明
firebase emulators:start --only hosting 模擬以下項目的 Hosting 內容與設定： 預設 Hosting 網站，位於本機代管 網址
firebase emulators:start --only hosting:TARGET_NAME 模擬指定的 Hosting 內容和設定 Hosting 個網站 (位於當地代管網址)
firebase hosting:channel:deploy \
CHANNEL_ID		 部署應用程式的 Hosting 內容和設定 使用預覽網址的預設 Hosting 網站
firebase hosting:channel:deploy \
CHANNEL_ID --only TARGET_NAME		 部署指定的 Hosting 內容和設定 設有預覽網址的 Hosting 個網站
firebase deploy --only hosting 將 Hosting 內容和設定部署至直播頻道 已設定以下項目的所有 Hosting網站 firebase.json
firebase deploy --only hosting:TARGET_NAME 將 Hosting 內容和設定部署至直播頻道 (指定 Hosting 網站)
指令 說明
(不建議；請改用 emulators:start)
firebase serve --only hosting 		提供該頻道的 Hosting 內容和設定 預設 Hosting 網站，位於本機代管 網址
(不建議使用；請改用 emulators:start)
firebase serve --only hosting:TARGET_NAME 		提供指定項目的 Hosting 內容和設定 Hosting 個網站 (位於當地代管網址)