专栏首页张戈的专栏小网站最简单实用的动静分离优化方案

小网站最简单实用的动静分离优化方案

很久没写文章了,博客已经长草了,今天挤点时间分享一些小干货,也是回应一下不少站长朋友的留言问题。

有不少站长朋友问张戈博客的静态文件为啥是另外一个域名?有啥好处?如何实现?

其实这算是一种动静分离的做法,不过我这里用了偷懒的办法实现,而非彻底的动静分离,不过最终效果的区别并不大。

先啰嗦一下动静分离的概念和好处。

一、动静分离

我们的网站简单来说分为 2 种数据资源,一种是动态的数据,即 PHP 等程序语言实时吐出来的数据,在网页内容上主要是 HTML 代码,另一种则是静态资源,比如图片、css、js、视频等(当然,图片等资源也可能是实时动态生成的,比如 PHP 缩略图,这里就不展开讨论了)。

一般网站初建,因为流量小、业务简单等原因,都默认将两种数据放到一台服务器上提供服务。访问量大到一定程度之后,就可能出现带宽不足、甚至磁盘高 IO 等问题。这时,作为运维工程师或者架构师就会给出动静分离优化的建议了。做法并不复杂,运维工程师会将图片等静态资源同步到另一台 WEB 服务器,然后新增绑定一个二级域名,比如 static.domain.com,最后让开发将网页代码中的静态资源替换成这个二级域名即可。

这样一来,图片等静态资源的访问就落到了新增的服务器上,从而分担了大部分访问数据流量和 IO 负载,我们还可以针对性的给静态资源 WEB 做一些优化,比如 JS/CSS/图片压缩、内存缓存、浏览器缓存等等。进一步,我们还可以将静态资源接入 CDN,实现资源就近访问。

可以用一张图来表示:

二、好处分析

1、常规做法的好处

从上文的通俗解释来看,很明显的一个好处就是解决带宽问题,像博客圈子里的服务器,绝大部分主机都是国内的小管道云服务器(带宽小于 2M),并发访问量上来之后,就能很明显的感觉到带宽成为了瓶颈。

不过,博客圈大部分都是“一穷二白”,一般都不愿意再买一台服务器来专门承载静态资源,而且多台服务器之间的数据同步等日常维护问题也变相提高了折腾门槛。因此,国内大部分小博客都热衷于套一层 CDN 来解决带宽问题,确实是一个很好的解决方案。在《分享张戈博客的 WordPress 优化方案,缓解国内云服务器配置低下的问题》一文中,也是特别提到了这一茬。

2、本文分享方案的好处

上文说张戈博客使用了一种偷懒的方案,做法很简单:网站只用一台服务器,但是会新增绑定一个和主站完全不一样的二级域名,比如张戈博客主站是 zhangge.net,而二级域名用的是 res.zgboke.com,并且给这个二级域名套了一层 CDN。

这样做又有什么好处?和直接套一层 CDN(比如云加速)有什么不同?

第 1 个好处:显而易见比常规动静分离成本更低,分离前后服务器数量不变;

第 2 个好处:解决主站直接使用一级域名带来的 cookies“污染”,即静态资源不会再带上主站的 cookies 数据,减小了体积。这个在上文提到的优化方案一文中也着重提到,详细就不再赘述;

第 3 个好处:这个方案对于网站内容没法备案又想体验国内 CDN 加速快感的网站绝对是福音!很多网站因为内容特殊(邪恶脸)没法完成备案,所以无法使用国内的 CDN,那么就可以用本文分享的方法,直接花钱买一个备过案的垃圾域名,做好动静分离,然后将这个二级域名接入国内的 CDN,网站速度绝对可以得到质的飞跃,是不是爽歪歪?

第 4 个好处:这个和第二个比较类似,主要针对在百度云加速购买了付费套餐的朋友。因为,对于一般流量的网站,你只需要在百度云加速给一个域名购买一个专业版,那么就可以分离多个二级域名给 N 个网站使用,那么多个人合买一个专业版完全不成问题吧?当然,现在百度云加速也学聪明了,现在流量限制 50G/天(我开始用这个方案的时候无此限制),但是对于普通网站已经很够用了!!!

第 5 个好处:CDN 配置更加比较简单,因为这种静态二级域名,接入 CDN 之后,完全不用考虑缓存规则的问题,因为直接设置成全部缓存就好了!简单粗暴。

三、部署教程

啰嗦了好长篇幅,下面给出具体做法!

原理贼简单,就是在服务器上利用反向代理新增了一个新网站,内容则是反向代理了我们的主站,从而实现了 2 个域名共享相同的网站数据。

Vhost 示范规则如下:

server
    {
        listen 80;
        # HTTPS配置略
        server_name res.zgboke.com; # 改成实际二级域名
        index index.html index.htm index.php default.html default.htm default.php;
        root  /data/wwwroot/zhangge.net;
        # 图片等静态资源请求代理到本地主站(关键配置)
        location ~* .*\.(js|css|png|jpeg|jpg|bmp|ico|ogg|ogv|svg|svgz|eot|otf|woff|woff2|mp4|ttf|rss|atom|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ {
                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 http://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 zhangge.net; # 这里改为实际主站域名(必须)
                expires max;                       # 设置浏览器304缓存为最长期限
        }
        # 为这个二级域名额外设置一个robots文件
        location ~ (robots.txt) {
                rewrite /robots.txt /resrobots.txt last;  # 在网站根目录新增一个resrobots.txt,内容和七牛CDN类似,禁止搜索引擎抓取非静态资源(resrobots.txt内容参考:https://zhangge.net/5104.html)
        }
        # 如果通过静态域名访问的是非静态资源,比如访问了我们的文章页面,则跳到主站对应的页面。
        location / { 
            if ( $request_uri !~* .*\.(js|css|png|jpeg|jpg|gif|bmp|ico|ogg|ogv|svg|svgz|eot|otf|woff|woff2|mp4|ttf|rss|atom|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)) 
                {
                rewrite ^(.*)$ $scheme://zhangge.net$1 permanent; # zhangge.net 修改为实际主站域名
            }
        }
        location ~ /\. { deny  all; access_log off; log_not_found off; }
        access_log /data/wwwlogs/res.zhangge.net.log access;
}

这样就在本地新增了和主站共用一份数据的二级域名,只提供静态资源访问,其他访问都跳到主站对应页面。

完成新增后,只需要使用以前分享的七牛 CDN 代码或者 CDN 插件,将网站的静态资源替换为这个新二级域名,比如以前分享的纯代码版,加到 functions.php 即可完成替换:

/**
 * WordPress CDN代码版 By 张戈博客
 * 原文地址:http://zhangge.net/4905.html
**/
function QiNiuCDN(){
    function Rewrite_URI($html){
        $domain = 'zhangge\.net';   //填写主站域名,小数点前需要加上反斜杠转义
        $static = 'res.zgboke.com'; //填写二级静态域名
        //更多静态资源需要替换,可以将后缀加到后面的括号,使用分隔符分割
        $html = preg_replace('/http(s|):\/\/'.$domain.'\/wp-([^"\']*?)\.(jpg|png|gif|bmp|jpeg|css|js)/i','//'.$static.'/wp-$2.$3',$html);
        return $html;
	}
    if(!is_admin()){
        ob_start("Rewrite_URI");
    }
}
add_action('init', 'QiNiuCDN');

完成部署后,我们网站的前台页面中的图片、js 等静态资源链接就全部换成了新的二级域名了。

Tips:其他部署方法 如果网站未启用 https,完全可以更简单,只需要在我们的主站 vhost 配置的 server_name 参数中新增一个域名即可,比如: server_name zhangge.net res.zgboke.com; 当然,强迫症患儿们,还可以根据域名判断,来进行上述 Vhost 类似跳转,此处就不展开了。 同样的,对于虚拟主机来说,只需要在虚拟主机控制面板中新增一个二级域名绑定即可。但是这个方法不适用于 https 站点,因为一般的 https 证书并不能用于 2 个完全不一样域名。

最后,我们将这个二级域名接入 CDN 即可,接入方法就不啰嗦了,自己折腾吧!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 浅析网站更换ip或使用CDN会不会影响SEO排名

    最近张戈博客在阿里云和腾讯云服务器之间来回折腾了数次,别的收获没有,就悟出了一个问题:网站更换 IP 或使用 CDN 会不会影响 SEO 收录或排名? 收录就不...

    张戈
  • SEO分享:让百度删除不想收录的域名或快照的最快方法

    个别网站可能会出现以下类似困扰: ①、百度收录了自己不想收录的域名,造成内容重复,比如张戈博客,百度近一半的收录是 www 的域名,而且收录的内容还是重复的!实...

    张戈
  • 申请域名邮箱,为空间减轻压力

    玛思阁换空间之后,空间后台已配备邮箱管理(以前的那个 Win 主机,邮箱都没有,让我一直用的 QQ 邮箱!),由于个人邮箱好几个,于是就想都弄到一起,集中看邮件...

    张戈
  • 大型网站架构利器-CDN技术

    概念 CDN这个概念相信大家都比较耳熟,到底什么是CDN呢? CDN,全称为Content Delivery Network,即内容分发网络。 其基本思路是尽可...

    Java技术栈
  • 腾讯云cdn问题 Q&A

    假设您的业务源站域名为www.test.com,域名接入 CDN 开始使用加速服务后,当您的用户发起 HTTP 请求时,实际的处理流程如下图所示:

    Mr.Du
  • 获取shell脚本所在目录

    前几天写的七牛的参赛demo,用bash写了一个便捷安装的脚本,涉及到了路径相关的判断,从stackoverflow,加上自己的实践整理一下。

    技术小黑屋
  • 其他系列 | 需要知道了解的CDN工作原理

    内容分发网络(Content Delivery Network,简称CDN)是建立并覆盖在承载网之上,由分布在不同区域的边缘节点服务器群组成的分布式网络。CDN...

    Tinywan
  • 分配DNS的不同线路到各个 CDN 提升速度效果总结

    明月前几天的文章【运用免费CDN实现负载均衡和移动网访问加速】一文里提高了一个利用 DNS 的不同线路解析给适合对应线路的 CDN 服务以求达到所有“线路”下访...

    明月云服务
  • Go 包管理机制深入分析

    随着 Go 语言的深入使用,其依赖管理机制也一直是各位 Gopher 热衷于探讨的话题。Go 语言的源码依赖可通过 go get 命令来获取,但自动化程度不高,...

    JFrog杰蛙科技
  • python 中的filter, map

    对seq可迭代序列或者对象的每一个元素调用一次func,如果func返回值为True,则将该元素插入返回结果列表。反之,则丢弃;

    py3study

扫码关注云+社区

领取腾讯云代金券