開始使用 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 devng start 在本機執行範例應用程式。如要繼續,請建立新的 GitHub 存放區,並將新初始化的範例程式碼推送至該存放區。

步驟 1:建立 App Hosting 後端

App Hosting 後端是 App Hosting 建立及執行 Web 應用程式時所建立的一系列受管理資源。任何專案擁有者都可以使用 Firebase 控制台Firebase CLI,為專案建立第一個 App Hosting 後端。完成初始設定後,App Hosting 管理員也可以建立及管理其他後端。詳情請參閱 Firebase App Hosting IAM 角色

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

後續步驟