• 本博客已正式上线 IPv4 + IPv6 双栈访问

CloudFlare 免费 CDN 小白使用教程 缓存 Cache 配置

挨踢网络 Young Free! 3年前 (2021-09-12) 3268次浏览 8个评论 扫描二维码

> 挨踢网络 > CloudFlare 免费 CDN 小白使用教程 缓存 Cache 配置
注意:本系列教程只是 Young Free 的一点点使用经验,仅仅适用于纯小白接入 CloudFlare CDN 免费版,不适用于大佬或者有经验的人。按照教程走完全程,仅仅代表做了小白该做的必备步骤,不代表您的站点就是完全安全的了,也不是您的站点访问速度就有了质的飞跃了。这仅仅是一个良好的开始而已。同时,欢迎大佬们留言指正文中的疏漏之处,也欢迎大佬分享更好的优化经验,带带我们小白,谢谢。

通过调整 CloudFlare CDN 的缓存配置,我们可以有针对性的控制:只缓存静态文件,还是全站都缓存。还可以控制 CDN 节点缓存的时长(已移动到页面规则里了),以及客户端浏览器本地缓存时长。通过不同时长的缓存,可以大大降低回源的请求,从而减轻服务器的负担,加快网站的访问速度。

CloudFlare 免费 CDN 小白使用教程 缓存 Cache 配置

CloudFlare CDN 缓存配置

默认提供了三个选项,第一个 概述,如上图所示,是付费用户才能使用的缓存分析功能;第二个 Tiered Cache分层缓存),这个功能尚未开放,点击了没反应;第三个 配置 按钮,才是我们可以自行配置的选项。

进到 缓存配置 页面后,我们可以配置:清除缓存、缓存级别、浏览器缓存 TTL、违法图片鉴别、总是在线 和 开发者选项。Young Free 这里一次解释他们的含义和用途。

清除缓存

顾名思义,就是删除节点中已缓存的资源。当我们网站中有某个文件变更后,我们可以在这里删除节点中的缓存,让用户以最快的速度访问到更新后的文件。这里的文件可以是 JS / CSS / JPG / SVG / HTML / MP4 等任何你网站上的文件。如果你更新的内容比较多,你也可以选择清除所有内容。对于我们这些小白用户,网站的访问量本来就不大,所以,可以放心的清除所有内容,并不会给服务器带去多少额外压力的。大佬们的大流量站点才需要注意。

缓存级别

默认提供三种缓存级别,标准、忽略查询字符串、没有查询字符串。对于包括 WordPress / Typecho / Discuz 在内的大多数网站,使用标准缓存时最放心的。但如果您是静态博客,例如 Pages、Hexo 这类的,可以选择任何一个。根据 Young Free 的经验,依次解释一下名称:

标准:首选。只缓存静态内容,而且,对于长尾巴的静态内容,例如 https://www.ucwz.net/wp-content/uploads/2012/04/CloudFlare.com_.jpg?time=2021 ,如果不同访问者访问的 尾巴不同,那么,CloudFlare 不会缓则这类静态文件,每次都会根据不同的尾巴去回源请求。如果尾巴是不变的,在第一请求后,则不再回源请求,直接在节点返回相同的尾巴文件

忽略查询字符串:同样以上面的长尾巴的 图片 .jpg 文件为例,尽管图片后面长了尾巴 ?time=2021,但是,节点会不理会尾巴,把尾巴删掉,只返回 .jpg 的图片。

没有查询字符串:同样以上面的长尾巴的 图片 .jpg 文件为例,如果用户的请求不带尾巴,那么从节点返回 .jpg 的图片。如果用户的访问请求带尾巴  ?time=2021 ,那么,节点就会回源,从服务器拉去带尾巴的 .jpg?time=2021 图片返回给用户,同时,节点不缓存这个带尾巴的文件,这一点也是和 标准缓存 不同的地方。

这里的缓存配置最好和上一节教程中的速度优化搭配使用哦。

CloudFlare CDN 使用教程 Speed 速度优化

在优化选项里,大部分都是付费项目,不过,免费项目足够我们使用了。我们往下扒拉,找到免费版可以设置的项目。我们选择优化 HTML / CSS / JS 文件的体积,并启用 Brotli 来优化访问者的 HTTPS 流量的页面加载时间。

浏览器缓存 TTL

这里是告诉访问者的浏览器,可以把网站的静态资源保存在自己电脑里多少时间,在这段时间内,不要向 CloudFlare 节点 或 服务器索要同样的文件。如果你很少更新网站的 CSS,或者,很少替换同名的图片,这里随你开心了,爱设置多久就多久,在 Young Free 搭建自己的相册前的很长一段时间,Young Free 都是设置的 缓存 一年 ?。

CloudFlare 免费 CDN 小白使用教程 缓存 Cache 配置

CSAM 扫描工具

这里是为了保护儿童权益,避免有坏人利用您的上传图片功能,上传分享伤害儿童的图片。如果您的用户主要是国外的,且开放了用户上传图片功能,建议配置一下。国内的就不用了。

CloudFlare 免费 CDN 小白使用教程 缓存 Cache 配置

Always Online 总是在线

这个功能的作用在于,当您的网站无法访问时,CloudFlare 提供一份快照显示给用户,同时告诉用户,您的网站当前无法正常访问,请稍后再回来,默认开启即可,别点更新。目前 CloudFlare 与国外的 Archive.org 快照档案馆进行了合作,可以由快照档案馆提供更多版本的快照服务。国内用户不建议更新,只保证开启功能即可,毕竟这个新服务国内是不可用的。国外用户可以放心更新。

开发模式

如果我们需要在线调试网站,更新 CSS 之类的,可以临时要求 CloudFlare 回源,同时提供安全防护,非常方便。默认开启一次,回源 3 个小时,您可以随时关闭开发模式。

CloudFlare 免费 CDN 小白使用教程 缓存 Cache 配置

//2023年新增功能

Cache Rules 缓存规则

CloudFlare 越来越强大了,现在免费用户也可以自行设置更加细致的缓存规则了。我们可以利用这里的 Cache Rules 缓存规则 来强制缓存站点所有静态文件,如 CSS / JS / JPG / PNG 等。当然,你也可以按你的想法,去缓存其他文件也是完全没问题的。这里的示例仅演示 Young Free 的博客目前需要的静态文件,小白可以照抄。

在新版本的界面左侧,依次展开 Caching 栏,选择 Cache Rules 规则。这是右侧也可以看到 CloudFlare 的流量传递顺序,我们配置的就是中间层的缓存规则。点击 蓝色的 Create rule 创建规则按钮。

CloudFlare 免费 CDN 小白使用教程 缓存 Cache 配置

在规则页面,依葫芦画瓢,Field 选择 URI 路径,Operator 操作 ends with 以…结束。Value 值 写 需要缓存的 文件后缀名。加 . 和 不加 效果一样的。

//Field 可以依据 Cookies 密钥 / hostname 主机头 / referer 引用 / URI 路径 / SSL 加密 / Query String 查询字符串 / User Agent 用户代理 / X-Forwarded-For 转发 这些信息来设置细致化的 缓存或者其他规则。

//Operator 可以依据 equals / does not equals / contains / does not contain / matches regex / does not match regex / starts with / ends with / does not start with / does not end with 这些细则设定你的要求。

//Value 为 你需要的 文件路径 或 请求头 这类

//如果需要多个规则同时生效,请注意 and 和 or ,顺序。 and 是 前后两个同时命中, or 是只要一个命中就行。

CloudFlare 免费 CDN 小白使用教程 缓存 Cache 配置

设定要需要的 文件/路径 规则后,往下拉,作为小白,这里我们只需要截图中的三项就行。

Cache status 缓存状态,启用缓存;

Edge TTL 边缘缓存时长,静态文件选它一个月

Browser TTL 客户浏览器缓存时长,静态文件也选它一个月

CloudFlare 免费 CDN 小白使用教程 缓存 Cache 配置

设置完这个精细化的缓存规则后,可以大大的提高缓存的命中率。(不会立刻生效,需要随着博客的访问次数增加,会逐步提升缓存命中率)


Young Free! , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA 4.0协议进行授权
转载请注明原文链接:CloudFlare 免费 CDN 小白使用教程 缓存 Cache 配置
喜欢 (7)
[]
分享 (0)
关于作者:
欢迎来吐槽,也欢迎一起交流。如果无法在本文下评论,可以点击信封按钮,给我发送邮件。
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!


请文明发言,谢谢。
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(8)个小伙伴在吐槽
  1. 这个可以有,学到了
    陶小桃Blog2022-10-21 14:14 回复
  2. 看了一遍,感觉自己更了解了!
    缙哥哥2021-09-13 17:33 回复
  3. 有人用缓存 缓存了几十个G 图片 6的很! 学不会!!
    叶开楗2021-09-12 20:33 回复
    • 我也想知道他们是怎么做到的?
      Young Free!2021-09-12 20:42 回复
      • 我也不清楚,我也没几十个G能缓存 哈哈。我好图片才 3g
        叶开楗2021-09-13 15:32 回复
  4. 你这个系列做的真是牛 :mrgreen:
    闲鱼2021-09-12 11:13 回复