您可以在單一 Firebase 專案中設定一或多個 Firebase Hosting 網站。由於這些網站都位於同一個 Firebase 專案中,因此所有網站都能存取專案的其他 Firebase 資源。
在同一個 Firebase 專案中設定多個Hosting網站,即可更輕鬆地在相關網站和應用程式之間共用 Firebase 資源。舉例來說,如果您在同一個 Firebase 專案中,將自己的網誌、管理面板和公開應用程式設為個別網站,這些網站就能共用同一個Firebase Authentication使用者資料庫,同時擁有各自的專屬網域或內容。
步驟 1:更新 Firebase CLI 版本
如要使用最新 Firebase Hosting 功能,請更新至最新版 Firebase CLI。
步驟 2:新增其他網站
如要將其他網站新增至 Firebase 專案,請使用下列其中一種方法:
使用 Firebase 控制台的「Hosting」頁面中的工作流程
使用 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 專案中刪除不需要的網站,請選擇下列其中一種做法:
使用 Firebase 控制台的「Hosting」頁面中的工作流程
使用 Firebase CLI 指令:
firebase hosting:sites:delete SITE_ID
使用 Hosting REST API:
projects.sites.delete
請注意,您無法刪除預設網站,因為該網站的 SITE_ID
與 Firebase 專案 ID 相同。
步驟 3:為網站設定部署目標
如果您有多個網站,並執行 Firebase CLI 部署指令,CLI 需要一種方法來傳達應將哪些設定部署至每個網站。使用部署目標,您可以在firebase.json
設定檔和 Firebase CLI 指令中,使用 TARGET_NAME
獨一無二地識別特定網站,以便測試或部署至網站。
如要建立部署目標並將 TARGET_NAME
套用至 Hosting 網站,請從專案目錄的根目錄執行下列 CLI 指令:
firebase target:apply hosting TARGET_NAME RESOURCE_IDENTIFIER
參數說明如下:
TARGET_NAME:您為要部署的網站定義的專屬名稱Hosting
RESOURCE_IDENTIFIER,即 Firebase 專案中列出的
SITE_ID
Hosting 網站
舉例來說,如果您在 Firebase 專案中建立了兩個網站 (myapp-blog
和 myapp-app
),可以執行下列指令,為每個網站套用專屬的 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 內容和設定,包括 default Hosting 網站。 |
firebase emulators:start --only hosting:TARGET_NAME |
在本地代管的網址模擬指定網站的 Hosting內容和設定Hosting |
firebase hosting:channel:deploy \ |
在預覽網址部署Hosting「預設」網站的Hosting內容和設定 |
firebase hosting:channel:deploy \ |
在預覽網址部署指定網站的 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 內容和 default Hosting 網站的設定 |
(不建議使用,請改用 emulators:start )firebase serve --only hosting:TARGET_NAME
|
在本地代管的網址提供指定 Hosting 網站的 Hosting 內容和設定 |