我的情况
我是全栈开发者，有个 Vue 3 单页应用（SPA），月访问量 4 万左右，流量 12GB。
之前部署在 Firebase Hosting 上，用了一年多。最近换到了阿里云 ESA。
核心原因：国内访问太慢了，首屏加载经常 3-4 秒，用户直接跑了。
这篇文章记录为什么换、怎么换、换了之后怎么样。不是软文，纯个人踩坑经历。
为什么一开始选 Firebase Hosting
1. Google 生态完整（一站式解决方案）
Firebase 提供全家桶：
- Firebase Hosting（静态托管）
- Cloud Firestore（数据库）
- Authentication（用户认证）
- Cloud Functions（后端逻辑）
- Analytics（数据分析）
我的应用用了 Firestore + Auth，自然就用 Firebase Hosting 部署前端，一个平台搞定所有事。
2. 部署体验很好
Firebase 的部署流程：
npm install -g firebase-tools
firebase init hosting
firebase deploy
第一次用的时候觉得："太简单了！"
而且支持 CI/CD：
- GitHub Actions 集成
- 每次 push 自动部署
- 预览环境（PR 自动生成预览 URL）
3. 免费额度够用
Firebase Hosting 免费版（Spark Plan）：
- 10GB 存储
- 360MB/天 = 10.8GB/月 传输流量
- 免费 SSL 证书
- 自定义域名
对于我的小应用（12GB/月），免费额度稍紧但勉强够用。
4. 自动 SSL + CDN
Firebase Hosting 自动提供：
- Let's Encrypt SSL 证书（自动签发、续期）
- Google Cloud CDN（全球节点）
- HTTP/2 支持
- 自动压缩（Gzip/Brotli）
不需要任何配置，开箱即用。
Firebase Hosting 的实际体验
优点（确实不错）
1. 部署流程简单
从构建到上线，全程一条命令：
npm run build && firebase deploy
控制台能看到部署历史，可以一键回滚到之前的版本。
2. 与 Firebase 其他服务集成完美
我的应用用了：
- Firestore（数据库）
- Authentication（用户登录）
- Cloud Functions（后端 API）
前端部署在 Firebase Hosting，所有服务在同一个项目下，权限配置、API 调用都很方便。
3. 预览频道（Preview Channels）
每个 PR 可以自动部署到独立的预览 URL：
PR #123: my-app--pr-123-abc.web.app
PR #124: my-app--pr-124-def.web.app
测试完再合并到生产环境，很安全。
4. 版本管理和回滚
Firebase Hosting 保留所有部署历史，可以一键回滚到任何之前的版本。
这个功能救了我好几次（部署了有 bug 的版本，立刻回滚）。
5. 免费 SSL 自动续期
Let's Encrypt 证书自动签发、自动续期，不用操心。
而且支持自定义域名，配置也很简单。
缺点（让我最终放弃的原因）
1. 国内访问慢到崩溃（最致命）
这是我换掉 Firebase Hosting 的核心原因。
我用站长工具测了国内访问速度：
- 北京：TTFB 620ms
- 上海：TTFB 580ms
- 广州：TTFB 640ms
- 成都：TTFB 700ms
- 深圳：TTFB 590ms
- 杭州：TTFB 610ms
平均延迟 600ms+，首屏加载 3-4 秒，用户体验极差。
而且不稳定，高峰期能到 800-1000ms，有时候甚至超时。
原因：
- Firebase Hosting 用的是 Google Cloud CDN
- Google Cloud 在中国大陆没有节点
- 所有请求要跨境到香港/台湾/日本
- 经过防火墙，延迟高且不稳定
2. 免费额度偏紧
Firebase Hosting 免费版：
- 10.8GB/月 传输流量
- 1GB/天 = 30GB/月 存储操作
我的应用每月流量 12GB，勉强够用，但如果访问量增长就超了。
超量后自动升级到 Blaze Plan（按量付费），虽然不贵但要绑信用卡。
3. 部署速度有时候很慢
虽然大部分时候 1-2 分钟部署完，但偶尔会遇到：
- 上传文件慢（跨境上传，网络不稳定）
- CDN 缓存刷新慢（需要等 10-20 分钟）
有次紧急修 bug，部署等了 15 分钟，急死了。
4. Firebase CLI 需要翻墙
firebase deploy 有时候需要翻墙才能连上 Google 服务器。
没翻墙的话，部署会超时或失败。
对于国内开发者，这是个很烦人的问题。
5. Cloud Functions 冷启动慢
虽然不是 Hosting 的问题，但我的应用用了 Cloud Functions 做后端。
Cloud Functions 冷启动很慢（1-3 秒），而且国内访问延迟高。
结果是：前端慢 + 后端慢，用户体验雪上加霜。
为什么换到 ESA
触发点：用户投诉 + 流失率分析
有天看 Google Analytics，发现：
- 首页跳出率 42%（行业平均 25%）
- 平均加载时间 3.8 秒（目标是 1 秒）
- 68% 的用户在加载完成前离开
然后收到几条用户反馈：
- "你这网站打开好慢，是不是挂了？"
- "等了半天还在加载，算了不用了"
- "能不能优化一下速度？"
这时候意识到：虽然 Firebase 生态很好，但用户体验不好，就失去意义了。
决定试试 ESA
正好我的域名已经有 ICP 备案，可以用阿里云 ESA 的国内节点。
看了一下 ESA 免费版：
- 50GB 流量/月（比 Firebase 的 10.8GB 多 4 倍）
- 国内节点（延迟低）
- 免费 DDoS/WAF 防护
- 不需要翻墙
决定试试。
核心权衡：失去 Firebase 生态整合
Firebase Hosting 最大的优势是与 Firebase 其他服务的整合。
但我分析了自己的架构：
- 前端：纯静态 SPA（Vue 3）
- 后端：Firestore + Cloud Functions
其实前端和后端是分离的，前端只是调用后端 API。
前端换到 ESA，不影响后端继续用 Firestore + Cloud Functions。
只是需要配置 CORS，允许 ESA 的域名访问 Cloud Functions。
迁移过程（比想象中简单）
最大的顾虑：失去 Firebase CLI 部署
Firebase Hosting 最大的优势是 firebase deploy 一条命令搞定。
ESA 没有 CLI，需要自己配置 CI/CD。
但我发现可以用 GitHub Actions 实现，效果一样。
迁移步骤
1. 本地构建测试
先在本地跑一下构建：
npm run build
2. 开通 ESA + 配置 OSS
- 阿里云控制台开通 ESA（免费版）
- 创建 OSS Bucket 作为源站
- ESA 添加站点，源站指向 OSS
3. 配置 CORS（让前端能访问 Cloud Functions）
在 Cloud Functions 中添加 CORS 配置：
const functions = require('firebase-functions');
const cors = require('cors')({
origin: [
'https://myapp.com',
'https://myapp.firebaseapp.com'
]
});
exports.myApi = functions.https.onRequest((req, res) => {
cors(req, res, () => {
res.json({ message: 'Hello from Cloud Functions' });
});
});
4. 配置 GitHub Actions
创建 .github/workflows/deploy.yml：
name: Deploy to ESA
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
env:
NODE_ENV: production
VITE_FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}
VITE_FIREBASE_AUTH_DOMAIN: ${{ secrets.FIREBASE_AUTH_DOMAIN }}
VITE_FIREBASE_PROJECT_ID: ${{ secrets.FIREBASE_PROJECT_ID }}
- name: Upload to OSS
uses: manyuanrong/setup-ossutil@v3.0
with:
endpoint: oss-cn-hangzhou.aliyuncs.com
access-key-id: ${{ secrets.OSS_KEY_ID }}
access-key-secret: ${{ secrets.OSS_KEY_SECRET }}
- name: Sync files
run: |
# 上传文件并设置缓存头
ossutil cp -r dist/ oss://myapp-bucket/ \
--update \
--meta Cache-Control:max-age=31536000#*.js,*.css,*.png,*.jpg,*.svg,*.woff2 \
--meta Cache-Control:max-age=3600#*.html
- name: Purge CDN cache
if: github.event_name == 'push'
run: |
# 刷新 CDN 缓存（只在 push 到 main 时）
curl -X POST "https://esa.api.aliyun.com/purge" \
-H "Authorization: Bearer ${{ secrets.ESA_API_KEY }}" \
-d '{"urls": ["https://myapp.com/*"]}'
- name: Comment PR with preview URL
if: github.event_name == 'pull_request'
uses: actions/github-script@v6
with:
script: |
github.rest.issues.createComment({
issue_number: context.issue.number,
owner: context.repo.owner,
repo: context.repo.repo,
body: '📦 Preview: https://preview-${{ github.event.pull_request.number }}.myapp.com'
})
关键点：
- 前端仍然用 Firebase SDK（Firestore + Auth）
- 只是托管从 Firebase Hosting 换到 ESA
- 支持 PR 预览（需要配子域名）
- 自动刷新 CDN 缓存
5. ESA 配置优化
在 ESA 控制台配置：
# 缓存规则
*.js, *.css, *.png, *.jpg, *.svg, *.woff2
Cache-Control: public, max-age=31536000, immutable
*.html
Cache-Control: public, max-age=0, must-revalidate
/index.html
Cache-Control: no-cache
# SPA 路由配置（重要！）
/* → /index.html [404]
# 所有 404 请求都返回 index.html（让 Vue Router 处理）
# Gzip/Brotli 压缩
✅ 启用 Gzip
✅ 启用 Brotli
# 安全配置
✅ DDoS 防护
✅ WAF 规则
✅ CC 攻击防护
6. 切换 DNS
myapp.com CNAME xxx.alikunlun.com
等 DNS 生效（10-30 分钟），完成。
总耗时：3 小时左右（主要是配置 CORS + GitHub Actions）。
ESA 的使用体验
优点（让我满意的地方）
1. 国内访问快了 40 倍
迁移后我用多地测速工具测了一遍：
| 地点 |
Firebase Hosting |
ESA (备案后) |
提升 |
| 北京 |
620ms |
14ms |
97.7% ↓ |
| 上海 |
580ms |
11ms |
98.1% ↓ |
| 广州 |
640ms |
16ms |
97.5% ↓ |
| 成都 |
700ms |
19ms |
97.3% ↓ |
| 深圳 |
590ms |
12ms |
98.0% ↓ |
| 杭州 |
610ms |
10ms |
98.4% ↓ |
从 600ms 降到 14ms，快了 40 倍。
首屏加载时间从 3.8 秒降到 0.9 秒，跳出率从 42% 降到 19%。
下面是实测的国内多地访问延迟对比图：
2. 免费额度多 4 倍
Firebase Hosting 免费版：10.8GB/月
ESA 免费版：50GB/月
ESA 的免费额度是 Firebase 的 4.6 倍。
我的应用每月流量 12GB，在 Firebase 上勉强够用，在 ESA 上很宽裕。
3. 部署不需要翻墙
Firebase CLI 有时候需要翻墙，ESA 用 GitHub Actions 部署，不需要翻墙。
而且 GitHub Actions 在国内访问速度还可以，部署速度比 Firebase 快。
4. 安全能力开箱即用
ESA 免费版自带：
- DDoS 防护（20Gbps）
- WAF 规则（SQL 注入、XSS 等）
- CC 攻击防护
- IP/地域封禁
- Bot 管理
Firebase Hosting 这些都没有，要自己接 Cloudflare。
5. CDN 缓存刷新快
Firebase Hosting 的 CDN 缓存刷新需要 10-20 分钟，有时候更新了代码，用户还是看到旧版本。
ESA 的 CDN 缓存刷新 1-2 分钟就完成，而且可以 API 手动刷新。
6. 后端仍然用 Firebase
前端换到 ESA，后端仍然用 Firestore + Cloud Functions + Authentication。
只是配置了 CORS，让 ESA 的域名能访问 Cloud Functions。
没有迁移后端的成本，只是换了前端托管。
缺点（需要接受的地方）
1. 需要备案
ESA 国内节点需要 ICP 备案。
备案流程：
- 在阿里云提交备案申请
- 填资料、拍照、签字
- 等审核（7-20 天）
这是国内政策要求，所有国内 CDN 都要备案。
如果不想备案：
- 继续用 Firebase Hosting（海外节点）
- 用 ESA 海外节点（但延迟会高）
2. 需要自己配置 CI/CD
Firebase Hosting 是 firebase deploy 一条命令，ESA 需要自己配置 GitHub Actions。
但说实话，配置一次也就 2-3 小时，之后就是全自动的。
对于有一定动手能力的开发者，这不是大问题。
3. 失去 Firebase CLI 的版本管理
Firebase Hosting 保留所有部署历史，可以一键回滚。
ESA 没有这个功能，需要自己管理版本（Git tag + 手动回滚）。
但说实话，我几乎没用过 Firebase 的回滚功能，Git 回滚就够了。
4. 预览部署需要额外配置
Firebase Hosting 的预览频道（Preview Channels）开箱即用，ESA 需要自己配置子域名。
但用 GitHub Actions 可以实现类似功能，只是麻烦一点。
5. 控制台相对复杂
Firebase 控制台很简洁，ESA 控制台功能多、菜单多。
但用几次就熟悉了，而且是中文界面，看文档也方便。
我的选择逻辑
选 Firebase Hosting 的理由
如果你是：
- ✅ 海外用户为主（70% 以上）
- ✅ 重度依赖 Firebase 生态（Firestore + Auth + Functions + Analytics 一起用）
- ✅ 想要 0 配置部署（firebase deploy 一条命令）
- ✅ 域名没备案（ESA 国内节点需要备案）
- ✅ 需要预览频道（自动生成预览 URL）
- ✅ 需要版本管理（一键回滚）
那 Firebase Hosting 是更好的选择。
选 ESA 的理由（我的情况）
如果你是：
- ✅ 国内用户为主（80% 以上）
- ✅ 域名已备案或愿意备案
- ✅ 不介意配置 CI/CD（一次配置永久生效）
- ✅ 看重访问速度（延迟低是第一优先级）
- ✅ 纯静态站点或SPA（Vue/React/Angular）
- ✅ 流量较大（10GB+ /月）
- ✅ 前后端分离（后端可以继续用 Firebase）
那 ESA 免费版更合适。
常见问题
Q1：Firebase 的 firebase deploy 很方便，ESA 怎么实现？
A：用 GitHub Actions。
配置一次后，效果和 firebase deploy 一样：push 代码就自动构建、部署。
我上面贴了完整配置，复制粘贴改几个参数就能用。
Q2：换到 ESA 后，还能用 Firestore 和 Authentication 吗？
A：可以。
只是前端托管从 Firebase Hosting 换到 ESA，后端仍然用 Firebase。
需要配置 CORS，让 ESA 的域名能访问 Cloud Functions。
前端代码不需要改（仍然用 Firebase SDK）。
Q3：Firebase 有 10.8GB，ESA 有 50GB，够用吗？
A：ESA 的免费额度是 Firebase 的 4.6 倍，肯定够用。
我的应用月访问量 4 万，流量才 12GB。
如果真超了：
- Firebase：自动升级到 Blaze Plan（按量付费，$0.15/GB）
- ESA：按量付费（¥0.24/GB = $0.033/GB）
ESA 超量后便宜 78%。
Q4：我不想备案，但想要国内速度快，怎么办？
A：没办法，国内 CDN 都需要备案，这是政策要求。
选择：
- 去备案（虽然麻烦，但一劳永逸）
- 用海外 CDN，接受延迟高
- 用 ESA 海外节点（但延迟会比国内节点高）
Q5：Firebase Hosting 的预览频道很好用，ESA 怎么实现？
A：需要自己配置，但可以做到。
方案：
- GitHub Actions 检测到 PR
- 构建并上传到 OSS 的
preview-{PR_NUMBER} 目录
- 配置子域名通配符（
*.preview.myapp.com）
- GitHub Actions 自动评论预览 URL
虽然麻烦点，但效果类似。
Q6：我的 SPA 用了前端路由（Vue Router），ESA 怎么配置？
A：在 ESA 配置重定向规则。
# 所有 404 请求都返回 index.html
/* → /index.html [404]
这样 Vue Router 就能处理所有路由。
Firebase Hosting 会自动处理这个，ESA 需要手动配置，但很简单。
Q7：GitHub Actions 会不会也有限制？
A：有，但很宽松。
GitHub Actions 免费额度（公开仓库）：
我的 Vue 应用构建一次 3-5 分钟，一个月构建 400-600 次都够。
Firebase Hosting 不限制构建次数，但需要翻墙，而且上传慢。
成本对比（真实数据）
Firebase Hosting 免费版（Spark Plan）
- 流量：10.8GB/月
- 存储：10GB
- 部署次数：不限
- SSL 证书：免费
- 实际成本：$0
- 超量价格：自动升级到 Blaze Plan，$0.15/GB
但要承受：国内延迟 600ms
ESA 免费版
- 流量：50GB/月
- 存储：OSS 单独计费（¥0.12/GB/月 = $0.017/GB/月）
- 部署次数：不限（自己构建）
- SSL 证书：免费
- 安全能力：DDoS/WAF/CC 全免费
- 实际成本：¥0 + OSS 存储费（忽略不计）
- 超量价格：¥0.24/GB = $0.033/GB
额外获得：国内延迟 14ms
超量成本对比（100GB）
| 项目 |
Firebase Hosting |
ESA |
差异 |
| 超量 100GB |
$15 |
$3.3 |
ESA 便宜 78% |
| 超量 500GB |
$75 |
$16.5 |
ESA 便宜 78% |
| 超量 1TB |
$150 |
$33 |
ESA 便宜 78% |
如果你的流量会超免费额度，ESA 的成本优势巨大。
我的选择
对于国内用户为主的应用，速度 > 部署便利性。
Firebase Hosting 的一键部署确实方便，但国内延迟 600ms 让用户体验极差。
ESA 虽然要配置 GitHub Actions，但一次配置后就是全自动的，而且国内访问快 40 倍。
为了用户体验，值得花 3 小时配置一次。
总结
Firebase Hosting 是好产品
我没有黑 Firebase 的意思，它确实很强：
- 部署体验无敌（firebase deploy 一条命令）
- 与 Firebase 生态整合完美（Firestore + Auth + Functions）
- 预览频道好用（自动生成预览 URL）
- 版本管理方便（一键回滚）
- 免费 SSL 自动续期
- 适合海外用户
如果你的用户主要在海外，或者重度依赖 Firebase 生态，Firebase Hosting 是首选。
但对我来说，ESA 更合适
我的选择逻辑很简单：
- 95% 用户在国内 → 速度最重要
- Firebase 延迟 600ms → 跳出率 42%
- ESA 延迟 14ms → 跳出率 19%
- 虽然要配置 CI/CD → 但一次配置永久生效
- 后端仍然用 Firebase → 只是换了前端托管
用户体验 > 部署便利性。
最终建议
选择取决于你的用户在哪、以及是否重度依赖 Firebase 生态：
| 场景 |
推荐方案 |
理由 |
| 海外用户为主 |
Firebase Hosting |
海外速度快 + 生态整合 |
| 国内用户为主 |
ESA |
国内速度快 40 倍 + 成本低 |
| 重度依赖 Firebase 生态 |
Firebase Hosting |
一站式解决方案 |
| 纯前端静态站点 |
ESA |
CDN 专业 + 国内速度快 |
| 不想备案 |
Firebase Hosting |
不需要备案 |
| 流量大（>20GB/月） |
ESA |
免费额度多 + 超量价格便宜 78% |
| 团队协作 |
Firebase Hosting |
预览频道 + 版本管理 |
没有绝对的好坏，只有适不适合你的场景。
对我来说，虽然失去了 Firebase Hosting 的便利性，但换来了国内用户的极致体验，这笔交易很值。
如何领取 ESA 免费版
- 打开阿里云官网：https://www.aliyun.com
- 搜索"ESA"或"边缘安全加速"
- 点击"免费试用"
- 按提示开通即可
或者直接用这个链接：http://s.tb.cn/e6.0Fu67m
参考链接：
说明：本文是我的个人真实体验，不是广告。我从 Firebase Hosting 迁移到 ESA 主要是因为国内访问速度问题，后端仍然使用 Firebase 服务。分享出来供大家参考。