你要上线一个新网站(不管是个人博客、AI 工具站、独立产品),最常见的选择就是 Firebase Hosting 和 Vercel。这两者都从免费层起步,都对独立开发者非常友好——但适合的场景并不完全相同。如果你还没用过任意一个,先看 Firebase Hosting 是什么 与 Vercel 是什么 这两篇入门。
一句话总结
- Vercel:以 Next.js 等前端框架为核心,体验最丝滑,部署默认 Serverless,适合”前端 + Edge + 第三方 API”型应用。
- Firebase Hosting:Google 出品,最适合静态站和与 Firebase 整套服务(Auth、Firestore、Cloud Functions)一起用。
哪种网站适合 Firebase Hosting
- 静态内容站(Astro / Hugo / Eleventy)。上线清单参考 Firebase Hosting 上线检查清单。
- 同时要用 Firebase 数据库 / 登录 / 推送的项目
- 想接 Google AdSense + 一站式部署在 Google 生态里的项目
- 希望简单粗暴
firebase deploy就完事的人。免费额度清单见 Firebase Hosting 免费层。
哪种网站适合 Vercel
- Next.js / SvelteKit / Nuxt 等框架的主战场。最小可行示例见 Vercel 部署 Astro 与 Vercel 部署 Next.js。
- 需要 ISR(增量静态再生成)、Edge Function、Image Optimization 的项目
- 希望和 GitHub PR 预览部署绑定的项目。完整上线流程见 Vercel 内容站上线检查清单。
- 与第三方 API(Stripe、Resend、Upstash 等)整合较多
关键差异点
| 维度 | Firebase Hosting | Vercel |
|---|---|---|
| 部署体验 | firebase deploy 命令行 | 推送 GitHub 自动部署 |
| Serverless | Cloud Functions(独立产品) | 内置 API Routes / Edge Functions |
| 自定义域名 | 免费 HTTPS | 免费 HTTPS |
| 免费额度 | 一定流量 / Functions 调用 | Hobby 计划相当大方 |
| 静态站性能 | 全球 CDN | 全球 CDN,对 Next 体验最佳 |
| 与 GitHub | 需手动接 Actions | 一键,且 PR 预览体验最好 |
| 适合栈 | Astro、Vite、CRA 等静态站 | Next.js 等优先 |
SEO 上的差别
现实点说:两者都能做出对 Google 友好的网站。决定 SEO 的不是它们,而是你的内容、结构、爬虫可访问性、hreflang、sitemap 等。
它们在 SEO 上几乎是平的。真正影响 SEO 的不是托管平台,而是你的网站本身。
我个人的选择
- 做纯静态内容站(比如这个 AI 工具指南):Firebase Hosting 足够。
- 做前后端一体的产品 + 需要数据库:Firebase(Hosting + Auth + Firestore + Functions)整套用。
- 做复杂 Next.js / Edge 应用 + 大量 PR 预览:Vercel。
总结
不要花一个月时间在”我该用哪个平台”上。先发布。 大部分独立项目无论选哪家,都不会卡在托管层。真出问题时,Firebase Hosting 部署失败 与 Vercel build 失败 排查常见原因;上线后域名与 SSL 相关的问题,请看 自定义域名 SSL 延迟。如果同一个域名挂到 Vercel 几分钟就好、挂到 Firebase 却一直 “needs setup”,这是所有权模型不同导致的——参考域名在 Vercel 能用、Firebase 不行。
成本与风险检查
- 先弄清哪些部分免费,哪些会在流量、存储、函数调用、build minutes 或团队席位增长后开始计费。
- 不要把密钥放进静态包、截图、公开仓库或客户端配置里。
- 不要在一次不可控发布里同时改域名、SEO、广告、Analytics、支付和托管配置。
- 改 DNS、canonical、redirect、计费计划或 App Store 设置前,先写清楚回滚路径。
需要记录什么
每次有意义的改动都留一条上线记录:日期、原因、受影响 URL、跑过的命令、改过的平台设置、DNS 记录、动过的环境变量,以及回滚方式。独立站平时看起来简单,三个月后出问题就不简单了。文档是给未来的自己省掉从零排查的时间。
详细执行路径
- 先写清楚这次改动的业务原因:更快上线、改善收录、降低托管风险、准备变现、提升转化,还是方便维护。
- 改动前记录当前状态:域名、托管目标、build 命令、Analytics、Search Console property、计费计划和关键 URL。
- 先做能证明改动有效的最小版本。网站通常至少要覆盖首页、一篇文章页、sitemap、robots.txt、canonical 和 404。
- 先在本地或 preview 测。生产环境应该是确认步骤,不应该是第一次发现行为的地方。
- 选择你能盯日志、Analytics、Search Console 和页面表现至少 30 分钟的时间上线。
- 把最终设置和回滚路径记录到 README、上线记录或内部 checklist。
上线记录模板
改动:
- [改了什么,为什么改]
受影响 URL:
- /
- /articles/example/
- /sitemap.xml
- /robots.txt
运行命令:
- npm run build
- [部署命令]
平台设置改动:
- Hosting:
- DNS:
- Search Console:
- Analytics:
- 广告 / 支付 / App Store:
验证:
- 首页:
- 深层页面:
- 移动端:
- 404:
- Sitemap:
- Canonical:
回滚:
- 上一个 release:
- 旧 DNS / 配置:
- 负责人:
常见上线错误
- 把”部署成功”当成”网站可上线”。部署成功仍然可能有路由坏、canonical 错、sitemap 旧、Analytics 漏、收录被挡。
- DNS 和代码一起改。流量掉了以后,你会不知道是哪一层导致的。
- 忘了静态站的环境变量是在 build 时打进去的。
- AI 生成内容发布前不核对准确性、搜索意图、内链和重复覆盖。
- 等到 AdSense、Search Console 或 App Store 审核时,才发现隐私、联系、政策或所有权信息缺失。