開始使用 App Hosting

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

事前準備

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

建立專案：

Firebase 或 Cloud 新手

如果您是 Firebase 或 Google Cloud 的新手，請按照下列步驟操作。
如要建立全新的 Firebase 專案 (和底層的 Google Cloud 專案)，也可以按照下列步驟操作。

  1. 登入 Firebase 控制台。
  2. 按一下按鈕，建立新的 Firebase 專案。

  3. 在文字欄位中輸入專案名稱。

    如果您是 Google Cloud 機構的成員，可以選擇要在哪個資料夾中建立專案。

  4. 如果系統提示，請詳閱並接受 Firebase 條款，然後按一下「繼續」。
  5. (選用) 在 Firebase 控制台中啟用 AI 輔助功能 (稱為「Gemini in Firebase」)，協助您開始使用服務並簡化開發程序。

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

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

  7. 按一下「建立專案」。

Firebase 會建立專案、提供一些初始資源，並啟用重要的 API。完成後，系統會將您帶往 Firebase 控制台的 Firebase 專案總覽頁面。

現有 Cloud 專案

如要開始使用現有的 Google Cloud 專案搭配 Firebase，請按照下列步驟操作。進一步瞭解如何將 Firebase 新增至現有的 Google Cloud 專案。

  1. 使用可存取現有 Google Cloud 專案的帳戶登入 Firebase 控制台。
  2. 按一下按鈕，建立新的 Firebase 專案。
  3. 在頁面底部點選「將 Firebase 新增到 Google Cloud 專案」。
  4. 在文字欄位中，開始輸入現有專案的專案名稱，然後從顯示的清單中選取專案。
  5. 按一下「開啟專案」。
  6. 如果系統提示，請詳閱並接受 Firebase 條款，然後按一下「繼續」。
  7. (選用) 在 Firebase 控制台中啟用 AI 輔助功能 (稱為「Gemini in Firebase」)，協助您開始使用服務並簡化開發程序。

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

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

  9. 按一下「新增 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」(查看資訊主頁)。 表格清單會顯示與變更觸發的推出作業相關聯的特定提交。

後續步驟