Cloudflare Pages 入门指南 – wiki大全

作者： /

Cloudflare Pages 入门指南：快速部署您的现代网站

在当今快速发展的网络世界中，拥有一个快速、安全且易于维护的网站变得至关重要。Cloudflare Pages 应运而生，它是一个基于 Git 的静态网站托管平台，能够让开发者轻松部署前端框架网站、静态站点生成器 (SSG) 站点以及任何静态资产。本文将带您深入了解 Cloudflare Pages，从入门到精通，助您快速上线您的下一个项目。

1. 什么是 Cloudflare Pages？

Cloudflare Pages 是 Cloudflare 提供的一项免费服务，旨在简化静态网站和单页应用 (SPA) 的部署流程。它通过连接您的 Git 仓库（如 GitHub、GitLab 或 Bitbucket），在每次代码提交时自动构建和部署您的网站。它利用 Cloudflare 庞大的全球网络边缘节点，为您的用户提供极快的加载速度和高可用性。

为什么选择 Cloudflare Pages？

  • 免费且功能强大：提供慷慨的免费套餐，足以满足大多数个人项目和小型团队的需求。
  • 极速部署：与 Git 仓库无缝集成，每次提交代码后自动触发构建和部署，无需手动干预。
  • 全球 CDN 优势：您的网站内容会缓存到 Cloudflare 全球数百个边缘节点，确保用户无论身处何地都能获得最佳体验。
  • 简单易用：直观的用户界面和预设的构建配置，使得部署过程非常简单。
  • 内置功能：支持自定义域名、免费 SSL 证书、HSTS，甚至还提供了 Cloudflare Functions (通过 Workers) 来实现无服务器后端逻辑。
  • 现代前端支持：完美支持 React, Vue, Angular, Next.js, Hugo, Jekyll 等主流前端框架和静态站点生成器。

2. 开始之前：准备工作

在开始部署您的第一个 Cloudflare Pages 站点之前，您需要准备以下几点：

  1. Cloudflare 账号：如果您还没有，请访问 Cloudflare 官网 注册一个免费账号。
  2. Git 仓库中的项目：您的网站代码需要存放在一个 Git 仓库中（推荐 GitHub、GitLab 或 Bitbucket）。确保您的项目是可构建的，例如一个用 React 或 Vue 创建的 SPA，或者一个使用 Jekyll、Hugo 等工具生成的静态站点。
  3. 了解您的项目构建流程：您需要知道如何构建您的项目以生成部署所需的静态文件（例如，npm run build 或 hugo 命令）。

3. 第一步：连接您的 Git 仓库并部署

现在，我们开始部署您的第一个 Cloudflare Pages 站点：

3.1 登录 Cloudflare 并导航到 Pages

  1. 登录您的 Cloudflare 账号。
  2. 在仪表板左侧菜单中，找到并点击 Pages。

3.2 创建新项目

  1. 点击 Create a project（创建项目）。
  2. 选择 Connect Git（连接 Git）。
  3. Cloudflare 会要求您授权连接到您的 Git 提供商（GitHub、GitLab 或 Bitbucket）。选择您使用的服务并按照提示完成授权。

3.3 选择仓库和配置

  1. 授权成功后，您会看到一个列出您所有仓库的列表。选择您想要部署的网站所在的仓库。
  2. 配置构建和部署设置：
    • Project name (项目名称)：Cloudflare 会根据您的仓库名称自动填写，您也可以修改。
    • Production branch (生产分支)：通常是 main 或 master。这是 Cloudflare 监听代码提交并自动部署的分支。
    • Framework preset (框架预设)：Cloudflare Pages 能够智能识别您的项目所使用的框架（例如 Create React App, Next.js, Vue, Hugo 等），并自动填充最佳的构建命令和输出目录。如果您的框架不在列表中或识别有误，您可以选择 None 并手动配置。
    • Build command (构建命令)：这是用于生成静态文件的命令。例如：
      • 对于 React (Create React App)：npm run build
      • 对于 Next.js (静态导出)：npm run build && npm run export
      • 对于 Vue CLI：npm run build
      • 对于 Hugo：hugo
    • Build output directory (构建输出目录)：这是构建命令生成静态文件的目录。例如：
      • 对于 React (Create React App)：build
      • 对于 Next.js：out
      • 对于 Vue CLI：dist
      • 对于 Hugo：public
  3. （可选）Environment variables (环境变量)：如果您的项目在构建过程中需要特定的环境变量（例如 API 密钥），您可以在这里添加。

3.4 部署您的站点

  1. 确认所有设置无误后，点击 Save and Deploy（保存并部署）。
  2. Cloudflare Pages 将开始从您的 Git 仓库克隆代码，执行构建命令，然后部署您的网站。这个过程可能需要几分钟，具体取决于您的项目大小和构建复杂性。
  3. 部署完成后，您会获得一个 *.pages.dev 格式的临时 URL。点击这个 URL 即可访问您刚刚部署的网站！

4. 核心功能和进阶使用

4.1 自动部署与分支预览

  • 自动部署：一旦您配置好项目，每次您向生产分支 (main/master) 提交代码时，Cloudflare Pages 都会自动触发构建和部署。
  • 分支预览：对于非生产分支（例如 feature/new-design），每次提交代码也会自动部署到一个唯一的预览 URL（例如 feature-new-design.<project>.pages.dev）。这使得团队成员可以在合并到生产环境之前轻松审查和测试新功能。

4.2 自定义域名

使用 *.pages.dev 域名固然方便，但您很可能希望使用自己的自定义域名。

  1. 在您的 Pages 项目仪表板中，导航到 Custom domains（自定义域名）。
  2. 点击 Set up a custom domain（设置自定义域名）。
  3. 输入您的域名，然后按照 Cloudflare 提供的 DNS 记录指示进行操作。通常，您需要在您的 DNS 提供商处添加一个 CNAME 记录来指向您的 Pages 站点。如果您的域名已经在 Cloudflare 管理，这个过程会更加自动化。
  4. Cloudflare 会自动为您提供免费的 SSL 证书，并启用 HSTS，确保您的网站始终通过 HTTPS 安全访问。

4.3 Cloudflare Functions (通过 Workers 集成)

Cloudflare Pages 不仅仅支持静态内容，还可以通过 Cloudflare Functions 集成来添加动态功能。这些函数是基于 Cloudflare Workers 构建的，允许您在边缘运行无服务器代码，处理 API 请求、表单提交等。

  1. 在您的项目根目录创建一个 functions 文件夹。
  2. 在该文件夹内编写您的 Worker 代码（通常是 JavaScript 或 TypeScript）。
  3. 当您的 Pages 项目构建时，Cloudflare 会自动识别 functions 文件夹中的文件，并将它们部署为 Worker。

4.4 环境变量

在项目设置中，您可以配置构建时和运行时（对于 Functions）的环境变量。这对于处理 API 密钥、数据库连接字符串等敏感信息非常有用，避免将它们硬编码到您的代码中。

5. 最佳实践和故障排除

  • 优化构建速度：
    • 确保您的 package.json 或其他依赖管理文件中只包含生产所需的依赖。
    • 如果您的项目很大，可以考虑使用 Cloudflare 的缓存构建功能，加速后续构建。
  • 调试构建失败：
    • 在 Cloudflare Pages 仪表板中，每次构建都会有详细的构建日志。仔细查看日志，可以帮助您定位构建命令或依赖问题。
    • 在本地运行构建命令 (npm run build 等)，确保项目能在本地成功构建，排除本地环境问题。
  • 理解 _redirects 和 _headers 文件：
    • 在您的 build output directory 中创建 _redirects 文件，可以配置页面重定向规则。
    • 创建 _headers 文件，可以自定义 HTTP 响应头，例如设置缓存策略、安全策略等。
  • 处理 SPA 路由：对于单页应用，如果用户直接访问一个非根路径（例如 /about），服务器可能会返回 404 错误。您通常需要在项目设置中配置一个 Fallback page (回退页面)，将其指向 index.html，这样所有的路由请求都会先经过您的 SPA 应用处理。

6. 总结

Cloudflare Pages 提供了一个现代化、高效且功能强大的静态网站托管解决方案。通过简单的 Git 集成，您可以在几分钟内将您的网站部署到全球网络，并享受极速的性能和零维护的便利。无论您是前端开发者、博主还是想要快速发布个人项目的创作者，Cloudflare Pages 都是一个值得尝试的优秀选择。

现在，是时候将您的创意变为现实，让您的网站在全球范围内闪耀了！

滚动至顶部