開始使用 Firebase 託管

Firebase Hosting 提供快速、安全且可靠的方式,可託管應用程式的靜態資產 (HTML、CSS、JavaScript、媒體檔案等),以及提供動態內容和託管微服務

我們的正式環境等級託管服務採用全球內容傳遞網路 (CDN) 做為後盾,Hosting 預設會透過 SSL 提供內容,且可搭配您自己的自訂網域使用,或在 web.appfirebaseapp.com 上,透過專案的子網域免費使用。




如需 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 專案,才能設定 Firebase Hosting

步驟 1:安裝 Firebase CLI

請參閱 Firebase CLI 說明文件,瞭解如何安裝 CLI更新至最新版本

步驟 2:初始化專案

如要將本機專案檔案連結至 Firebase 專案,請在本機專案目錄的根目錄中執行下列指令:

firebase init hosting

在專案初始化期間,從 Firebase CLI 提示中:

  1. 選取要連結至本機專案目錄的 Firebase 專案。

    所選 Firebase 專案是本機專案目錄的「預設」Firebase 專案。如要將其他 Firebase 專案連結至本機專案目錄,請設定專案別名

  2. 指定要做為公開根目錄的目錄。

    這個目錄包含所有公開放送的靜態檔案,包括 index.html 檔案,以及您要部署至 Firebase Hosting 的任何其他資產。

    • 靜態應用程式:如果您要部署靜態應用程式,請按照下列步驟操作:

      • 公開根目錄的預設名稱為 public

      • 您現在可以指定公開根目錄,也可以稍後在 firebase.json 設定檔中指定

      • 如果您選取預設值,但沒有名為 public 的目錄,Firebase 會為您建立該目錄。

      • 如果公開根目錄中沒有有效的 index.html 檔案或 404.html 檔案,Firebase 會為您建立。

    • 選擇加入 App Hosting:如果 CLI 偵測到 SSR 網頁框架 (例如 Next.js 或 Angular Universal) 的功能,可能會建議初始化 Firebase App HostingApp Hosting 是全端架構應用程式的建議部署解決方案。您可以繼續進行 App Hosting 設定,或繼續使用 Hosting (傳統版) 僅部署靜態內容。

  3. 為網站選擇設定。

    如果您選取建立單頁應用程式,Firebase 會自動為您新增重寫設定

初始化完成後,Firebase 會自動建立兩個檔案並新增至本機應用程式目錄的根目錄:

  • 列出專案設定的 firebase.json 設定檔。如要進一步瞭解這個檔案,請參閱「設定代管行為」頁面。

  • 儲存專案別名.firebaserc 檔案。

步驟 3:部署至網站

如要部署至網站,請在本機專案目錄的根目錄執行下列指令:

firebase deploy --only hosting

這項指令會將 Hosting 內容和設定部署至下列 Firebase 佈建的子網域:

  • PROJECT_ID.web.app
  • PROJECT_ID.firebaseapp.com

進一步瞭解如何部署及在本機測試網站

後續步驟

現在可以向全世界分享你的網站了!