開始使用 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 代理技能。 

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。選擇您剛才透過分支 apphosting-adapters 存放區建立的存放區。
  • 將應用程式的根目錄設為下列其中一項：
  • 將正式分支版本設為 main。
  • 啟用自動推出功能 (預設為啟用)。
  • 為後端命名。
  • 選取執行階段環境。根據預設，系統會預先選取最新建議的 Node.js 版本。
    • 設定自動更新基本映像檔 (ABIU)。ABIU 預設為啟用，會自動將安全性修補程式套用至基礎環境。如要停用 ABIU，請將執行階段設為「未指定」。
  • 建立新的 Firebase 網頁應用程式。

選取「完成並部署」。

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

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

在後端資訊主頁的「Backend information」(後端資訊) 列中，選取實際運作後端的連結，即可查看新網站：

後端資訊列的螢幕截圖，其中強調顯示實際應用程式連結。

步驟 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，因為新的變更會逐步推出至正式環境。推出完成後，您可以在應用程式的首頁查看變更。

後續步驟