開始使用 App Hosting

如果 GitHub 存放區中已有 Next.js 或 Angular 應用程式 (Next.js 13.5.x 以上版本或 Angular 18.2.x 以上版本)，只要建立 App Hosting 後端，然後將內容推送至正式版分支，即可開始推出 App Hosting。如果您沒有應用程式，請使用我們的其中一個範例應用程式，逐步完成本指南所述步驟。

事前準備

如要設定 Firebase App Hosting，您必須先建立 Firebase 專案 (如果沒有)，然後升級至 Blaze 方案。

建立專案：

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

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

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

  2. 如果系統顯示提示，請詳閱並接受 Firebase 條款。

  3. 按一下「繼續」。

  4. (選用) 為專案設定 Google Analytics，以便使用下列 Firebase 產品，獲得最佳體驗： Firebase A/B Testing、 Cloud Messaging、 Crashlytics、 In-App Messaging 和 Remote Config (包括個人化)。

    選取現有Google Analytics帳戶或建立新帳戶。如果建立新帳戶，請選取Analytics報表位置，然後接受專案的資料共用設定和Google Analytics條款。

  5. 按一下「建立專案」 (或「新增 Firebase」，如果要在現有的 Google Cloud 專案中新增 Firebase)。

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

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

如果您還沒有位於 GitHub 存放區的 Web 應用程式，或是想使用範例應用程式試用流程，請先初始化其中一個範例，適用於 Next.js 或 Angular：

npm init @apphosting

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

步驟 1：建立 App Hosting 後端

App Hosting 後端是 App Hosting 建立的一系列受管理資源，用於建構及執行網路應用程式。

Firebase 控制台：在「Build」(建構) 選單中，選取「App Hosting」(應用程式託管)，然後選取「Get started」(開始使用)。

CLI： (13.15.4 以上版本) 如要建立後端，請從本機專案目錄的根目錄執行下列指令，並以引數形式提供 projectID：

firebase apphosting:backends:create --project PROJECT_ID

無論是使用控制台或 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}

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

建立後端並取得上線網址後，每當您將變更推送至 GitHub 存放區的正式分支版本，系統就會觸發新版網頁應用程式的推出作業。如要測試 App Hosting 設定：

  1. 在 GitHub 中，將變更推送到網頁應用程式的即時分支。
  2. 在 Firebase 控制台中開啟「App Hosting」分頁，然後選取後端的「View dashboard」(查看資訊主頁)。 表格清單會顯示與變更觸發的推出作業相關聯的特定提交。

後續步驟