昨天在GitHub上无意中看到了一个WordPress REST API主题——Antony-Nuxt,大概看了一下主题是基于Vue写的,觉得挺不错,做好部署的情况下应该能对全站带来不错的性能提升。不过可惜也有一些问题,导致实际并没有能成功落地

前言

GitHub地址: https://github.com/HelipengTony/antony-nuxt

其实我个人来说,觉得这个开源项目真的不错,也正是看到这个项目才知道鬼WP原来支持REST API的,我一直以为这玩意打算出生入死和MVC一直好兄弟了。

使用REST API做前后分离和使用期原本的MVC方式各有优劣,MVC的方式渲染放在后端,整个来说缓存上比较好把控,但无法实现局部刷新,每个点击操作几乎都要重新渲染一次;然而前后端分离的话,前端的缓存如果做好能达到接近100%的边缘缓存命中率,这性能吊炸天了应该,但负面上的——接口上每次需要一个请求回去,站点挂了的情况下当即就反映出来了。

一点吐槽

希望WP能慢慢支持一下前后分离的设计吧,查了一下相关的主题并不多。前一阵子部署的wpDiscuz插件也真的是令我大吃一惊,原本以为这个评论插件是通过json来传送评论信息,结果一直出现CDN缓存加上把评论缓存了的情况,不仅非常奇怪,F12看了一下发现这东西响应的不是json是html块…这操作我还是第一次见

部署方案

那么假定主题能够正常移植并且测试没有问题,个人来做部署会使用如下的方式。

主题已经渲染完成了,假设我现在手上已经有生成的静态文件了。看作者好像是使用nginx做了反向代理和重写,个人觉得其实部署还会有更好的办法,因为这样似乎解决不了主页的分发问题,或者说它的缓存命中率不是最高的。

那么假定现在我有域名test.cc,我希望我的博客域名是blog.test.cc,那么或许可以尝试如下的部署的方案(步骤)。

服务商选择

全静态托管,由于Vue需要前端进行路由,因此要做URL重写。那么我们要找支持URL重写的CDN服务商,我查了一下文档,确定又拍云支持URL重写(此处重写是指支持尾部URI重写到目标URI),至于阿里云的,文档写的模糊不清,感兴趣的可以去试试。阿里云的服务bug比较多,但是实测线路非常好,如果测试能实现的话其实托管在阿里云上或许会是一个不错的选择。

不过说到这里,我还是建议对于没有太多时间折腾的老哥们,还是不要选择阿里云。我用阿里云的东西有3年了大概,碰到过数不清的bug。OSS删不掉文件、下载不了文件、不显示文件,CDN缓存刷了不生效,OSS配置响应头不生效,函数计算实例删不掉,签发证书卡死..真的bug非常多,如果没有太多时间折腾还是建议又拍云把,虽然线路是有一定差距,但是稳,而且回源始终是最优路由(源站在海外的会好很多)。

静态分发

那么所有的静态资源推进存储桶里去并绑定镜像回源,并配置好URL重写,将所有URL重写到index中去,配置一下CDN预热,那么此时就可以保证静态的这一部分资源能够在CDN覆盖区以最快的速度完成加载,并且理论上来说,这部分资源的缓存命中率应该是100%。此时我们得到了全静态分发的域名blog.test.cc

动态回源

这里我就要批评一下阿里云的CDN了,阿里云的CDN设计很奇怪,普通CDN回源是边缘就近回源,全站加速只有动态资源走最优路由,其他仍然边缘就近回源,并且动态资源不支持缓存,真是个奇葩设计。如果你的源站在海外,边缘就近回源会导致这部分回源的内容特别慢,谨慎尝试

上述静态资源如果阿里云支持我所说的重写的话,那么此处仍然推荐使用阿里云的CDN,但是不同的是——刚刚静态的使用普通CDN并绑定域名blog.test.cc,此处的接口回源可以使用全站加速,这样的作用是——确保国内外双向访问都能获得较好的体验。实测阿里云线路回源(日本到国内)同样大小的文件在200ms左右,而又拍云的在300ms左右,所以如果想追求极致性能的,确保阿里云支持上述的重写方式,个人还是优先推荐阿里云的。

新开一个全站加速,并且点掉所有的静态资源(相当于100%回源),为什么呢,因为如果你源站在海外你不这样基本静态回源就卡死你了。这个动态的CDN绑定域名为api.blog.test.cc,并且CDN上需要做好CROS跨域处理,以避免预检请求被拦导致接口不通。

效果

那么这样一来,拆分成两部分的站点,一部分是全静态,一部分是全动态。全静态我们通过100%的缓存命中率优化加载速度(记得预热),全动态(即api部分)通过最优路由100%回源,中间只是一个跨域问题要处理。