我的情况
我是全栈开发者,有个 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 服务。分享出来供大家参考。