使用現有的 Next.js 或 Angular 應用程式 (Next.js 13 以上版本或 Angular 17.2 以上版本) 開始使用 App Hosting 可能是 可讓您建立 App Hosting 後端,然後啟動 並將推送項目推送至使用中的分支版本如果沒有應用程式,請使用 使用範例應用程式,逐步完成本指南所述的步驟。
事前準備
您需要先建立 Firebase,才能設定「Firebase App Hosting」 並升級至 Blaze 方案。
建立專案:
-
在 Firebase 控制台中,按一下「新增專案」。
-
如要將 Firebase 資源新增至現有的 Google Cloud 專案,請輸入專案的名稱 或從下拉式選單中選取專案
-
如要建立新專案,請輸入所需專案名稱。您也可以選擇 編輯顯示在專案名稱下方的專案 ID。
-
-
如果出現提示訊息,請詳閱並接受 Firebase 條款。
-
按一下 [繼續]。
-
(選用) 為專案設定 Google Analytics,進而 ,使用下列任一 Firebase 產品來獲得最佳體驗:
選取現有項目 Google Analytics 帳戶 或建立新帳戶
如果您建立新帳戶,請選取 Analytics 個回報地區,然後接受 為您的專案建立資料共用設定和 Google Analytics 條款。
-
按一下「建立專案」。如果使用「新增 Firebase」, 現有的 Google Cloud 專案)。
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」會建立專門用來建構及執行網頁應用程式。您可以建立 App Hosting 個後端,使用 Firebase 控制台或 Firebase CLI。
Firebase 主控台:從「Build」選單中依序選取「App Hosting」和 立即開始使用。
CLI: (3.9 以上版本) 如要建立後端,請執行下列指令
然後從本機專案目錄的根目錄中,將
project ID 做為引數 (用於預覽
僅支援 us-central1
區域):
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 設定:
- 在 GitHub 中,將變更推送至網頁應用程式的使用中分支版本。
- 開啟 的 App Hosting 個分頁: Firebase 控制台,然後選取後端的「View Dashboard」(查看資訊主頁)。 表格清單會顯示與推出作業相關聯的特定修訂版本 變化。
後續步驟
- 深入探討:逐步瞭解 Firebase 程式碼研究室 採用 Firebase 驗證功能和 Google AI 功能的託管應用程式: Next.js: Angular (Angular)
- 連結自訂網域。
- 設定後端。
- 監控推出作業、網站使用情況和記錄。