在一个项目还是单体架构的时候,所有的js,css,image都会在一个web网站上,看起来并没有什么问题,比如下面这样:
但是当web网站流量起来的时候,这个单体架构必须要进行横向扩展,而在原来的架构中静态资源这羊毛是出在单体架构这头羊身上,所以横向多少
个单体,就有多少个静态资源文件夹,比如下面这样的架构。
那这种架构有什么问题呢? 总的来说会有如下二个问题:
1. 浏览器对单一域名的请求有并发限制。
在同一个域名下,一般来说有js,css,img,media,html等等静态资源,如果资源都挂在同一个域名下,势必会影响页面的加载速度,而且单一域名
下静态资源还会带上同域名下的cookie等本不需要附加的信息。
2. 不方便管理和资源的浪费
为什么这么说呢? 我们知道静态资源一般来说都是很占资源空间的,尤其是用户上传的头像,csv那更是占用web服务器资源,为了应对突发情况,
一般会保持web代码的3个版本的回滚策略,也就是说你需要在web1,web2,web3上同时进行3个静态资源文件夹的copy,相比单独用静态资源服务
器统一管理的文件夹的情况对比,前者的磁盘资源的浪费可想而知。。。所以改正后的架构应该是这样的。
有些同学可能会说,空口无凭,你得找点真实的案例给我看看,为了满足你的胃口,下面我就找下‘携程’ 和 ‘淘宝’站点给你分享一下。
一:携程首页对这二个问题的解决
啥也不想说,通过浏览器随便抓取一个css文件给大家分享一下,详细如下图:
1. css的加载路径
从http://webresource.c-ctrip.com/ResCRMOnline/R5/css/index/private_index.A_v3.css?ts=20170828_pro 中可以看到这和www.ctrip.com
域名根本就不是一个域名,除了有点像,不说话,甚至还有点想笑,所以这种方式的加载对页面的快速呈现有很大的帮助。
2. 对R5的分析
这个R5是什么意思,就是有10个版本,R1-R10,每发布一个新版本,R++,轮回而已,所以你可以将R5 -> R6,那就是轮回之前的css版本。
携程现在的静态资源大部分也是使用到了tengine,这是一个淘宝开源的基于nginx的proxy服务器,在nginx上面做了很多的优化,而且tengine很
大的一个亮点就是可以使用多文件合并加载,比如10个css文件,可以合并成一个css进行呈现,这就让10个http请求变成了1个,同样也是对页面
快速呈现有非常大的帮助,很可惜在ctrip上面并没有找到合并加载css,js的案例,或许还是历史的原因吧,那只能在taobao官网上找一下看看。
从上图中可以清楚看到tengine的强大功能,将default-min.css 和 apply-min.css 进行了合并加载,很神奇吧,接下来分享一下tengine的安装配置。
二:tengine安装
1. 下载地址:
可以去tengine官网(http://tengine.taobao.org/)上找到目前最新的 2.2.0的安装包。
[root@localhost myapp]# wget http://tengine.taobao.org/download/tengine-2.2.0.tar.gz
--2017-09-02 19:54:07-- http://tengine.taobao.org/download/tengine-2.2.0.tar.gz
Resolving tengine.taobao.org (tengine.taobao.org)... 120.55.149.135
Connecting to tengine.taobao.org (tengine.taobao.org)|120.55.149.135|:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: 2160648 (2.1M) [application/octet-stream]
Saving to: ‘tengine-2.2.0.tar.gz’
100%[===================================================================================================>] 2,160,648 2.11MB/s in 1.0s
2017-09-02 19:54:13 (2.11 MB/s) - ‘tengine-2.2.0.tar.gz’ saved [2160648/2160648]
[root@localhost myapp]# tar -xzvf tengine-2.2.0.tar.gz
[root@localhost myapp]# ls
tengine-2.2.0 tengine-2.2.0.tar.gz
[root@localhost myapp]# cd tengine-2.2.0
[root@localhost tengine-2.2.0]# ls
AUTHORS.te CHANGES CHANGES.ru conf contrib html man packages README.markdown tests
auto CHANGES.cn CHANGES.te configure docs LICENSE modules README src THANKS.te
[root@localhost tengine-2.2.0]# pwd
/root/myapp/tengine-2.2.0
2. 然后就是tengine的一些依赖包
[root@localhost myapp]# yum install -y zlib zlib-devel openssl openssl-devel pcre pcre-devel gcc gcc-c++
3. 常规的configure, make,make install
[root@localhost tengine-2.2.0]# ./configure --prefix=/usr/myapp/tengine
checking for OS
+ Linux 3.10.0-327.el7.x86_64 x86_64
checking for C compiler ... found
+ using GNU C compiler
+ gcc version: 4.8.5 20150623 (Red Hat 4.8.5-11) (GCC)
checking for gcc -pipe switc