AI Skills
firebase-app-hosting-basics

firebase-app-hosting-basics

熱門

使用 Firebase App Hosting 部署與管理網頁應用程式。當部署具有後端的 Next.js/Angular 應用程式時，請使用此技能。

357星標
71分支
更新於 2026/6/20
獲取技能源代碼

相關技能

web-artifacts-builder15萬source-driven-development7.8萬shadcn12萬
SKILL.md
readonlyread-only
name
firebase-app-hosting-basics
description

使用 Firebase App Hosting 部署與管理網頁應用程式。當部署具有後端的 Next.js/Angular 應用程式時，請使用此技能。

App Hosting 基礎

說明

此技能讓代理程式能夠使用 Firebase App Hosting 部署與管理現代化全端網頁應用程式（Next.js、Angular 等）。

重要提示：若要使用 App Hosting，您的 Firebase 專案必須採用 Blaze 計費方案。請引導使用者前往 https://console.firebase.google.com/project/_/overview?purchaseBillingPlan=metered 升級方案。

Hosting 與 App Hosting 的比較

選擇 Firebase Hosting 的情況：

  • 您正在部署靜態網站（HTML/CSS/JS）。
  • 您正在部署簡單的 SPA（React、Vue 等，不含 SSR）。
  • 您希望透過 CLI 完全控制建置與部署流程。

選擇 Firebase App Hosting 的情況：

  • 您使用支援的全端框架，例如 Next.js 或 Angular。
  • 您需要伺服器端渲染（SSR）或 ISR。
  • 您想要自動化的「git push 即部署」工作流程，無需額外設定。

部署至 App Hosting

從原始碼部署

這是大多數使用者建議的流程。

  1. 在 firebase.json 中設定 apphosting 區塊。
    {
  "apphosting": {
    "backendId": "my-app-id",
    "rootDir": "/",
    "ignore": [
      "node_modules",
      ".git",
      "firebase-debug.log",
      "firebase-debug.*.log",
      "functions"
    ]
  }
}
  2. 建立或編輯 apphosting.yaml——請參閱設定以了解更多資訊。
  3. 如果應用程式需要安全存取敏感金鑰，請使用 npx -y firebase-tools@latest apphosting:secrets 指令設定並授予機密存取權限。
  4. 準備好部署時，執行 npx -y firebase-tools@latest deploy。

透過 GitHub 自動部署（CI/CD）

或者，設定一個連接到 GitHub 儲存庫的後端，以實現「git push」自動部署。
這僅建議給進階使用者使用，並非使用 App Hosting 的必要條件。
請參閱CLI 指令以了解如何使用 CLI 指令進行設定。

模擬

請參閱模擬以了解如何使用 Firebase Local Emulator Suite 在本機測試應用程式。