Cloudflare Pages 配置方法与使用体验
Cloudflare Pages 可以供前端开发人员协作和部署网站。
目前已成为稳定功能。
- 官方介绍
- 官方文档
我在 2021/2 就通过了申请,开始使用这一平台。
免费计划:
- 不能并行构建站点
- 每月最多构建 500 次
- 无站点数量限制
- 无请求数限制
- 无带宽限制
嗯,够用。
特点
- 网页性能较好
- 配置简单
- 开发环境与生产环境分离
- CI/CD 自动化
- 支持绑定多域名
使用时遇到的问题
创建项目无法删除无法使用免费域名- 必须使用 GitHub 的仓库
- 自动从所有分支构建,无法忽略部分分支
- 设置自定义域名后,不能设置访问默认域名后自动跳转自定义域名
- 不添加
Access-Control-Allow-Origin
header,可能造成跨域访问异常 - Known issues
开始使用
点这里开始
- 如果没有 Cloudflare 帐号,你需要注册一个。
- 如果页面语言不符合你所需要的语言,可以在右上角切换。
- 目前只能从 GitHub 仓库源码构建页面,所以你需要一个放有项目源码的 GitHub 仓库,并同步更新修改。(可能需要 Git 基础)
注册后,你需要将 GitHub 全部仓库或部分仓库的访问权限授予 Cloudflare Pages
。如果未来想修改,可以在 GitHub 调整设置。
配置
Cloudflare Pages 比较易于配置。由于以前有过配置 CI/CD 的相关经验,且源码也已在 GitHub 上同步,在配置上我没遇到什么问题。
较 GitHub Actions 相比,Cloudflare Pages 配置更简单一些(自由度也少一些)
打开Cloudflare 网页 配置面板,在这里你可以查看和修改你目前的项目使用情况。
创建并配置一个新项目
点击创建项目
,选取项目所在仓库。
然后设置构建和部署
-
给项目起一个名称
如果与其它项目名不冲突,它将成为默认访问域名的一部分。即
*.pages.dev
-
选择生产分支
从这个分支获取的代码将会部署到生产环境,其它分支的代码将会部署到开发环境。
-
构建设置
有许多默认预设可选。如果预设不起作用或是你使用特殊配置,需要手动配置。
我使用最多的构建命令是
yarn build
和npm run build
。使用最多的构建目录是public
和dist
。你可以先在本地测试。
如果不需要构建过程,根目录就是要部署的网页:构建命令留空,构建目录设置为/
-
根目录、环境变量设置
一般不需要设置,可以根据你的需求设置。
设置自定义域名
在项目设置中点击自定义域,点击设置。
输入你想使用的域名,然后修改对应 DNS 记录:CNAME 到 Cloudflare 分配的默认域名。(如果域名解析托管在 Cloudflare 则会自动设置。
性能效果测试
我使用PageSpeed Insights来测试网页性能表现。
以下是我 blog 的测试成绩
连接方式 | 移动设备 | 桌面设备 |
---|---|---|
GitHub Pages | 57 | 90 |
GitHub Pages + Cloudflare CDN | 67 | 94 |
Cloudflare Pages | 58 | 93 |
以下数据来自UptimeRobot
连接方式 | 24 小时平均延迟 |
---|---|
GitHub Pages | 246.66ms |
GitHub Pages + Cloudflare CDN | 290.64ms |
Cloudflare Pages | 402.36ms |
已将 blog 迁移至 Cloudflare Pages,要是发现 blog 有什么异常欢迎联系我反馈。(◍•ᴗ•◍)❤