Cloudflare Pages 终极指南：你所需要知道的一切 – wiki大全

作者： /

Cloudflare Pages 终极指南：你所需要知道的一切

介绍

Cloudflare Pages 是 Cloudflare 公司推出的一款现代、高性能的 JAMstack 应用托管平台。它专为前端开发者设计，提供了一个从代码到全球部署的无缝体验，集成了静态网站托管和动态无服务器功能（通过 Cloudflare Workers 实现）。无论你是构建个人博客、作品集网站，还是复杂的全栈应用，Cloudflare Pages 都提供了一个强大、安全且极具成本效益的解决方案。

本文将作为你的终极指南，详细介绍 Cloudflare Pages 的所有方面，从核心优势、定价、限制，到具体使用场景、部署流程，再到高级功能和竞品对比，帮助你全面掌握这个强大的工具。

核心优势

Cloudflare Pages 之所以备受青睐，主要得益于以下几点核心优势：

  • 极其慷慨的免费套餐：对于个人开发者和小型项目而言，Cloudflare Pages 的免费套餐极具吸引力。它提供无限个站点、无限带宽、无限请求和无限席位（团队成员），每月还有 500 次免费构建。这足以满足绝大多数非商业项目的需求。
  • 全球顶级的 CDN 网络：你的网站将被部署到 Cloudflare 遍布全球 100 多个国家/地区的边缘网络上。这意味着无论用户身在何处，都能享受到极低的延迟和闪电般的加载速度。
  • 无缝的 Git 集成 (CI/CD)：与 GitHub 和 GitLab 的完美集成，实现了真正的持续集成/持续部署。你只需将代码推送到指定分支，Cloudflare Pages 就会自动拉取、构建和部署你的应用，整个过程无需人工干预。
  • 强大的无服务器功能 (Pages Functions)：通过与 Cloudflare Workers 的集成，你可以在静态网站中轻松添加动态后端逻辑。无论是处理 API 请求、用户认证还是表单提交，都可以在边缘节点上快速执行，免费套餐每日提供 100,000 次函数调用。
  • 自动化的安全保障：所有部署在 Pages 上的网站都会自动获得免费的 SSL/TLS 证书，启用 HTTPS 加密。同时，你还能享受到 Cloudflare 提供的基础 DDoS 防护和其他安全功能。
  • 便捷的预览部署：每次提交代码或发起 Pull Request (PR) 时，Pages 都会自动生成一个唯一的预览 URL。这使得团队协作和代码审查变得异常简单，你可以在合并到生产环境前充分测试所有变更。
  • 内置构建优化与分析：平台内置了对多种现代前端框架（如 React, Vue, Next.js, Svelte 等）的构建支持，并提供构建缓存以加快部署速度。此外，还附带了隐私优先的免费 Web Analytics，帮助你了解网站流量。

定价与限制

定价方案

Cloudflare Pages 的定价模型非常简洁，主要分为免费和付费计划：

  • 免费计划 (Free Plan):

    • 构建次数: 每月 500 次
    • 部署: 无限
    • 带宽: 无限
    • 请求: 无限
    • 自定义域名: 每个项目 100 个
    • Pages Functions: 计入 Workers 免费额度，即每日 100,000 次请求。

  • 付费计划 (Pro/Business Plan):

    • 付费计划主要面向需要更高级功能的企业用户，例如更高级别的支持、更多的构建次数等。
    • 如果 Pages Functions 的用量超过免费额度，可以升级到 Workers 的付费计划（起价 $5/月，包含 1,000 万次请求），这对于需要处理大量动态请求的应用来说，成本效益非常高。

关键点: 对于静态资源（HTML, CSS, JS, 图片等），无论是免费还是付费计划，请求和带宽都是完全免费且无限制的。费用仅在大量使用 Pages Functions 时产生。

主要限制

为了保证平台稳定和服务质量，Cloudflare Pages 设定了一些资源限制：

  • 文件数量: 每个项目最多 20,000 个文件。
  • 文件大小: 单个文件最大 25 MiB。对于大文件，建议使用 Cloudflare R2 存储。
  • 构建时间: 每次构建的超时时间为 20 分钟。
  • 自定义头部 (_headers): 最多 100 条规则。
  • 重定向 (_redirects): 最多 2,000 个静态重定向和 100 个动态重定向。
  • 项目数量: 每个账户软限制为 100 个项目。

部署你的第一个项目

将你的网站部署到 Cloudflare Pages 非常简单。下面以一个典型的静态网站为例，演示完整的部署流程。

准备工作

  1. 一个 Cloudflare 账户：如果还没有，可以免费注册。
  2. 一个 GitHub 或 GitLab 账户：并将你的网站代码托管在上面。

部署步骤

  1. 登录并创建项目:

    • 登录 Cloudflare 仪表盘，在左侧导航栏找到并点击 Workers & Pages。
    • 选择 创建应用程序 -> Pages -> 连接到 Git。

  2. 连接 Git 仓库:

    • 授权 Cloudflare 访问你的 GitHub/GitLab 账户。
    • 选择你想要部署的仓库。

  3. 配置构建和部署:

    • 生产分支: 选择你的主分支，例如 main 或 master。
    • 构建设置:
      • 框架预设: Cloudflare 会尝试自动检测你的项目框架。你可以手动选择，例如 React, Vue, Hugo, Next.js / Static HTML 等。
      • 构建命令: 根据你的项目设置，例如 npm run build 或 yarn build。
      • 构建输出目录: 构建后静态文件所在的目录，例如 dist, build 或 public。
    • 环境变量 (可选): 你可以在这里为构建过程或 Pages Functions 添加环境变量。

  4. 保存并部署:

    • 点击 保存并部署。Cloudflare Pages 会立即开始第一次构建。
    • 你可以实时查看构建日志。构建完成后，你的网站将部署到一个 *.pages.dev 的子域名上。

  5. 添加自定义域名 (可选):

    • 在项目的主页，进入 自定义域 标签页。
    • 输入你自己的域名，并按照指引更新你的 DNS 记录（如果你的域名 DNS 也由 Cloudflare 管理，这个过程是全自动的）。Cloudflare 会自动为你处理 SSL 证书。

高级功能

除了基础的托管服务，Cloudflare Pages 还提供了一系列强大的高级功能。

1. Pages Functions

这是 Pages 最核心的动态能力。你只需在项目根目录下创建一个 functions 文件夹，里面的每个 JavaScript/TypeScript 文件都会成为一个 API 端点。

示例：一个简单的 API

在项目根目录创建 functions/hello.js:
javascript
export function onRequest(context) {
return new Response("Hello from the edge!");
}
部署后，你就可以通过 https://your-site.pages.dev/hello 访问到这个 API。

你还可以通过 _middleware.js 文件在特定路径下添加中间件，处理认证、日志、重定向等逻辑。

2. 重定向和自定义头部

通过在构建输出目录中创建特殊文件，可以轻松管理重定向和 HTTP 头部：

  • _redirects 文件: 用于设置 URL 重定向。
    # 语法: <source> <destination> [status]
    /home /
    /blog /news 301
    /store/* /shop/:splat
  • _headers 文件: 用于添加或修改 HTTP 响应头。
    # 语法: <path>
    # <header-name>: <header-value>
    /
    X-Frame-Options: DENY
    /assets/*
    Cache-Control: max-age=2592000

3. 即时回滚

如果某次部署出现了问题，你可以在项目仪表盘的部署记录中，一键将生产环境回滚到任何一个之前的成功版本，整个过程是瞬时的。

4. 与其他 Cloudflare 产品集成

Pages 可以与 Cloudflare 生态中的其他产品无缝集成，构建功能强大的全栈应用：

  • Cloudflare R2: 用于存储大量非结构化数据（如大文件、图片、视频），没有出口带宽费用。
  • Cloudflare D1: 一个原生的无服务器 SQL 数据库，用于持久化存储。
  • Cloudflare Zaraz: 将第三方脚本（如分析工具、广告）转移到边缘执行，提升网站性能和安全性。
  • Cloudflare Access: 为你的预览部署或整个站点添加零信任访问控制，保护内部应用。

竞品对比：Pages vs. Vercel vs. Netlify

特性 Cloudflare Pages Vercel Netlify
核心优势 全球性能、极高性价比、安全集成 最佳 Next.js 支持、优秀的开发者体验 成熟的生态系统、功能全面
免费带宽 无限 100 GB/月 100 GB/月
免费构建 500 次/月 – 300 分钟/月
Serverless Cloudflare Workers (性能极高) Edge Functions, Serverless Functions Netlify Functions (基于 AWS Lambda)
CDN 网络 顶级，范围最广 快速，针对动态内容优化 快速，成熟稳定
成本效益 极高 较高 较高

总结:
* 如果你追求极致的性能和性价比，尤其是当你的网站流量巨大时，Cloudflare Pages 是无与伦比的选择。
* 如果你是 Next.js 的重度用户，并希望获得最佳的开发和部署体验，Vercel 是首选。
* 如果你需要一个功能全面、生态成熟的平台，并且不太在意轻微的性能差异或成本，Netlify 是一个非常可靠的选择。

结论

Cloudflare Pages 凭借其强大的全球网络、慷慨的免费套餐和与 Cloudflare 生态的深度集成，已经成为现代 Web 开发中不可忽视的一股力量。它不仅极大地简化了静态网站和 JAMstack 应用的部署与管理，还通过 Pages Functions 提供了构建全栈应用的能力。

无论你是个人开发者还是大型团队，Cloudflare Pages 都提供了一个值得信赖、高性能且极具扩展性的平台。现在就开始，将你的下一个项目部署到 Cloudflare Pages，亲身体验边缘计算带来的速度与激情吧！

滚动至顶部