🐤 建站神器:使用Cloudflare实现全站CDN

🐤 建站神器:使用Cloudflare实现全站CDN

Fri Aug 23 2024
Pin
7 minutes

很多站长会购买虚拟主机或VPS来部署,甚至直接部署在自己的NAS上。我们知道,这种部署环境普遍存在性能或带宽不足的问题,一旦机器宕机或网络出现问题,轻则用户访问缓慢,重则直接打不开网站。解决方案,那就是Cloudflare的Page Rules和Cache Rules功能


关于Cloudflare的Page Rules和Cache Rules功能,很多人分不清二者有什么区别和联系。简单说,Page Rules除了可以配置缓存规则外,还可以设置很多其他的规则;而Cache Rules仅用于设置缓存相关的规则,并且其缓存规则的优先级要高于Page Rules。

前提准备#

• 你的网站域名需要在Cloudflare上解析,并且开启代理这是必要条件(传送门)
• 关闭Wordpress上的各种缓存插件,并清空缓存,这是建议

设置Page Rules#

Cloudflare免费计划,每个域名可以免费添加3条页面规则,对于Wordpress来说正好够用,如果你是其他建站程序切勿直接照抄,要根据你的程序链接规则去设置

第一步、 从Cloudflare主页选择你的域名,进入到域名功能界面#

第二步, 展开左侧菜单,点击规则——页面规则,进入页面规则设置页面#

第三步、 点击创建页面规则按钮,一共添加3条规则,如下#

1、设置管理后台规则(如果有后台的话)#

规则名称
URLhttps://www.bigwind.cn/admin* ,注意:这个网址要改成你自己的
浏览器完整性检查开启
安全级别
缓存级别绕过
IP地理位置表头开启
电子邮件混淆技术开启

如下图:
重点是,缓存级别一定要设置绕过,缓存级别一定要设置绕过,缓存级别一定要设置绕过,否则就麻烦大了!

2、设置首页、分类、页面及文章页规则#

规则名称
URLhttps://bigwind.cn/* ,注意:这个网址要改成你自己的
浏览器完整性检查开启
安全级别
缓存级别缓存所有内容
边缘缓存TTL2小时。就是每隔2小时CDN会回源到源站获取更新,免费计划最短只能设置2小时,一般足够了。
浏览器缓存TTL就是访客浏览器缓存页面的时间,默认是30分钟,最短可以设置2分钟。
IP地理位置表头开启
电子邮件混淆技术开启

如下图:

3、设置其他动态页面规则#

例如评论、搜索等等。

规则名称
URLhttps://waline-blog.bigwind.cn/* ,注意:这个网址要改成你自己的
浏览器完整性检查开启
SSL严格
安全级别
缓存级别绕过
IP地理位置表头开启
电子邮件混淆技术开启

如下图:

重点也是缓存级别一定要设置绕过,不过设置错了不像管理后台规则那么严重。

以上我们就设置好了基本的网站页面规则,这时候可以保证网站的首页、分类、文章等页面都可以走CDN。这地方有个小技巧,设置完成以后自己到网站上把页面都点一遍,以触发页面缓存到CDN,等到真正的访客浏览网站时,就能秒开了!

设置Cache Rules#

由于Cloudflare免费计划最多只能设置3条页面规则,我们设置了1个静态页面和2个动态页面规则之后,就用完了。但是,网站除了以上页面外,还有很多静态资源,比如图片、JS、CSS、字体等等,如果这些每次都从源站加载,还是会占用大量带宽,这时候Cache Rules(缓存规则)就排上用场了。

Cloudflare免费计划每个域名可以创建10条缓存规则,绰绰有余!下面我们就将静态资源加入到缓存中。

第一步、从Cloudflare主页选择你的域名,进入到域名功能界面#

第二步、展开左侧菜单,点击缓存——Cache Rules,进入缓存规则设置页面#

第三步、 点击创建规则按钮,添加1条规则,如下#

方法一:可以在界面中添加多个Or字段,表示符合其中任何一种就行。#

方法二、因为静态资源的类型比较多,也可以直接点击编辑表达式,把下面的内容直接粘贴进去即可#

JAVASCRIPT
1
(http.request.uri contains ".css") or (http.request.uri contains ".js") or (http.request.uri contains ".woff") or (http.request.uri contains ".jpg") or (http.request.uri contains ".png") or (http.request.uri contains ".svg") or (http.request.uri contains ".gif") or (http.request.uri contains ".bmp") or (http.request.uri contains ".ico") or (http.request.uri contains ".jpeg")

博客首页和文章页缓存#

第四步、 其他设置#

继续往下拉,对其他设置项进行设置。

  • lsky 图床 - 图片缓存#

以上我们就设置好了静态资源的缓存规则,这时候并不是马上就能生效了,而是会随着你的网站被访问逐渐被缓存到CDN。与页面规则通用的小技巧,设置完成以后自己到网站上把页面都点一遍,以触发页面缓存到CDN,等到真正的访客浏览网站时,静态资源就能秒加载了!

其他设置#

除了页面规则和缓存规则设置,我们还可以充分利(白)用(嫖)Cloudflare的其他功能,以下几个功能建议开启:

1、Crawler Hints#

当使用 Cloudflare 的站点更改内容时,Crawler Hints 会为搜索引擎和其他爬网程序提供高质量的数据。这样,爬网程序可以精确地抓取,避免浪费,同时可以普遍减少源服务器及其他 Internet 基础结构的资源消耗。
操作路径:缓存——配置——Crawler Hints

2、Always Online™#

源服务器不可用时让访问者仍可访问您的网站。Cloudflare 可通过 Internet Archive 的 Wayback Machine 提供有限的网页副本。
操作路径:缓存——配置——Always Online™

3、Tiered Cache Topology#

通过选择缓存拓扑,您可以控制源服务器与 Cloudflare 数据中心的连接方式,以确保缓存命中率更高、源服务器连接数更少,并且 Internet 延迟更短。
操作路径:缓存——Tiered Cache——Tiered Cache Topology™,选择Smart Tiered Caching Topology

清理缓存#

最后,如果你修改了网站的主题或安装了新的插件或修改了代码等等,强烈建议你马上清理Cloudflare的CDN缓存,否则网站可能不能正常显示,或者各种错误。

操作路径:缓存——配置,最顶上就有清除缓存的操作按钮,支持自定义路径清除和清除所有内容,可按自己实际情况使用。

参考

🐤 建站神器:使用Cloudflare实现Wordpress全站CDN

在Cloudflare设置缓存规则全站加速WordPress博客