本篇文章使用免费的Cloudflare为WordPress网站配置CDN,通过不同的CDN设置以适应B2B展示型网站和B2C在线购物网站。
在配置CDN前后可以先测试网站真是加载速度,方便做一个对比。
WordPress网站配置CDN思路
B2B网站CDN思路
B2B网站主要以展示为主,基本上没有动态内容,也不适用用户登录功能,所以更是和对整个网站/页面进行缓存,属于纯静态缓存,也能更多的将服务器内容缓存在CDN上,最大程度的减少对源服务器的请求。
B2C网站CDN思路
B2C网站相对来讲就会比较复杂,需要在线下单支付、用户登录等功能,都属于动态请求,如果这些功能或者页面被缓存会造成网站严重问题,所以就要使用动静分离的缓存机制,将静态文件(css、js、图片等)缓存在CDN中,其他的php、api等请求不缓存。
了解完大体思路后,接下来就根据自己的网站类型和Well一起进行网站CDN的配置。
注册Cloudflare
在开始之前,如果大家没有Cloudflare账号,需要先进行注册。
进入Cloudflare网站后,点击右上角注册按钮,进入套餐选择页面,选择Free免费版就可以了,点击“添加一个网站”。
在注册页面填入邮箱和密码,点击Sign up。
要确保邮箱正确,因为注册完会要求验证邮箱。
因为Well已经注册过了,就不再接着演示了。
添加域
注册并登录Cloudflare后,进入Cloudflare后台首页,点击右上角“添加域”按钮。
输入域名,选择“快速扫描DNS记录”,点击继续。
选择Free免费套餐,继续。
它会自动将我们域名下原有的解析记录同步过来(如果有解析的话),不用我们在自己动手迁移,点击“继续前往激活”。
在Cloudflare上激活域名,需要在域名提供商处将域名原本的DNS修改为Cloudflare提供的DNS。
修改域名DNS
这一步骤需要在域名注册商处完成,比如Well的域名是在阿里云注册的。
通过浏览器来到阿里云域名控制台。
点击对应域名列表右侧的“管理”按钮。
点击左侧导航栏的“DNS修改”,再点击“修改DNS服务器”按钮。
将Cloudflare提供的两个DNS分别复制到阿里域名的DNS区域,点击确定。
因为DNS更新有一定的延迟,等待5分钟左右后,回到Cloudflare,点击检测DNS更新情况。
DNS更新成功后,在CF后台会有这样的提示,这样域名解析就由Cloudflare接管了。
之后如果要添加域名解析,就要到Cloudflare的DNS进行添加,不用再到域名购买商添加解析。
B2B网站CDN配置
在Cloudflare后台,找到我们刚添加的域名,点击进入域名的管理界面。
然后点击左侧导航栏:规则 – 页面规则,Free套餐有3条规则,我们将使用这三条页面规则来配置B2B网站的CDN缓存规则,点击右侧“创建页面规则”按钮。
第一条页面规则:缓存绕过WordPress后台
我们先来观察一下WordPress后台页面的URL结构,其结构组成是domain.com/wp-admin/XXXX的形式。
页面规则如下:
URL填:domain.com/wp-admin*
缓存级别:绕过
这样设置,CDN就不会缓存网站后台。
这样设置还有一个好处,在我们修改WP后台登录地址的时候,可以将登录地址修改成domain.com/wp-admin-XXX的格式,也能避免缓存登录页面。
第二条页面规则:缓存绕过JSON请求
WordPress有一些动态请求的格式是domain.com/wp-json/XXXXX的结构,这种动态请求是不能缓存的,否则会产生数据错误。
页面规则如下:
URL填:domain.com/wp-json*
缓存级别:绕过
第三条页面规则:缓存所有页面
页面规则如下:
URL填:domain.com/*
缓存级别:缓存所有内容。
边缘缓存TTL:一个月。
边缘缓存TTL(Time to Live)是指在边缘服务器(CDN)上缓存数据的有效时间。简单来说,它决定了缓存中的数据可以保存多长时间,而不需要从源服务器重新获取。
电子邮件混淆技术:开启。
电子邮件混淆技术是一种用于保护电子邮件内容和发送者身份的技术。其主要目的是防止垃圾邮件、钓鱼攻击或其他形式的电子邮件滥用。
如果你在网站上公开显示了电子邮件地址,并且你发现收到了大量垃圾邮件,开启混淆技术可能会有效防止。
浏览器完整性检查:开启。
浏览器完整性检查 是一种机制,用于确保浏览器获取的资源在传输过程中没有被篡改。它通过校验数据的完整性来确保用户收到的内容是可信的。
浏览器缓存TTL:一个月。
浏览器缓存 TTL 是指浏览器在缓存某个资源时,存储该资源的有效时间。简单来说,它决定了浏览器可以使用缓存数据多长时间,而不需要重新请求服务器
顺序:最后一个
这个一定别选错,只有这条顺序在最后一个,前两条规则才能生效,保证除了后台和json以外的页面URL都缓存。
最后三条规则设置完成后是这个样子,大家仔细对照,尽量避免设置错误。
B2C网站CDN配置
缓存规则一:缓存静态文件
左侧导航栏:缓存 – Cache Rules – 创建规则,进入规则创建页面。
为规则命名:缓存静态文件(也可以自定义其他名字)。
选择自定义筛选表达式。
表达式字段选择URL,运算符选择包含,值填写静态文件后缀。
设置项比较多,就不再一一赘述,Well会把表达式代码直接放在下方,复制粘贴到下方表达式,再点击窗口右上角的“使用表达式生成器”就可以应用表达式。
(http.request.uri contains “.jpg”) or (http.request.uri contains “.png”) or (http.request.uri contains “.webp”) or (http.request.uri contains “.exe”) or (http.request.uri contains “.pdf”) or (http.request.uri contains “.woff”) or (http.request.uri contains “.woff2”) or (http.request.uri contains “.js”) or (http.request.uri contains “.css”) or (http.request.uri contains “.html”) or (http.request.uri contains “.txt”) or (http.request.uri contains “.gif”) or (http.request.uri contains “.svg”) or (http.request.uri contains “.ico”) or (http.request.uri contains “.rar”) or (http.request.uri contains “.zip”) or (http.request.uri contains “.tar”) or (http.request.uri contains “.jsp”)
缓存资格:符合缓存条件
边缘TTL:如果存在,使用缓存控制标头
浏览器TTL:接受源服务器TTL
最后记得保存部署。
缓存规则二:不缓存后台/动态请求
第二条缓存规则:
规则命名:后台饶过缓存
自定义筛选表达式
表达式代码如下:
(http.request.uri.path contains “/wp-admin”) or (http.request.uri.path contains “/wp-login”) or (http.request.uri.path contains “/wp-logout.php”) or (http.request.uri.path contains “/wp-comments-post.php”) or (http.request.uri.path contains “/cart”) or (http.request.uri.path contains “/checkout”) or (http.request.uri.path contains “/profile.php”) or (http.request.uri.path contains “/wp-pass.php”) or (http.request.uri.path contains “/dynamic-content”) or (http.request.uri.path contains “/wp-json”) or (http.request.uri contains “preview=true”) or (http.request.uri contains “/?s=”) or (http.request.uri contains “action=rp”) or (http.request.uri contains “checkemail=confirm”) or (http.request.uri contains “sitemap”)
缓存资格:绕过缓存
放置位置:最后一个
最后保存部署。
这是两条规则设置完成后的样子。
清除Cloudflare CDN缓存
在我们网站进行样式调整或者内容修改后,就需要刷新缓存才能看到前台变化。
缓存-配置,可以选择清除单个页面缓存或者整个网站的缓存。