WordPress REST API类主题的一点想法

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

前言

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

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

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

我尝试部署了一下这个主题,也大概看了下代码,觉得主题设计的相当棒,作者肯定是用心了,只是很可惜的,逻辑写的不是非常好,几乎全部的API操作把URL直接写死了,给移植带来了一定的不便;一些静态资源也并没有通过相对路径的方式引入也是直接写死在了代码里;同时,部署后频繁出post.post_imgurl未定义的错误,由于不是做前端的也并不想花太多时间在这上边,尝试debug后也没能发现一些实际有用的信息,便选择了放弃(逃,不知道是我WP的问题还是哪里的问题

主题真的不错,如果作者能解决好这些问题我觉得收费购买还是能够接受的

一点吐槽

希望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%回源,中间只是一个跨域问题要处理。