開始使用應用程式託管

在 GitHub 存放區中已有 Next.js 或 Angular 應用程式 (Next.js 13 以上版本或 Angular 17.2 以上版本)，即可開始使用 App Hosting，從建立 App Hosting 後端，然後透過推送至使用中的分支版本啟動推出作業。如果您沒有應用程式，請使用我們的其中一個範例應用程式，逐步完成本指南所述的步驟。

事前準備

如要設定 Firebase App Hosting，請先建立 Firebase 專案 (如果尚未建立)，並升級至 Blaze 方案。

建立專案：

  1. 在 Firebase 控制台，按一下「新增專案」。

    • 如要將 Firebase 資源新增至「現有的」Google Cloud 專案，請輸入專案名稱，或是從下拉式選單中選取該專案的名稱。

    • 如要建立新專案，請輸入所需專案名稱。您也可以選擇編輯專案名稱下方顯示的專案 ID。

  2. 如果出現提示訊息，請詳閱並接受 Firebase 條款。

  3. 點選「繼續」。

  4. (選用) 為專案設定 Google Analytics (分析)，以便使用下列任一 Firebase 產品，享有最佳體驗：

    您可以選取現有的 Google Analytics (分析) 帳戶或建立新帳戶。

    如要建立新帳戶，請選取 Analytics (分析) 報表位置，然後接受專案的資料共用設定和 Google Analytics (分析) 條款。

  5. 按一下「建立專案」。如果使用現有的 Google Cloud 專案，請按一下「新增 Firebase」。

Firebase 會自動為你的 Firebase 專案佈建資源。程序完成後，系統會將您導向 Firebase 控制台中 Firebase 專案的總覽頁面。

步驟 0 (選用)：建立 GitHub 存放區和網頁應用程式

如果您還沒有儲存在 GitHub 存放區中的網頁應用程式，或者想透過範例應用程式嘗試執行流程，請先針對 Next.js 或 Angular 範例初始化其中一個範例：

npm init @apphosting

您可以使用 next dev 或 ng start 在本機執行範例應用程式。如要繼續，請建立新的 GitHub 存放區，並將剛初始化的程式碼範例推送至該存放區。

步驟 1：建立 App Hosting 後端

App Hosting 後端是 App Hosting 建立的一組代管資源，可用來建構及執行網頁應用程式。您可以透過 Firebase 控制台或 Firebase CLI 建立及列出 App Hosting 後端，

Firebase 主控台：從「Build」選單中依序選取「App Hosting」和「Get started」。

CLI： (3.9 以上版本) 如要建立後端，請從本機專案目錄的根目錄執行下列指令，並提供您的專案 ID 做為引數 (用於預先發布版，只支援 us-central1 區域)：

firebase apphosting:backends:create --project PROJECT_ID --location us-central1

在主控台或 CLI 中，按照提示為後端指派名稱、設定 GitHub 連線，並設定下列基本部署設定：

  • 設定應用程式的根目錄 (預設為 /)

    這通常是 package.json 檔案的所在位置。

  • 設定使用中的分支版本

    這是將部署至線上網址的 GitHub 存放區分支。通常這是要合併特徵分支或開發分支的分支版本。

  • 接受或拒絕自動推出

    系統預設會啟用自動推出功能。後端建立完畢後，您可以選擇應用程式立即部署至 App Hosting。

步驟 2：查看已部署的應用程式

建立後端時，Firebase 會提供您免付費的子網域，讓使用者造訪您的網頁應用程式。其格式為 backend-id--project-id.us-central1.hosted.app。

如要查看網頁應用程式的網址，請查看 Firebase 控制台，或執行下列 CLI 指令：

firebase apphosting:backends:get --project PROJECT_ID {BACKEND_ID} --location us-central1

步驟 3：推送變更以觸發推出作業

建立後端且擁有實際網址後，每當您將變更推送至 GitHub 存放區的使用中分支版本時，都可以觸發新版網頁應用程式的推出作業。如要測試 App Hosting 設定，請按照下列指示操作：

  1. 在 GitHub 中，將變更推送至網頁應用程式的使用中分支版本。
  2. 開啟 Firebase 控制台中的 「App Hosting」(應用程式代管) 分頁標籤，然後選取後端的「View Dashboard」(查看資訊主頁)。這份表格清單會顯示與變更觸發的推出作業相關聯的特定修訂版本。

後續步驟