折腾搬瓦工–11–使用七牛云CDN加速WordPress

Overview

前言

其实一开始也没计划去搞CDN的,原来的配置已经稳定了接近一年,各种静态资源全部加了压缩和缓存,wordpress的主题也全部去掉图片,减少加载时间。

由于这周出了一个事故,在修复时又碰上运营商劫持HTTP请求的问题。原本分发安卓apk的链接由于忘记上传文件,导致用户在访问时出现404,当地的运营商劫持了404,蹦出个不和谐的页面,事情发生还不到几个小时,链接就被举报了,而后重新上传,把七牛下载链接放出时,又出现unknown host的情况,下载链接前面莫名多出一个IP和端口,查了一下又是长城宽带的,公司网络使用的长城宽带又给你加缓存了。所以说,能部署HTTPS的时候,绝对不能偷懒。于是先拿了这个博客试了下部署七牛云的CDN,链接使用HTTPS。

七牛云注册后有10GB的免费空间,不分HTTP与HTTPS,但每月赠送的10GB流量只限于HTTP的,HTTPS链接产生的流量直接收费,价格是HTTP的两倍。创建存储空间后,默认生成的链接是HTTP的,之前安卓apk在分发时没注意,直接使用了这个链接,但它也提供免费的固定HTTPS链接(在空间概览的右侧,融合CDN加速域名可以看到),链接为qnssl.com的一个子域名,一个存储空间可以创建一个,同时它还提供自定义域名,应该是不限个数。

需要注意的是自定义域名需要备案,证书可以使用七牛免费提供的赛门铁克证书(有效期一年),或者自己上传证书公私钥(需要有效期大于半年),使用Let's Encrypt证书当然是不行的了,它只有三个月的有效期。

这个站点应该会在很长时间内继续存放在搬瓦工上(之前失手,不小心充值了三年的费用......),而搬瓦工的速度是越来越慢了,变得和乌龟一样,国内的ping值几乎都在150~200ms之间。

但加了CDN后,除了文章数据外,都从七牛和极客族下载,速度还是有很大的提升的。

本文里使用自定义域名 static.wbuntu.com,可以在浏览器的开发者工具中看到详情,直接从wbuntu.com获取的数据基本只剩下文字了。

最后吐槽下,七牛云的各种服务命名逼格实在太高了,让人都搞不懂是什么东西,而搞懂后也不清楚这个服务为什么叫这个名字,要命的是文档不全,后台速度慢。

下面开始是正文了。

正文

简单说就是为我们的网址配置一个镜像,但七牛云并不会主动将我们站点的所有资源镜像下来,通过WordPress中配置WPJAM与七牛云存储插件,将返回数据中的原站点链接替换为七牛云提供的链接,七牛云会处理URL,返回已经缓存的数据,或者从原站点抓取数据后再返回。步骤如下

1.配置存储空间与镜像存储

注册七牛云,在对象存储中新建一个存储空间,名字可以随意,然后在镜像存储中添加镜像源,即原站点链接

2.配置自定义域名(可略过)

可以在空间概览中右侧的融合CDN中直接请求一个七牛的子域名,格式如xxxx.qnssl.com,这个需要填入到七牛云存储插件里的七牛域名中,或者使用自定义域名。

自定义域名需要备案,虽然步骤挺简单,但是七牛给的说明还是让人觉得逼格太高不懂。我们自定义的域名需要HTTPS证书,由七牛提供,设置为CNAME,指向七牛的CDN网络。

在个人面板中选择证书管理

新页面中点击申请证书,填入自定义的域名,以本站点为例,使用static.wbuntu.com

提交后可以在订单列表中看到

CNAME Key与CNAME Value格式为xxxx.static.wbuntu.com,假定前者为sucksffffff.static.wbuntu.com,后者为fffffffsucks.static.wbuntu.com。

在域名解析中新增一个CNAME类型配置,主机记录为sucksffffff.static,记录值为fffffffsucks.static.wbuntu.com,完成后几分钟内域名循环验证就能通过,然后获得了一个HTTPS证书。

上图中配置好的是第二个,接着在空间概览的融合CDN中新增自定义域名static.wbuntu.com,证书选择刚才创建好的,通信协议选择HTTPS,使用场景为图片小文件,源站配置为七牛云存储,选择刚才创建的存储空间(存储空间已经配置了镜像存储中的镜像源),创建后一段时间,就会在融合CDN中对应域名的域名信息里看到CNAME,再在域名解析中新增一个CNAME配置,主机记录为static,记录值为域名信息中的CNAME。

域名解析生效后,执行dig static.wbuntu.com命令,在国内看到输出与国外是不同的。

3.配置WordPress插件

wordpress插件的作者主页在这里:我爱水煮鱼

需要安装的插件有WPJAM与七牛云存储,WPJAM不需要做太多的配置,七牛云存储需要配置七牛域名(使用七牛提供的免费HTTPS域名或者自定义域名)、七牛空间名(我们刚才创建的存储空间名)、ACCESS KEY与SECRET KEY(在个人面板的密钥管理中获取)。

保存更改后就启用了CDN,首次加载时七牛会从源站点拉数据,比较慢一点,后续再访问就很快了。

最后是坑,原来使用了Useso take over Google插件

安装WPJAM和七牛云存储插件时卸载了插件,然后出现Safari打开博客主页,全部文字都加载不了的情况,看了下网络连接中超时的请求都是fonts.gstatic.com的,随后又启用了这个插件,还是没办法解,最后发现是geekzu的css中包含被墙的字体,这就很无奈......这个主题里需要的字体无法加载,没翻墙的浏览器都会遇到文字空白的情况。最后卸载了插件,直接在主题的模版函数(functions.php)中替换了包含的字体css文件地址,css文件中的谷歌链接全部修改为geekzu的资源,并把css文件也上传到了七牛。

配置完成~~~~

Update:2017.05.24

最近创建空间时,发现七牛已经不提供HTTPS子域名了,只能自定义域名了,当然这就需要备案了......另外这次把所有css样式表中涉及的字体都下载到了服务器上,同时修改引用的font.css文件,将其中的字体地址指向博客目录下,配合WPJAM使用,可以让七牛缓存字体,再提升一点速度,而且如果某天取消备案,不能使用七牛时,也可以直接关闭插件,不会影响到博客的正常使用,目前博客放在了linode上,速度比搬瓦工快多了。