被Vercel暂停后我换到了Cloudflare Pages:免费、便捷、功能全面

事情是这样的。我之前把 stock.955.lifefzd1.com 挂在 Vercel 上,Next.js 静态导出,一直岁月静好。直到某天发现网站打不开了,登录一看,发现账号被暂停了,提示语很客气,大意是"你的账号触发了升级 Pro 的判定"。

vercel-paused.png 被Vercel暂停后我换到了Cloudflare Pages:免费、便捷、功能全面 经验总结

我一个个人小站,流量撑死两位数,怎么突然让我付费?查了一圈也没看懂是咋回事。

然后想到转 GitHub Pages,看了下官方文档:私有仓库不免费,GitHub Free 只给公开仓库开 Pages,私有仓库得升 Pro。

兜兜转转,还是落到 Cloudflare Pages。结论先放这:免费额度业界最慷慨,中间也踩了不少坑,下面就把免费额度、教程、踩坑一次记录一下,方便以后翻看。

Cloudflare Pages 是什么

官方定位:无服务器全栈开发平台(serverless full-stack developer platform),JAMstack 血统。连接上 GitHub/GitLab,git push 一下,自动构建部署到 Cloudflare 边缘网络;要动态能力可以用 Pages Functions(基于 Workers)。

官方博客公布的时间线:

  • 2021-04:Pages 首次推出,纯静态托管

  • 2021-11:宣布"全栈平台",引入 Functions 概念

  • 2022-11-17:Pages Functions GA,确立"静态请求无限免费 + 动态请求计费"

  • 2023-09-28:构建缓存 Beta

  • 2024-04-04:支持 monorepo、wrangler.toml、数据库集成

  • 2025-05-30:构建镜像默认 Node.js v22(替换已 EOL 的 Node 18)

  • 2026-01-23:付费计划文件上限 20,000 → 100,000

网络规模(官方数据):335 城 / 125+ 国家(含中国大陆),约 95% 全球网民 50ms 内可达,与 13,000+ 网络直连。

免费额度

先上重点,官方定价页 2026-08 核实:

方案

月付

年付

并发构建

构建/月

自定义域名/项目

Free

$0(永久)

1

500

100

Pro

$25

20/月(240/年)

5

5,000

250

Business

$250

200/月(2,400/年)

20

20,000

500

Enterprise

定制

500

所有方案统一:无限站点、无限席位、无限静态请求、无限带宽。官方原话 "unlimited sites, seats, requests, and bandwidth"。这年头敢把"无限带宽"写进条款的,独一份。

关键限制(官方 Limits 文档):

  • 构建:Free 1 并发 / 500 次每月,单次超时 20 分钟

  • 文件数:Free 20,000 文件/站点;付费计划 100,000,要设环境变量 PAGES_WRANGLER_MAJOR_VERSION=4 才生效

  • 单文件最大 25 MiB,超了放 R2 + 公网桶

  • 项目数:每账号 100 个

  • Pages Functions 计入 Workers 配额,Workers Free 10 万请求/天

  • _headers 最多 100 条规则;_redirects 最多 2,000 静态 + 100 动态

  • Direct Upload:Wrangler 上传 20,000 文件上限;拖拽只给 1,000 文件,且不支持 functions/ 编译

新账号前 48 小时创建项目可能受限,防滥用的,别慌。

竞品横评:CF vs Vercel vs Netlify vs GitHub Pages

维度

Cloudflare Pages

Vercel (Hobby)

Netlify (Free)

GitHub Pages

免费带宽

无限(官方)

100GB/月(第三方)

信用点制 ≈30GB/月(2024-09 起;老账号 legacy 100GB)

100GB/月(软限制,官方)

免费构建

500 次/月

6,000 build 分钟/月(第三方)

300 credits/月(约 20 次生产部署)

10 builds/小时(软限制)

私有仓库免费部署

❌ 仅限公开仓库

Next.js 支持

静态导出✅;全栈要适配器(旧 next-on-pages 弃用,新推 OpenNext)

原生最佳,零配置

官方适配器,多数功能可用

仅静态

Serverless Functions

Workers 10 万请求/天免费

100 GB-hours/月(第三方)

125,000 调用/月(第三方)

❌ 无

500GB/月流量成本估算

$0

~$160(第三方)

~$220(第三方)

禁止商用/大流量

商用限制

✅ 允许

❌ 免费版限个人/非商用

✅ 允许

❌ 官方明确禁止

数据口径:官方 = 各家官方文档/定价页;第三方 = dev.to 2025 评测、freetiers 等。TTFB/构建耗时/超量费率都是第三方评测结果,仅供参考,别拿这些数字去跟客服对线。

重点两个坑:

  • Netlify 免费带宽早就不是 100GB/月了。2024-09 起改成信用点制(300 credits/月,带宽 10 credits/GB ≈ 30GB/月;生产部署 15 credits/次)。网上还一堆"Netlify 100GB"的旧文,那口径只对 Vercel 和 Netlify 老账号(legacy 计划)成立。

  • GitHub Pages 私有仓库不免费 + 官方明确禁止商用/电商,两条红线,想靠它做点正经事基本没戏。

上手教程

Git 集成(最省事)

dash.cloudflare.com → Workers & Pages → Create → Connect to Git → 授权 GitHub/GitLab → 选仓库 → 配置:

  • Project name(→ <name>.pages.dev)

  • Production branch(默认 main)

  • Framework preset:Next.js 静态导出选 "Next.js (Static HTML Export)" → npx next build → out

  • Build command / Build output directory / Root directory(monorepo 用这个)/ Environment variables

  • Save and Deploy

每次 commit/PR 自动出预览链接,生产/预览分支分离,注入 CI=true、CF_PAGES=1、CF_PAGES_BRANCH、CF_PAGES_COMMIT_SHA 等环境变量。

注意:官方文档里普通 Next.js 预设还写着 npx @cloudflare/next-on-pages@1,但 next-on-pages 基本停止维护了——只支持 Edge Runtime,不能用 Node.js 内置模块(crypto/fs 等),ISR 受限,社区 issue 一大堆(#978),官方现在主推 OpenNext。三条路径记清楚:纯静态导出(Pages 直接支持,我用的这个)/ next-on-pages(旧,别碰)/ OpenNext(新,推荐)。官方文档此处更新滞后于弃用公告,别被带偏。

Wrangler CLI / Direct Upload

npm install -g wrangler
wrangler login
npm run build
npx wrangler pages project create
npx wrangler pages deploy <BUILD_OUTPUT_DIRECTORY>
npx wrangler pages deploy <OUTPUT_DIRECTORY> --branch=<BRANCH_NAME>   # 预览

拖拽上传也行:dashboard → Workers & Pages → Create application → Drag and drop your files,支持 zip 或文件夹,根目录必须有 index.html,最多 1,000 文件。但拖拽不支持 functions/ 文件夹编译,有动态函数必须上 Wrangler;而且 Direct Upload 项目没法切回 Git 集成,只能重建,想清楚再选。

自定义域名

子域名:域名不在 CF 也能玩,去 DNS 服务商加 CNAME:shop.example.com → <your-site>.pages.dev;域名在 CF 托管就 dashboard 自动加记录。

根域名:必须把域名接入 Cloudflare(改 nameserver)成为 zone,再在 Pages 项目 Custom domains 里设置。

坑 1(522):不先在 dashboard 关联域名,就手动加 CNAME 指向 pages.dev,会 522。官方文档明写了,先关联再配 DNS。 坑 2(CAA):配了 CAA 记录的话,必须放行 Cloudflare 签发证书,否则自定义域名无法激活。要放行:letsencrypt.org、pki.goog(可 cansignhttpexchanges=yes)、ssl.com。

想禁用 *.pages.dev 访问?用 Cloudflare Access 或账号级 Bulk Redirect。

国内访问:pages.dev 不稳

社区大量实测反馈(非官方,截至 2026-08):pages.dev / workers.dev 自 2022 年起常遭 DNS 污染/阻断。有博主实测域名 CNAME 到 pages.dev 会 "occasionally resolving to 127.0.0.1",明确归因 DNS poisoning;还有文章指出 CF 会给部分站点分配特殊 IP(104.21.x.x 段)被精准阻断,移动宽带最明显。workers.dev 比 pages.dev 更惨;pages.dev 部分运营商/时段能通,属于"不稳定"而非完全不可用。

方案按推荐度排:

  1. 绑自定义域名:绕开 pages.dev 域名层污染,最基础,改善明显

  2. 国内 CDN 前置加速(主流方案):腾讯云 EdgeOne 国际版 / 腾讯云 CDN + DNSPod 智能解析。测了一些网站,延迟从 300ms+ 降到 30-40ms,跟我 fzd1.com 体验一致。

  3. 配置要点:

    • EdgeOne 中国大陆区要实名认证,但不用 ICP 备案(源站在海外)

    • 静态资源设强制缓存 TTL(7-30 天),绕过 CF 默认 max-age=0

    • 回源 HOST 头必须指向源站 pages.dev 域名,否则 CF 不认这个域名直接 404

    • 回源协议必须 HTTPS(443):选 HTTP 会触发 CF 强制 301 到 HTTPS → EdgeOne 再回 HTTP → 无限重定向循环,经典

    • 源站地址填 pages.dev 原域名即可,不用先绑自定义域名

  4. IP 优选:免费但要维护,CNAME/A 记录改优选 IP,可能随时失效,得监控

    1. 目标用户主要在国内的话,2026 年起可以直接用 EdgeOne Pages(腾讯云自家托管,链路更短、免备案);主力在海外就 Cloudflare Pages

    全程免备案的前提:源站在海外、走海外/国际 CDN 节点;用国内节点需实名。

    三次构建报错记录

    我部署 fzd1.com 那会儿,构建连炸三次,全栽在 npm 依赖上。

    报错①:npm ci 直接失败

    问题:npm ci 报错,提示 package-lock.json 与 package.json 依赖不一致。原因:npm ci 的硬性要求就是 lockfile 跟 package.json 严格同步,不一致直接退出,不像 npm install 会自己修。修复:本地 npm install 重新生成 lockfile,提交上去,重跑。

    报错②:Linux 上找不到 SWC 二进制

    问题:构建日志报 "Failed to load SWC binary for linux/x64",下载 SWC 404。原因:经典平台坑。npm lockfile 只记录生成时宿主平台的 optionalDependencies——我在 macOS 上 npm install 生成的 lockfile,只记了 @next/swc-darwin-*,没有 @next/swc-linux-x64-gnu。Cloudflare 构建镜像是 Linux,npm ci 不会装 Linux 平台的 SWC,next build 自然炸。修复:删掉 lockfile 在 Linux 上重新生成;或者显式把 @next/swc-linux-x64-gnu 加进 optionalDependencies。

    报错③:构建缓存吃旧依赖,SWC 依旧缺失

    问题:修完②重跑,还是报 SWC 缺失。原因:Cloudflare Pages 构建缓存(Beta,2023-09-28 起)会缓存依赖,缓存命中时直接复用旧 node_modules——旧依赖里还是没有 Linux 版 SWC。缓存帮了倒忙。修复:加 postinstall 脚本兜底,强制安装平台二进制。Next.js 官方仓库自带 scripts/install-native.mjs,社区通用做法就是在 package.json 加 postinstall 兜底;同时建议自定义 cache key 包含 package-lock.json,再用环境变量锁定 Node 版本(NODE_VERSION=20/22),必要时直接关掉构建缓存。

    顺带两个高频坑:Pages Functions 报错,去 Settings → Functions → Compatibility flags 加 nodejs_compat,很多框架默认没开;Next.js 静态导出报 "Image Optimization using Next.js' default loader is not compatible with output: 'export'",next.config.js 里设 images: { unoptimized: true }。

    收尾

    Cloudflare Pages 值不值得用?静态站点、个人项目,无脑上。无限带宽 + 500 构建/月 + 100 域名/项目,永久免费不用信用卡,这个力度别家给不了。全栈 Next.js 需求,Vercel 原生体验还是第一(毕竟亲儿子),但你要做好随时被停号的觉悟;想省钱又想跑 Node 运行时,OpenNext 是新路子,就是上手成本高一点。

    未经允许不得转载:前端资源网 - w3h5 » 被Vercel暂停后我换到了Cloudflare Pages:免费、便捷、功能全面

    赞 (0)