从零开始：Cloudflare Pages部署配置完全指南

在现代Web开发中，选择一个合适的部署平台对项目的成功至关重要。今天我要分享一个完整的Cloudflare Pages部署指南，包括从GitHub集成到自定义域名配置的全流程。

为什么选择Cloudflare Pages？

在众多静态网站托管服务中，Cloudflare Pages具有以下显著优势：

🚀 性能优势

全球CDN网络：Cloudflare在全球拥有200+个数据中心
边缘计算：内容在离用户最近的节点提供服务
自动优化：内置的图片优化、压缩和缓存策略
HTTP/3支持：最新的网络协议，提供更快的连接速度

💰 成本效益

免费额度generous：每月100,000次请求免费
带宽不限制：无论流量多大都不额外收费
SSL证书免费：自动提供和更新SSL证书

🛠️ 开发体验

Git集成：直接连接GitHub、GitLab等代码仓库
自动部署：代码推送后自动触发构建和部署
预览部署：每个分支和PR都可以生成预览URL
即时回滚：一键回滚到任何历史版本

部署前的准备工作

1. 项目要求检查

在开始部署之前，确保你的项目满足以下条件：

# 检查Node.js版本（建议18.0以上）
node --version

# 确保项目可以正常构建
npm run build

# 检查构建输出目录
ls -la dist/  # 或者你的输出目录

2. 项目结构优化

对于最佳的部署体验，建议项目包含以下配置：

package.json 脚本配置：

{
  "scripts": {
    "build": "你的构建命令",
    "preview": "你的预览命令"
  }
}

性能优化配置文件：

创建 public/_headers 文件：

/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  X-XSS-Protection: 1; mode=block
  Referrer-Policy: strict-origin-when-cross-origin
  Cache-Control: public, max-age=31536000, immutable

/_astro/*
  Cache-Control: public, max-age=31536000, immutable

/api/*
  Cache-Control: no-cache, no-store, must-revalidate

创建 public/_redirects 文件：

# SPA路由支持
/blog/* /index.html 200
/projects/* /index.html 200

# 404处理
/* /404.html 404

Cloudflare Pages配置详细步骤

第一步：登录和项目创建

访问Cloudflare控制台
打开 Cloudflare Dashboard，使用你的账户登录。
导航到Pages服务
在左侧导航栏中找到并点击 “Pages” 选项。
创建新项目
点击页面右上角的 “创建项目” 按钮。

第二步：连接Git仓库

选择Git集成
在项目创建页面，选择 “连接到Git” 选项。
授权GitHub访问
如果是第一次使用，需要授权Cloudflare访问你的GitHub账户：
- 点击 “GitHub” 选项
- 在弹出的GitHub授权页面点击 “Authorize Cloudflare”
- 选择要授权的仓库（可以选择全部或指定仓库）
选择目标仓库
在仓库列表中找到并选择你的项目仓库，点击 “开始设置”。

第三步：构建配置

这是最关键的一步，正确的配置决定了部署是否成功：

项目名称: my-awesome-website
生产分支: main  # 或者 master
构建命令: npm run build
构建输出目录: dist  # 根据你的项目调整
根目录: (留空，除非项目在子目录中)

框架预设配置：

对于不同的框架，Cloudflare提供了预设配置：

Astro: 自动检测并配置构建命令
Next.js: 支持静态导出和服务端渲染
Vue.js: 支持Vue CLI和Vite项目
React: 支持Create React App和其他构建工具
静态HTML: 简单的静态文件项目

第四步：环境变量设置

根据项目需求设置环境变量：

# 必需的环境变量
NODE_VERSION=18.20.8  # 指定Node.js版本

# 可选的环境变量示例
PUBLIC_SITE_URL=https://yourdomain.com
PUBLIC_API_BASE_URL=https://api.yourdomain.com

设置步骤：

在项目设置页面找到 “环境变量” 部分
点击 “添加变量”
输入变量名和值
选择环境（生产、预览或两者）

第五步：高级配置

构建配置优化：

# 构建超时设置
构建超时: 20分钟  # 根据项目复杂度调整

# 根目录设置
根目录: ""  # 通常留空，除非项目在子目录

# 兼容性标志
兼容性日期: 2023-11-01  # 使用最新的兼容性设置

部署配置：

生产部署: 仅在主分支（main/master）有更新时触发
预览部署: 为所有分支和PR创建预览环境
部署钩子: 配置Webhook用于自定义集成

自定义域名配置指南

准备工作

在配置自定义域名之前，确保：

域名所有权: 你拥有要绑定的域名
DNS访问权限: 可以修改域名的DNS记录
域名已解析: 基本的DNS设置已生效

配置步骤详解

第一步：添加自定义域名

进入域名设置
在你的Cloudflare Pages项目中，找到 “自定义域名” 选项卡。
添加域名
点击 “设置自定义域名”，输入你的域名（例如：www.yourdomain.com）。
选择域名类型
- 根域名: yourdomain.com
- 子域名: www.yourdomain.com、blog.yourdomain.com

第二步：DNS记录配置

根据域名类型，需要添加不同的DNS记录：

对于子域名（推荐）：

类型: CNAME
名称: www
目标: your-project.pages.dev
TTL: 自动

对于根域名：

类型: CNAME
名称: @
目标: your-project.pages.dev
TTL: 自动

第三步：DNS设置详细步骤

以下是在常见DNS服务商中的设置方法：

1. 如果使用Cloudflare作为DNS服务商：

1. 登录Cloudflare Dashboard
2. 选择你的域名
3. 进入"DNS"选项卡
4. 点击"添加记录"
5. 填写以下信息：
   - 类型: CNAME
   - 名称: www（或你要的子域名）
   - 目标: your-project.pages.dev
   - 代理状态: 已代理（橙色云朵）

2. 如果使用其他DNS服务商：

1. 登录你的域名提供商控制面板
2. 找到DNS管理或域名解析设置
3. 添加新的CNAME记录：
   - 主机记录: www
   - 记录类型: CNAME
   - 记录值: your-project.pages.dev
   - TTL: 600（或默认值）

第四步：SSL证书配置

Cloudflare会自动为你的自定义域名提供SSL证书：

证书申请: 添加域名后自动开始
验证过程: 通常需要几分钟到几小时
状态检查: 在Cloudflare Pages控制台查看证书状态

SSL配置选项：

# 在Cloudflare SSL/TLS设置中
加密模式: 完全（严格）  # 推荐设置
始终使用HTTPS: 开启
HSTS: 开启（可选，增强安全性）
最小TLS版本: 1.2

域名配置验证

配置完成后，通过以下步骤验证：

DNS传播检查

# 使用dig命令检查DNS记录
dig www.yourdomain.com CNAME

# 或者使用在线工具
# https://www.whatsmydns.net/

SSL证书验证

# 检查SSL证书状态
curl -I https://www.yourdomain.com

# 查看证书详情
openssl s_client -connect www.yourdomain.com:443

网站功能测试
- 访问主页面检查内容加载
- 测试不同路径的页面跳转
- 验证HTTPS重定向是否正常
- 检查移动端显示效果

性能优化技巧

1. 缓存策略优化

通过 _headers 文件配置缓存：

# 静态资源长期缓存
/_assets/*
  Cache-Control: public, max-age=31536000, immutable

# HTML文件短期缓存
/*.html
  Cache-Control: public, max-age=3600

# API接口不缓存
/api/*
  Cache-Control: no-cache, no-store, must-revalidate

2. 压缩和优化

# 启用压缩
/*
  Content-Encoding: gzip

# 安全头部设置
/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  X-XSS-Protection: 1; mode=block
  Referrer-Policy: strict-origin-when-cross-origin

3. 重定向规则

通过 _redirects 文件优化路由：

# 旧链接重定向
/old-page  /new-page  301

# SPA路由支持
/app/*  /index.html  200

# 移动端重定向
/mobile/*  https://m.yourdomain.com/:splat  301

监控和维护

部署监控

构建状态监控
- 在Cloudflare Pages控制台查看构建日志
- 设置构建失败通知邮件
- 配置Webhook集成到Slack等工具

性能监控

# 使用Lighthouse检测性能
npm install -g lighthouse
lighthouse https://yourdomain.com --output html

# 使用WebPageTest
# https://www.webpagetest.org/

常见问题排查

构建失败问题：

# 检查Node.js版本
Error: Node.js version not supported
解决方案: 设置正确的NODE_VERSION环境变量

# 依赖安装失败
Error: npm install failed
解决方案: 检查package-lock.json是否提交，清理node_modules重新安装

# 构建超时
Error: Build exceeded time limit
解决方案: 优化构建脚本，减少不必要的依赖

域名访问问题：

# DNS未生效
问题: 域名无法访问
解决方案: 等待DNS传播（通常24-48小时），检查DNS记录配置

# SSL证书问题
问题: HTTPS访问报错
解决方案: 等待证书签发完成，检查证书状态

最佳实践总结

1. 项目结构规范

project/
├── public/
│   ├── _headers          # 性能和安全配置
│   ├── _redirects        # 路由重定向规则
│   └── assets/           # 静态资源
├── src/                  # 源代码
├── package.json          # 项目配置
└── README.md            # 项目文档

2. 部署流程规范

开发分支: dev 或 develop
预发布分支: staging
生产分支: main 或 master
功能分支: feature/xxx

3. 性能优化清单

4. 安全配置清单

结语

Cloudflare Pages为我们提供了一个强大、可靠且经济的静态网站托管解决方案。通过本文的详细指南，你应该能够：

完成基础部署: 从GitHub仓库到生产环境的完整流程
配置自定义域名: 包括DNS设置和SSL证书配置
优化网站性能: 通过缓存、压缩等技术提升用户体验
建立监控体系: 确保网站稳定运行

记住，部署只是开始，持续的优化和监控才能确保项目的长期成功。建议定期检查网站性能指标，根据用户反馈和数据分析不断改进。

如果在配置过程中遇到问题，不要犹豫，Cloudflare的官方文档和社区都是很好的资源。祝你的项目部署顺利！

本文基于实际项目配置经验编写，如有疑问欢迎在评论区交流讨论。

从零开始：Cloudflare Pages部署配置完全指南

Share to WeChat

从零开始：Cloudflare Pages部署配置完全指南

为什么选择Cloudflare Pages？

🚀 性能优势

💰 成本效益

🛠️ 开发体验

部署前的准备工作

1. 项目要求检查

2. 项目结构优化

Cloudflare Pages配置详细步骤

第一步：登录和项目创建

第二步：连接Git仓库

第三步：构建配置

第四步：环境变量设置

第五步：高级配置

自定义域名配置指南

准备工作

配置步骤详解

第一步：添加自定义域名

第二步：DNS记录配置

第三步：DNS设置详细步骤

第四步：SSL证书配置

域名配置验证

性能优化技巧

1. 缓存策略优化

2. 压缩和优化

3. 重定向规则

监控和维护

部署监控

常见问题排查

最佳实践总结

1. 项目结构规范

2. 部署流程规范

3. 性能优化清单

4. 安全配置清单

结语

Comments