開始使用應用程式託管

在 GitHub 存放區中已有 Next.js 或 Angular 應用程式 (Next.js 13 以上版本或 Angular 17.2 以上版本) 之後，開始使用應用程式託管是最直接的方式，因為建立 App 託管後端，然後透過推送至現行分支版本的方式進行推出。如果您沒有應用程式，請使用其中一個範例應用程式，逐步完成本指南所述的步驟。

事前準備

您需要先建立 Firebase 專案 (如果尚未建立)，並升級至 Blaze 方案，才能設定 Firebase 應用程式託管。

建立專案：

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

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

    • 輸入所需專案名稱，即可建立新專案。您也可以視需要編輯專案名稱下方的專案 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 後端

應用程式託管後端是應用程式代管為了建構及執行網頁應用程式而建立的代管資源集合。您可以使用 Firebase 控制台或 Firebase CLI 建立及列出應用程式代管後端。

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

CLI： (3.9 以上版本) 如要建立後端，請從本機專案目錄的根目錄中執行下列指令：

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 存放區的即時分支版本時，即可觸發新版網頁應用程式的發布作業。如要測試您的應用程式代管設定：

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

後續步驟