開始使用 App Hosting

使用現有的 Next.js 或 Angular 應用程式 (Next.js 13 以上版本或 Angular 17.2 以上版本) 開始使用 App Hosting 可能是 可讓您建立 App Hosting 後端，然後啟動 並將推送項目推送至使用中的分支版本如果沒有應用程式，請使用 使用範例應用程式，逐步完成本指南所述的步驟。

事前準備

您需要先建立 Firebase，才能設定「Firebase App Hosting」 並升級至 Blaze 方案。

建立專案：

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

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

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

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

  3. 按一下 [繼續]。

  4. (選用) 為專案設定 Google Analytics，進而 ，使用下列任一 Firebase 產品來獲得最佳體驗：

    選取現有項目 Google Analytics 帳戶 或建立新帳戶

    如果您建立新帳戶，請選取 Analytics 個回報地區，然後接受 為您的專案建立資料共用設定和 Google Analytics 條款。

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

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」會建立專門用來建構及執行網頁應用程式。您可以建立 App Hosting 個後端，使用 Firebase 控制台或 Firebase CLI。

Firebase 主控台：從「Build」選單中依序選取「App Hosting」和 立即開始使用。

CLI： (3.9 以上版本) 如要建立後端，請執行下列指令 然後從本機專案目錄的根目錄中，將 project 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. 開啟 的 App Hosting 個分頁： Firebase 控制台，然後選取後端的「View Dashboard」(查看資訊主頁)。 表格清單會顯示與推出作業相關聯的特定修訂版本 變化。

後續步驟