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

您可以在單一 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_IDENTIFIERHosting 網站的 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 個網站 (位於當地代管網址)