4

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

 2 years ago
source link: https://zhang.ge/5130.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Jager · 2月3日 · 2018年CDN · CDN加速 · 网站优化 9878次已读

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

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

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

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

一、动静分离

我们的网站简单来说分为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即可,接入方法就不啰嗦了,自己折腾吧!


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK