開始使用 App Hosting

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

如需 AI 輔助，請將下方提示詞複製到 AI 程式設計代理 (例如 Antigravity、Claude Code、Codex 和 Cursor)。 你可以自訂提示，並與代理程式互動。如需詳細安裝資訊，請參閱 Firebase Agent Skills。 

Help me use Firebase in my app.
1. Make sure that **Firebase agent skills** are installed and updated. For Claude Code, Codex, or Cursor agents, help me install the Firebase plugin. For other agents, run `npx skills add firebase/agent-skills`.  Always try to use **Firebase agent skills** for Firebase-related tasks.
2. Help me use Firebase to host my web app. Set up my app to use Firebase, and then deploy my app.

本指南說明如何在 Firebase 控制台中設定 App Hosting，以便在每次將新修訂版本提交至 GitHub 存放區時，自動部署應用程式。完成這個流程後，您會獲得即時的 Next.js 或 Angular 範例應用程式，每當您將新變更提交至 GitHub 存放區的 main 分支版本時，系統就會重新部署該應用程式。

本指南著重於建議使用的 Firebase 控制台流程，但還有其他部署方式，包括使用 Firebase CLI 部署本機程式碼，不必連線至 GitHub。

步驟 1：將範例存放區分叉

前往 https://github.com/firebase/apphosting-adapters，然後選取「Fork」。

步驟 2：建立 App Hosting 後端

  1. 在 Firebase 控制台中，依序點選「Hosting & Serverless」(主機代管和無伺服器) >「App Hosting」(應用程式主機代管)。

  2. 按一下「開始使用」。

  3. 如果系統提示，請升級至即付即用 Blaze 定價方案，即可使用 App Hosting。

App Hosting 後端設定的螢幕截圖。

按照提示完成下列步驟：

  • 選擇主要區域 (通常是距離使用者最近的區域)。
  • 連結至 GitHub。選擇您剛建立的存放區，方法是將 firebase-framework-tools 存放區分叉。
  • 將應用程式的根目錄設為下列其中一項：
  • 將正式版分支設為主要版本。
  • 啟用自動推出功能 (預設為啟用)。
  • 為後端指派名稱。
  • 選取執行階段環境。系統預設會為您預先選取最新建議的 Node.js 版本。
    • 設定自動更新基本映像檔 (ABIU)。 ABIU 預設為啟用，並會自動將安全性修補程式套用至基礎環境。如要停用 ABIU，請為執行階段選取「未指定」。
  • 建立新的 Firebase 網頁應用程式。

選取「完成並部署」。

步驟 3：查看已部署的應用程式

建立後端時，Firebase 會提供免付費的子網域，供使用者瀏覽網頁應用程式。格式為 backend-id--project-id.us-central1.hosted.app。

在後端資訊主頁的「後端資訊」列中，選取後端即時連結，即可查看新網站：

後端資訊列的螢幕截圖，並強調顯示應用程式的即時連結。

步驟 4：推送變更來觸發發布作業

建立後端並取得線上網址後，每當您將變更推送至 GitHub 存放區的線上分支版本，系統就會觸發新版網頁應用程式的推出作業。如要測試 App Hosting 設定：

  1. 在示範 GitHub 存放區的分支中，前往試用版應用程式首頁的來源，進行任何可辨識的編輯，然後將變更推送至主要分支版本。如要尋找首頁，請按照下列步驟操作：

    • Next.js： /starters/nextjs/basic/src/app/page.tsx
    • Angular： /starters/angular/basic/src/app/pages/home/home.component.html

  2. 在 Firebase 控制台中，監控 App Hosting，因為新變更會逐步推出至正式環境。推出完成後，您可以在應用程式首頁查看變更。

後續步驟