開始使用 App Hosting

如果 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 建立及執行 Web 應用程式時所建立的受管理資源集合。您可以使用 Firebase 主控台或 Firebase CLI 建立及列出 App Hosting 後端。

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

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

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」。表格清單會顯示與您所做的變更所觸發的推播相關的特定提交內容。

後續步驟