AI 工具 19 min read

Firebase .web.app 免費網域：5 步驟申請，一個帳號能開幾個

Firebase 的 .web.app 是免費內建網域，連 HTTPS 憑證都自動簽好。本文用 5 個步驟教你從零申請，並回答一個帳號到底能開幾個（單一專案最多 36 個 site）。

#Firebase #Firebase Hosting #免費網域 +5 tags
Firebase .web.app 免費網域：5 步驟申請，一個帳號能開幾個
本文目錄 · 11
TL;DR：你不用買網域。在 Firebase 建一個專案、部署你的站，Firebase 就免費自動配一組 {你的站名}.web.app 網址，連 HTTPS 憑證都幫你簽好。我部署一個像素羽球小遊戲拿到的 pixel-badminton.web.app 就這樣來的。下次你要自己申請，照下面五步走，10 分鐘搞定。 而且不是一個帳號只能一個——同一專案能開到 36 個 site（= 36 個免費網址），帳號還能開多個專案，現實上用不完。

📌 目錄

Firebase Hosting 免費 web.app 網域自動配發示意圖


🏸 起因：部署一個小遊戲，意外發現網址不用買

我用 React + TypeScript + Vite 寫了一個像素風羽球小遊戲，丟到 Firebase Hosting 上。部署完，CI 跑完，瀏覽器打開 https://pixel-badminton.web.app/——畫面就出來了，HTTPS 綠鎖頭也在。

我一開始也以為，要有一個 .web.app 結尾的乾淨網址，是不是得去哪裡買、或在 Firebase 後台開個什麼付費功能。結果完全不用：這組網址是 Firebase 在你建專案的當下就免費配給你的，連我都沒主動去申請。

這篇就把「下次你要自己申請一個免費 .web.app 網域，到底要做哪幾件事」從頭走一遍，順便講清楚能申請幾個、免費額度多少、什麼時候才真要花錢。

先講原理一句話：.web.app 是 Google 持有的頂級網域（TLD），專門配給 Firebase Hosting。官方文件寫得很直接——「every Firebase project has subdomains at no cost on the web.app and firebaseapp.com domains」。意思是每個 Firebase 專案都免費內建兩組子網域，連 HTTPS 憑證都自動簽好。你要做的只是「建專案 → 部署」，網址自己長出來。


🚀 下次我要怎麼申請一個免費網域？五步驟

這就是核心。下次想要一個 xxx.web.app 的免費 HTTPS 網址，照這五步：

前置依賴

依賴最低版本驗證指令
Google 帳號—能登入 console.firebase.google.com
Node20+node -v
一個要部署的網站—有一包 build 好的靜態檔（HTML/JS/CSS）

步驟一：建一個 Firebase 專案（決定網址前綴）

到 Firebase Console → 新增專案 → 取名字。這個專案名（更精確說是後面的 site 名）會變成你網址的前綴。我取 pixel-badminton，就拿到 pixel-badminton.web.app。

⚠️ 名字全球唯一，熱門字（如 game、test）通常被搶光了，取獨特一點的。

步驟二：裝 Firebase CLI 並登入

# 不用全域安裝，npx 直接跑最省事
npx firebase-tools login

瀏覽器會跳出來讓你用 Google 帳號授權，授權完終端機就登入了。

步驟三：在專案資料夾初始化 Hosting

進到你網站專案的資料夾，跑：

npx firebase-tools init hosting

它會互動式問你幾題，關鍵兩題：

  • 要哪個 Firebase 專案 → 選步驟一建的那個
  • public 目錄是哪個 → 填你 build 輸出的資料夾（Vite 是 dist、Create React App 是 build、純 HTML 就 public）
跑完會生出兩個設定檔 .firebaserc 和 firebase.json。

步驟四：部署

npx firebase-tools deploy --only hosting

CLI 跑完會印出一行：

Hosting URL: https://pixel-badminton.web.app

那行就是你的免費網域。

步驟五：round-trip 驗證（別只看 CLI 說成功）

打開那個網址，看到你的站 + 網址列綠色鎖頭（HTTPS）= 真的成功。

重點：不要看到 CLI 印 Deploy complete! 就以為好了——那只是「指令沒報錯」。真的好是「瀏覽器打開看得到畫面」。我自己驗收任何部署都堅持這條：從輸入端進、輸出端出、人眼看到結果。

就這樣，零成本、零 DNS 設定、HTTPS 自動有。Firebase 會自動幫你簽 SSL 憑證（官方原文：「Firebase automatically provisions SSL certificates for all your domains」），所以你的站一上線就是 https://，不是裸 http://。


🔢 我可以申請幾個？一個帳號的上限

這是我自己也好奇的問題：是不是一個帳號只能一個？ 答案是——不是，你可以拿到非常多個。

層級上限來源
同一個專案能開幾個 site最多 36 個Firebase multisite 官方文件
一個 site 給幾組免費網址2 組（.web.app + .firebaseapp.com）官方預設
一個 Google 帳號能開幾個專案預設約 5～10 個（不夠可申請提高）Google Cloud 預設配額
算一下：一個專案就能塞 36 個 .web.app 網址，帳號還能開好幾個專案——兩個相乘，一個帳號輕鬆拿到數十甚至上百個免費網址。對個人用途，這數字等於「用不完」。

要在同一個專案多開 site，用這指令：

npx firebase-tools hosting:sites:create my-second-site

跑完你就多了一個 my-second-site.web.app，一樣免費、一樣自動 HTTPS。

唯一會卡你的不是數量上限，而是名稱全球唯一——好記的字早被搶走，取名要有點創意。

預設兩組網址差在哪

每個 site 其實一次給你兩個網址，指向同一份內容：

格式範例（我的遊戲）角色
{站名}.web.apppixel-badminton.web.app主力（短、新，對外用這個）
{站名}.firebaseapp.compixel-badminton.firebaseapp.com備用（早年預設）
部署一次，兩個同時生效。平常拿 .web.app 用就好。


⚖️ .web.app vs .firebaseapp.com vs 自訂網域

我自己一開始也搞不清楚這三種網址的差別。直接上表：

維度.web.app（預設）.firebaseapp.com（預設）自訂網域（如 game.你的站.com）
要花錢嗎✗ 免費✗ 免費△ 網域本身要向網域商買
自動配發✓ 建專案就有✓ 建專案就有✗ 要手動連接
要設定 DNS 嗎✗ 不用✗ 不用✓ 要加 TXT + A 記錄
HTTPS 憑證✓ 自動免費✓ 自動免費✓ 自動免費（Firebase 幫簽）
上線速度⚡ 部署即用⚡ 部署即用🐢 DNS 生效 + 憑證最多等 24 小時
適合誰個人專案、Demo、小工具同左（備用）正式品牌、對外營運的產品
重點：自訂網域那欄唯一打 △（要花錢）的是「網域本身」——而那筆錢是付給 GoDaddy / Cloudflare / Google Domains 這類網域註冊商，不是付給 Firebase。Firebase 端把自訂網域接上去、簽 HTTPS 憑證，這些動作本身不收費。

換句話說：Firebase 從頭到尾沒跟你收網域的錢。免費網域是真免費，自訂網域的成本在網域商那端。


💰 免費額度：Spark 方案到底給你多少

「免費網域」聽起來很爽，但會不會流量一大就開始噴錢？來看 Firebase 的免費方案（Spark plan）給多少。

根據 Firebase Hosting 官方用量與計費文件：

項目Spark 免費額度超量後（Blaze 方案）
儲存空間10 GB每多 1 GB $0.026
資料傳輸10 GB / 月每多 1 GB $0.15
註：Firebase 的 pricing 頁有時把傳輸額度寫成「360 MB/日」，換算約 10.8 GB/月，跟官方文件的「10 GB/月」是同一個量級的兩種框法。以官方計費文件的 10 GB/月 為準。

對一個個人小遊戲、作品集網站、活動 landing page 來說，這個額度你幾乎用不到上限。我那個像素羽球的整包 build 才 180 KB（gzip 後約 60 KB），就算每天幾百個人玩，離 10 GB/月 還差得遠。

而且 Spark 方案不需要綁信用卡——沒有付款方式在檔，就不會有「不小心爆量被扣錢」的風險。對純練習、純展示的專案，這是最安全的選擇。

真要超量、需要升級到 Blaze（按量付費）方案，超出的部分也只是傳輸每 GB $0.15、儲存每 GB $0.026，以小專案的規模，幾乎可以忽略。


📅 什麼時候才需要花錢買網域

既然 .web.app 免費又好用，什麼情況下才該掏錢買自訂網域？我的判斷是這幾個情境：

⭐ 該買自訂網域的時候

  • 對外營運的正式產品 — 客戶看到 yourproduct.web.app 跟 yourproduct.com，信任感差很多
  • 要做品牌 / SEO — 自己的網域才能累積網域權重，.web.app 子網域權重歸 Google
  • 要發 email、做行銷 — hello@yourbrand.com 比子網域專業
  • 怕平台綁定 — 哪天想搬離 Firebase，自訂網域只要改 DNS 指向，使用者完全無感

🆓 用免費 .web.app 就夠的時候

  • 個人作品集、Demo、給朋友玩的小遊戲（像我這個羽球）
  • 還在驗證點子的 MVP，網址不重要
  • 內部工具、教學範例、一次性活動頁
一句話總結：.web.app 解決「我要一個能分享的 HTTPS 網址」，自訂網域解決「我要一個代表我品牌的網址」。前者免費就到位，後者才需要為「品牌」這件事付網域費。


⚡ 進階：接 GitHub Actions，push 就自動上線

手動 deploy 久了會懶。我這個遊戲接了 GitHub Actions，每次 push 到 master 自動 build + 部署，網址內容自己更新——這是我實際在用的設定：

- name: Build
  run: npm run build

  • name: Deploy to Firebase Hosting
    •  
run: npx firebase-tools deploy --only hosting:pixel-badminton --project game-hub-d2bbf --token "$FIREBASE_TOKEN" --non-interactive
  env:
    FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

那個 FIREBASE_TOKEN 用 npx firebase-tools login:ci 產一次，存進 GitHub repo 的 Secrets，CI 就能免互動部署。init hosting 生出來的 firebase.json 裡，記得 SPA 要加這條 rewrites，把所有路徑導回 index.html 讓前端路由接手：

{
  "hosting": {
    "public": "dist",
    "rewrites": [{ "source": "**", "destination": "/index.html" }]
  }
}
pixel-badminton 遊戲 GitHub repo 社群預覽圖

免費網域是怎麼配發 + 路由的

https://pixel-badminton.web.app

自動 SSL 憑證

免費配發

使用者瀏覽器

Firebase 全球 CDN

Hosting site: pixel-badminton

dist/ 靜態檔案

Firebase 專案
game-hub-d2bbf


🧨 踩坑：我自己記錯的免費額度數字

寫這篇之前，我憑印象跟人講過一句「免費方案儲存 360MB」——這是錯的，被我自己查官方文件時抓出來。

正確的是：

  • 儲存 10 GB（不是 360 MB）
  • 傳輸 10 GB/月（pricing 頁的「360 MB/日」是「傳輸」的另一種框法，不是「儲存」）
我把「360 MB/日的傳輸」記成了「360 MB 的儲存」，兩個指標張冠李戴。差很多——10 GB 跟 360 MB 差了快 30 倍。

教訓老套但有用：計費數字一律查官方文件，不要憑記憶報。Firebase 的數字甚至同一家官網兩個頁面框法都不同（計費文件寫「10 GB/月」、pricing 頁寫「360 MB/日」），憑印象幾乎一定錯。這也是我寫這篇時逐個數字回查 usage-quotas-pricing 文件的原因。


❓ 常見問題 FAQ

Q1：.web.app 網域真的完全免費嗎？會不會哪天開始收錢？

是免費的，且不需綁信用卡。官方文件明寫「at no cost」。它屬於 Firebase Hosting 的免費 Spark 方案，你只在「儲存超過 10 GB」或「月傳輸超過 10 GB」時才會被要求升級付費——對小專案幾乎不會發生。

Q2：.web.app 跟 .firebaseapp.com 我該用哪個？

兩個指向同一份內容，隨便用。建議拿較短、較新的 .web.app 當主力對外分享，.firebaseapp.com 留著備用即可。

Q3：我可以自己改 .web.app 前面那個名字嗎？

可以，前綴就是你的 Hosting site 名稱。建專案/建 site 時取的名字決定它，例如我取 pixel-badminton 就得到 pixel-badminton.web.app。但這個名字全球唯一，熱門字可能被搶走。

Q4：綁自訂網域要付錢給 Firebase 嗎？

不用。Firebase 端連接自訂網域、簽 HTTPS 憑證都不收費。你要付的只有「向網域註冊商買網域」那筆錢（一年通常 NT$300～600 起跳），那是付給 GoDaddy / Cloudflare 這類網域商，跟 Firebase 無關。

Q5：自訂網域要怎麼接？

在 Firebase Hosting 後台輸入你的網域 → 加一筆 TXT 記錄到 DNS 驗證所有權 → 把 A 記錄指向 Firebase 給的 IP → 等 DNS 生效，Firebase 自動簽 SSL（最多 24 小時，多半幾小時內好）。注意每個 apex 網域最多 20 個子網域（SSL 憑證限制）。


🔗 延伸資源

author
陳
陳彥彤

AI 工程師 · AI 顧問。Java 後端 8 年、AI 工程師 2 年。AI 內訓 · AI 導入顧問 · 前後端與雲端培訓。

support

覺得文章有用可以到 GitHub 給個 star，或是透過信箱聊聊 AI 內訓、AI 導入顧問或前後端 / 雲端培訓。

email github
related

相關文章

[工程實作] · 18min
我讓 AI 把遊戲部署上自己的網域:難的不是 deploy,是怎麼確認真的上線
我讓 Claude Code 一條龍把一個 React 遊戲(戰旗 J7 Reborn)部署上 Firebase Hosting、再接自己的網域 j7.yanchen.app,全程只下一句「上架到這個網域」。關鍵不是 `firebase deploy` 那 30 秒,是「怎麼判斷真的上線了」:Deploy complete!、Console 顯示「已連結」、單次 curl 回 200,三個都不算數。這篇把 build → deploy → 接 custom domain → DNS → 等 SSL → round-trip 驗證整條寫透,重點放在那個卡了幾小時的坑:custom domain 顯示「已連結」卻一直 404 —— 以及為什麼那其實不是設定錯,是邊緣節點內容還沒收斂,該等不該動。附 openssl 驗 SAN、curl 連打、SPA rewrite 的實際做法。
[工程實作] · 21min
Claude Code Teams Plugin 為什麼不會自動更新？根因 + 3 步修法
Claude Code Teams Plugin 永遠不更新的根因：version string 兩端相等。3 步修法：git SHA 比對 + GitHub Action 自動 bump + Managed Settings 推 SessionStart hook，session 啟動自動拉最新。
[工作流] · 21min
Claude Code Hook 怎麼用？git push 後自動驗 GitHub Actions 部署（PostToolUse 實戰）
每次 git push 完都要手動切到 GitHub Actions 頁面盯著部署跑完，綠了放心、紅了回來修——這件事重複到讓人煩。我用 Claude Code 的 PostToolUse hook 把它自動化：hook 攔到 git push 成功就注入一段任務指示，叫 Claude 排程約 70 秒後查 Actions 結果，全綠回報、紅了抓 log 修。關鍵是一次性驗證（ScheduleWakeup 而非無限輪詢），而且改版後不綁特定 workflow 名、用 commit SHA 對齊，任何有 push-triggered Actions 的 repo 都通用。本文把實作三段、additionalContext 機制、從寫死 deploy.yml 到通用的兩刀改法，以及踩到的欄位名坑（tool_response 才是對的）全寫下來。
← all posts