W
Cloudflare部署Serverless边缘计算

Cloudflare Pages — 全球边缘的静态部署与无服务器计算

全面了解 Cloudflare Pages 如何通过全球边缘网络、Pages Functions 和 Workers 运行时，为现代 Web 项目提供一站式部署与计算平台。

Cloudflare Pages 是 Cloudflare 推出的全栈 Web 托管平台，深度集成于 Cloudflare 全球网络（覆盖 330+ 城市、120+ 国家）。它结合了静态站点托管、边缘函数（Pages Functions）和 Workers 运行时，让开发者可以在一个平台上完成从静态页面到全栈应用的部署。

Cloudflare Pages 项目示例
# 部署一个 Astro 静态站点到 Pages
# 1. 连接 Git 仓库
# 2. 设置构建命令

# 构建命令:
npm run build

# 输出目录:
dist/

# 完成！自动部署到全球 330+ 节点

为什么选择 Cloudflare Pages？

全球边缘网络

Cloudflare 拥有业界最大的 全球网络 之一，Pages 站点默认部署在所有节点上。用户访问时自动路由到最近的节点，实现亚秒级 TTFB（首字节时间）。

全球网络覆盖对比（2026）
功能 / 特性CloudflareVercelNetlifyAWS CloudFront
边缘节点数330+100+50+600+
覆盖国家120+40+30+90+
中国大陆节点
DNS 解析内置外部外部Route53
DDoS 防护内置免费付费付费付费
免费层带宽无限100 GB100 GB1 TB/月
WAF 规则免费付费付费付费

自动 CI/CD 集成

Pages 支持直接从 GitHub、GitLab 或 Bitbucket 仓库自动部署。每次推送自动触发构建和部署：

  1. Git Push：开发者推送代码到仓库，Pages 通过 webhook 收到通知。
  2. 构建：Pages 在隔离环境中运行构建命令（npm run build），支持自定义环境变量。
  3. 预览部署（可选）：每个 PR 自动生成一个唯一预览 URL，便于团队审阅。
  4. 生产部署：主分支构建完成后，自动推送到全球边缘网络。
  5. 智能缓存：Cloudflare 自动缓存静态资源，并支持 缓存标头 的精细控制。
  6. 原子部署：部署是原子的——要么完全生效，要么回滚到上一版本，不会出现中途状态。

Pages Functions — 边缘端的后端

Pages Functions 是 Cloudflare Pages 最强大的特性之一。它基于 Workers 运行时（V8 引擎），让你在边缘节点运行服务端代码，无需管理服务器。

Functions 的三种形态

Pages Functions 形态
# 项目结构
project/
├── public/           # 静态资源
├── functions/
│   ├── api/
│   │   ├── hello.ts          # /api/hello
│   │   └── users/[id].ts     # /api/users/:id
│   └── _middleware.ts        # 全局中间件
└── dist/              # 构建输出

# 文件系统自动映射为路由路径

Functions 运行环境能力

运行时能力

  • Service Workers API (Fetch, Cache, Request/Response)
  • Web Crypto API
  • WebAssembly (WASM) 支持
  • TCP / UDP Socket（通过 connect()）
  • HTTP/2、HTTP/3 (QUIC)
  • gRPC 支持

绑定与存储

部署策略：Static vs SSR vs Hybrid

Cloudflare Pages 支持三种部署模式，适合不同场景：

三种部署模式
# 纯静态站点
# 所有页面在构建时生成

# astro.config.mjs
export default defineConfig({
  adapter: cloudflare()  // output: 'static'
});

# 优势：
# - 全球 CDN 缓存，速度最快
# - 零冷启动
# - 免费层无需额外配额
# 
# 适合：博客、文档站、营销页面

安全特性

Cloudflare Pages 继承了 Cloudflare 全套安全能力：

  • DDoS 防护：自动检测并缓解 L3/L4/L7 DDoS 攻击，免费层也可用。
  • WAF（Web 应用防火墙）：托管规则集覆盖 OWASP Top 10、常见漏洞。
  • SSL/TLS 终止：自动提供泛域名证书，支持 HTTP/2 和 HTTP/3。
  • Bot 管理：通过机器学习识别并拦截恶意爬虫。
  • API Shield：使用 mTLS 和 Schema Validation 保护 API 端点。
  • 速率限制：基于每个用户的请求频率控制，防止滥用。

定价分析

Cloudflare Pages 定价层级（2026）
功能 / 特性免费付费 ($20/月)Business ($200/月)
月均请求量500,0005,000,00020,000,000
带宽无限无限无限
构建并发1110
构建分钟/月5005,0006,000
Functions 请求100,000/天1,000,000/天5,000,000/天
Functions CPU 时间10ms/请求50ms/请求定制
KV 存储1 GB5 GB定制
D1 数据库500 MB10 GB定制
R2 存储10 GB1TB定制
预览部署
分支部署
SLA无99.9%99.99%

对于大部分个人项目和小型站点，免费层完全足够：

  • 本博客的月均请求量约为 2000-5000 次，远低于 500,000 的免费额度。
  • 每天 100,000 次 Functions 调用对于个人 API 来说绰绰有余。
  • 无限带宽意味着即使突然获得大量流量，也不会产生额外费用。
  • 500 分钟/月的构建时间足够数十次部署。

何时需要升级？

  • 团队协作需要多个预览部署和分支部署
  • 需要 SLA 保证的商业站点
  • Functions 需要超过 10ms 的 CPU 时间（复杂计算）
  • 需要大量 KV 或 D1 存储

框架支持

Cloudflare Pages 对主流前端框架提供了原生支持：

Astro一等公民

官方适配器，支持 Static/SSR/Hybrid

Next.js全支持

含 ISR、Middleware、App Router

Nuxt全支持

包含 SSR、Hybrid、Nitro 引擎

SvelteKit一等公民

官方适配器，含 Form Actions

Remix全支持

含 SSR、Actions、Loader

Qwik全支持

含 Resumable 流式渲染

Hugo静态

构建后输出纯静态文件

Jekyll静态

构建后输出纯静态文件

Eleventy静态

构建后输出纯静态文件

VuePress静态

构建后输出纯静态文件

Docusaurus静态

构建后输出纯静态文件

Hexo静态

构建后输出纯静态文件

实际案例：本站的 Cloudflare 架构

本站（jwzhu.top）使用 Cloudflare Pages 部署，采用了以下技术组合：

层级 技术 用途
DNS Cloudflare DNS 域名解析与流量路由
托管 Pages 静态站点部署与全球加速
安全 WAF 请求过滤与攻击防护
证书 SSL/TLS 自动 HTTPS 证书管理
缓存 Cache 静态资源缓存优化
分析 Web Analytics 隐私友好的站点统计

总结

Cloudflare Pages 是目前性价比最高的全栈 Web 部署平台之一，特别适合：

  • 静态内容站点：利用全球边缘网络实现极速加载
  • Jamstack 架构：结合 Pages Functions 实现前后端分离
  • 个人项目：免费层慷慨、无带宽限制、自动 HTTPS
  • 企业应用：通过付费计划获得 SLA、高级安全功能

与 Astro（本系列上篇介绍）搭配使用更加强大——Astro 的岛屿架构消除不必要的 JS，Cloudflare 的边缘网络消除不必要的延迟。

推荐阅读