如何实现动静分离

大家好，又见面了，我是你们的朋友全栈君。

一、动静分离

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

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

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

可以用一张图来表示：

二、好处分析

1、常规做法的好处

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

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

2、本文分享方案的好处

上文说张戈博客使用了一种偷懒的方案，做法很简单：网站只用一台服务器，但是会新增绑定一个和主站完全不一样的二级域名，比如张戈博客主站是 zhang.ge，而二级域名用的是 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/zhang.ge; # 图片等静态资源请求代理到本地主站（关键配置） 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 zhang.ge; # 这里改为实际主站域名（必须） expires max; # 设置浏览器304缓存为最长期限 } # 为这个二级域名额外设置一个robots文件 location ~ (robots.txt) { rewrite /robots.txt /resrobots.txt last; # 在网站根目录新增一个resrobots.txt，内容和七牛CDN类似，禁止搜索引擎抓取非静态资源（resrobots.txt内容参考：https://zhang.ge/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://zhang.ge$1 permanent; # zhang.ge 修改为实际主站域名 } } location ~ /\. { deny all; access_log off; log_not_found off; } access_log /data/wwwlogs/res.zgboke.com.log access; }

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

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

/** * WordPress CDN代码版 By 张戈博客 * 原文地址：https://zhang.ge/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 zhang.ge res.zgboke.com;

当然，强迫症患儿们，还可以根据域名判断，来进行上述 Vhost 类似跳转，此处就不展开了。

同样的，对于虚拟主机来说，只需要在虚拟主机控制面板中新增一个二级域名绑定即可。但是这个方法不适用于 https 站点，因为一般的 https 证书并不能用于 2 个完全不一样域名。

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