使用宝塔面板 + 又拍云实现 WordPress 动静分离

自己尝试了很久,大量百度弄了许久都没弄成功,之前因为使用 NaNa 主题所以加了懿古今创建的个人站长交流群,所以在群里问了一下,不过很遗憾的是并没有任何一个朋友来为我这个很白痴的问题进行解答,终于还是有自己一个人接着折腾,不过好在总算搞定了。网上还是有很多教程的,看了一下都是基于张戈的教程,不过由于时间很长了所以有的东西不一样了,因此重新记录一下过程。不得不说看了很多说法最终还是原作者张戈的让我弄成功了。

一、新建网站

这里需要新建一个网站进行反代理主站,新建站点绑定需要作为静态资源加载的二级域名,比如本站折腾的 “cdn.winmx.cn” 。建好后打开网站设置开始我们的愉快之旅吧!

  • 配置 SSL :如果主站已经开启了 SSL 访问,那么这里也是需要配置 SSL 的,否则有啥意义呢?至于怎么配置 SSL 证书对宝塔面板而言是十分简单的了,个人建议还是都开启 SSL 吧,毕竟现在已经成为主流了。
  • 修改站点目录:找到站点目录将运行目录修改为主站的根目录。如本站的:1svnpD.png
  • 设置反向代理:添加反向代理,设置代理名称及目标 URL ,保存即可,如下图:1ypNan.png

    这个不重要,因为还要修改配置文件的。下面的才是画重点的东西。点击保存后会自动关闭窗口,然后我们就可以看到刚刚添加的反向代理。与此同时还有一个配置文件的选项哦,点开配置文件,将里面的代码全部删掉换成下面的代码,注意将其中的网址换成自己的。

    #PROXY-START/
    # 图片等静态资源请求代理到本地主站(关键配置)
    location ~* .*\.(js,css,json,txt,md,csv,xml,log,conf,vue,jpg,jpeg,gif,png,tif,tiff,bmp,svg,psd,ico,tga,imb,mp3,mp4,avi,mpeg,rm,ra,ogg,wav,wmv,rmi,aac,rmvb,mkv,flv,swf,mov,movie,exe,ios,apk,ipa,pxl,sis,cab,deb,rar,zip,gzip,tar,7z,bzip2,dmg,gz,wim,tbz,tpz,z,jar,ttf,otf,woff,woff2,eot,sfnt)$ {
    		add_header Access-Control-Allow-Origin *; # 解决字体跨站问题
    		add_header Access-Control-Allow-Headers X-Requested-With;
    		add_header Access-Control-Allow-Methods GET,OPTIONS;
    		proxy_pass https://127.0.0.1; # 如果是启用了https的网站,这里最好改成 https://127.0.0.1,避免主站加了非https协议的跳转配置,导致不成功。
    		proxy_set_header  X-Forwarded-For $remote_addr;
    		proxy_redirect off;
    		proxy_set_header Host www.winmx.cn; # 这里改为实际主站域名(必须)
    		expires max;                       # 设置浏览器304缓存为最长期限
    }
    # 为这个二级域名额外设置一个robots文件
    location ~ (robots.txt) {
    		rewrite /robots.txt /resrobots.txt last;  # 在网站根目录新增一个resrobots.txt,禁止搜索引擎抓取非静态资源。
    }
    # 如果通过静态域名访问的是非静态资源,比如访问了我们的文章页面,则跳到主站对应的页面。
    location / { 
    	if ( $request_uri !~* .*\.(js,css,json,txt,md,csv,xml,log,conf,vue,jpg,jpeg,gif,png,tif,tiff,bmp,svg,psd,ico,tga,imb,mp3,mp4,avi,mpeg,rm,ra,ogg,wav,wmv,rmi,aac,rmvb,mkv,flv,swf,mov,movie,exe,ios,apk,ipa,pxl,sis,cab,deb,rar,zip,gzip,tar,7z,bzip2,dmg,gz,wim,tbz,tpz,z,jar,ttf,otf,woff,woff2,eot,sfnt)) 
    		{
    		rewrite ^(.*)$ $scheme://www.winmx.cn$1 permanent; # www.winmx.cn 修改为实际主站域名
    	}
    }
    
    #PROXY-END/
    

    这段代码是 Nginx 的反向代理配置,来自张戈博客,改了一下静态资源的数量,有点心大了。

  • 配置额外的 robots 文件:打开主站根目录,创建一个“resrobots.txt” 文件,里面写下如下内容:
    User-agent: *
    Allow: /robots.txt
    Allow: /wp-content/
    Allow: /*.png*
    Allow: /*.jpg*
    Allow: /*.jpeg*
    Allow: /*.gif*
    Allow: /*.bmp*
    Allow: /*.ico*
    Allow: /*.js*
    Allow: /*.css*
    Disallow: /
    

至此宝塔面板的配置就完成了,接下来就是配置又拍云了。

二、又拍云设置

  • 没有注册又拍云的肯定是要先注册啦,点击这里开始注册吧!另外加入又拍云联盟可以免费获取每月 10G 储存空间和 15G 流量哦,我之所以折腾又拍云也是因为这个嘛,毕竟这点免费额度确实够我使用了。注册过程就不说了,跟着指引走就行了,另外使用又拍云必须要备案的域名。
  • 创建云存储服务:找到基础产品列表中的云储存创建一个服务。设置如下:

    1yieQf.png

    至于配置就不需要管了,这里不重要。

  • 创建 CDN :同样找到基础产品列表中的 CDN 创建一个服务。1yFMjK.png
  • 缓存配置:选择 Web 静态资源然后删除其中的 htm 和 html 就可以了,具体按照自己的需求来。1yFN9I.png
  • 添加 SSL 证书以及绑定域名这里就不说了。

三、添加函数,将主站静态资源改为二级域名加载

  • 打开正在使用的 WordPress 主题根目录下面的 functions.php 将下面的代码添加在最后一个 ?> 的前面,最后没有 ?> 的就直接加在最后面。
    /**
     * WordPress CDN代码版 By 张戈博客
     * 原文地址:https://zhang.ge/4905.html
    **/
    function QiNiuCDN(){
        function Rewrite_URI($html){
            $domain = 'www\.winmx\.cn';   //填写主站域名,小数点前需要加上反斜杠转义
            $static = 'cdn.winmx.cn'; //填写二级静态域名
            //更多静态资源需要替换,可以将后缀加到后面的括号,使用分隔符分割
            $html = preg_replace('/http(s|):\/\/'.$domain.'\/wp-([^"\']*?)\.(js|css|json|txt|md|csv|xml|log|conf|vue|jpg|jpeg|gif|png|tif|tiff|bmp|svg|psd|ico|tga|imb|mp3|mp4|avi|mpeg|rm|ra|ogg|wav|wmv|rmi|aac|rmvb|mkv|flv|swf|mov|movie|exe|ios|apk|ipa|pxl|sis|cab|deb|rar|zip|gzip|tar|7z|bzip2|dmg|gz|wim|tbz|tpz|z|jar|ttf|otf|woff|woff2|eot|sfnt)/i','//'.$static.'/wp-$2.$3',$html); return $html; } if(!is_admin()){ ob_start("Rewrite_URI"); } } add_action('init', 'QiNiuCDN');
    
  • 打开主站根目录下的 wp-config.php 在末尾添加下面的代码来限制网站 cookies 的作用域。
    define('COOKIE_DOMAIN', 'www.winmx.cn');  //将 www.winmx.cn 换成自己的主域名。
    

    到此就完成任务了,打开新的隐藏标签页访问你的网站,按 F12 再刷新看看 CSS、JS 等文件已经是从设定的二级域名跑了。需要注意的是此时还是从你的服务器跑哦,得等一会儿才是从又拍云跑,毕竟缓存有一个过程。

四、补充说明

  • 将主域名使用又拍云 CDN 时其实又拍云已经为你做动静分离了,所有的静态资源又拍云都是优先访问已经缓存的,找不到时才回源。因此其实只需要将主域名添加到又拍云 CDN 就已经达到目的了。
  • 因为本站使用的是知更鸟主题,接入又拍云 CDN 后缩略图显示一直有问题,没有找到原因,因此使用的是奇安信的网站卫士,然后静态资源走又拍云。同时个人也觉得奇安信的防御比较好,缺点就是节点少得可怜。
  • 使用上面的函数代码默认缓存的貌似只有 wp-content 和 wp-includes 这两个文件夹及根目录下的静态文件,正常使用是没问题的,如果你像我一样在根目录下新建了一些文件夹用来存放一些特效的话,这里是不缓存的。(只是怀疑,并不肯定,因为折腾过程中确实没缓存)
  • 因为知更鸟主题使用了又拍云的缩略图,所以我又将云存储绑定了一个域名,再新建一个文件夹来存放一些图片用作外链使用(通过CDN那个域名也能正常访问使用的),所以讲上面的函数删除了改成使用插件 CDN Enabler 了,用这个可以自定义要缓存的目录。
  • 在进行静态分离前先停用已经启用的静态缓存插件,如 WP Super Cache ,设置好后再重新启用并清除所有缓存。
暂无评论

发送评论 编辑评论


下一篇