WordPress 静动态资源分离CDN解决方案

原贴地址:https://www.mivm.cn/wordpress-cdn-solution/

 

如果你注意过米V米的网页源代码和 IP,会发现 www.mivm.cn 不再是 CDN 了,取而代之的是静态资源交给 cdn.mivm.cn,www.mivm.cn 只负责动态资源的加载。

CDN 对于各位站长来说肯定不陌生,不了解 CDN 的小伙伴可以去搜索一下。

虽然之前 cdn.mivm.cn 就已经存在,不过只加载文章图片等静态资源。

这样做的好处有两点:

CDN 加速动态内容会造成频繁回源,导致源服务器的流量有所增加,而且 CDN 加速动态内容的效果不明显。

所有静态资源交给 CDN 处理,可以加快网站速度,还可以减轻源服务器负担。

静态资源是指,当用户访问直接返回,文件内容不会动态改变的文件,比如:CSS、JS、图片、字体等。

WordPress 的静态资源大致分为:系统资源、插件资源、主题资源和媒体库资源。

系统资源是 WordPress 自己加载的 CSS、JS 这些,文件位于/wp-includes/{css,js}/目录内。一般加载的不多,可能也就一两个?

插件资源、主题资源、媒体库资源:插件资源大多数在后台加载,某些插件会在前端加载少量的静态资源;主题资源为主题所用到的 CSS、JS、图片、字体等文件,某些主题会用 PHP 动态生成文章的缩略图,其实毫无卵用;媒体库资源一般为文章内的图片等资源,或者为你上传的媒体资源。以上这些资源文件位于/wp-content/{plugins,themes,uploads}目录内

如何将静态资源复制到 CDN 上面,再让 WordPress 从 CDN 加载呢?

下面就给大家讲一下我的解决方案

WordPress CDN 解决方案

CDN 服务商的选择

如果你的网站没有使用 CDN,那么你需要选择一家 CDN 服务商,CDN 服务商还需要提供文件存储服务,也就是目前各大服务商都提供的对象存储。

国内目前主流的 CDN 服务商有:阿里云、七牛云、又拍云、腾讯云等等

我只用过阿里云和七牛云,就说一下这两家服务商的优缺点吧:

阿里云:整体来说没什么缺点,对象存储(OSS)和内容分发网络(CDN)做的都很不错,而且提供的 API、SDK、和开发者工具比较完整。OSS 还支持 CDN 缓存自动刷新,当你 OSS 的文件内容被改变时,CDN 节点的缓存会自动刷新,不像某些 CDN 服务需要手动刷新缓存。

七牛云:很多站长可能都用过,因为每个月有10G的免费流量,API、SDK 和开发者工具也比较齐全,不过我觉得七牛云不好用的一点就是缓存太严重,缓存规则好像不起作用,每次上传文件我都需要去手动刷新缓存,没有像阿里云那样的缓存自动刷新。

我推荐使用阿里云,因为有CDN缓存自动刷新,而且最近 CDN 流量包有活动。

如果你使用的主机也是阿里云的话,注意把 ECS 和 OSS 的区域选择同一个,内网传输速度快。

静态资源复制到 CDN

一般都是对象存储搭配 CDN 使用,只需要用官方提供的工具或者 API,把文件上传到对象存储即可。

这里以阿里云的 OSS 命令行工具 ossutil 为例,下载地址:https://help.aliyun.com/document_detail/50452.html

根据官方文档下载、安装、配置完成后,就可以将文件上传到 OSS 了。

首先,将静态资源单独复制一份,注意,只复制静态资源,可以将静态资源的目录复制到单独的文件夹内,如下图:

复制静态资源到单独目录

复制完以后别急着上传,还需要做一些减法,因为插件和主题有部分动态和没有用的文件也被复制了,把这些删掉。

删除指定后缀名文件:find /tmp/www.mivm.cn.copy/ -name *.$type -exec rm -f {} \;将 $type 改为需要删除的文件后缀名,比如:php

这些是我整理的没有用的文件后缀名,当然,不保证适合你的网站环境,dat json key md mo pem po php pot txt xml gitignore htaccess svnignore

删除空文件夹:while [ -n "`find /tmp/www.mivm.cn.copy/ -type d -empty`" ];do find /tmp/www.mivm.cn.copy/ -type d -empty -exec rm -rf {} \; >/dev/null 2>&1 ;done

最后,把文件上传到 OSS,很简单,一条命令搞定ossutil cp /tmp/www.mivm.cn.copy/ oss://mivm-cdn/ -r -f -u,mivm-cdn 为 OSS 的 Bucket 名称,注意更改。

然后通过控制台或 ossutil 查看文件是否上传成功,浏览器是否可以访问。

为了方便执行上面这些操作,我把这些操作写成了一个脚本,点击下载,改几个变量即可使用。

WordPress、插件、主题有新版本更新,重新执行上面操作即可。媒体资源建议直接存储在 OSS 上面通过外链使用。

如果你想更加自动化的话,可以写个插件,当有插件或主题更新的时候,自动将文件更新至 OSS,不过小山比较懒,就没有写。

从 CDN 加载静态资源

如何让 WordPress 从 CDN 加载这些静态资源呢?

非常简单,只需要一个插件:WP Super Cache

这是一个 WordPress 快速缓存插件,它附带了一个 CDN 功能,可以将网站的指定链接替换为 CDN 链接,非常的方便。

安装插件 → 点击 【CDN】 → 将 [Off-site URL] 改为你的 CDN 域名 → 选中 [开启 CDN 支持] → 保存修改

如果没有意外的话,你的网站的静态资源会全部转移到 CDN,可以通过浏览器的开发者工具查看,如下图。

浏览器开发者工具

至此,这个解决方案就完成了。


可能有些小伙伴担心 CDN 费用问题,这个担心是完全多余的,CDN 可以有效的降低网站的带宽成本。

拿阿里云的 ECS 来说吧,如果按带宽计费,1M 带宽不够用,带宽多了又太贵。如果按流量计费,ECS 的流量是 0.7/G,CDN 是 0.27/G,是不是 CDN 更省钱呢?

好了,以上就是我的 WordPess 静动态资源分离CDN解决方案,有不懂的地方,在下方留言。

点赞

发表回复