在一个项目还是单体架构的时候,所有的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 switch ... found
- checking for gcc builtin atomic operations ... found
- checking for C99 variadic macros ... found
- checking for gcc variadic macros ... found
- checking for compiler structure-packing pragma ... found
- checking for unistd.h ... found
- checking for inttypes.h ... found
- checking for limits.h ... found
- checking for sys/filio.h ... not found
- checking for sys/param.h ... found
- checking for sys/mount.h ... found
- checking for sys/statvfs.h ... found
- checking for crypt.h ... found
- checking for Linux specific features
- checking for epoll ... found
- checking for EPOLLRDHUP ... found
- checking for O_PATH ... found
- checking for sendfile() ... found
- checking for sendfile64() ... found
- checking for sys/prctl.h ... found
- checking for prctl(PR_SET_DUMPABLE) ... found
- checking for sched_setaffinity() ... found
- checking for crypt_r() ... found
- checking for SO_REUSEPORT ... found
- checking for sys/vfs.h ... found
- checking for nobody group ... found
- checking for poll() ... found
- checking for /dev/poll ... not found
- checking for kqueue ... not found
- checking for crypt() ... not found
- checking for crypt() in libcrypt ... found
- checking for F_READAHEAD ... not found
- checking for posix_fadvise() ... found
- checking for O_DIRECT ... found
- checking for F_NOCACHE ... not found
- checking for directio() ... not found
- checking for statfs() ... found
- checking for statvfs() ... found
- checking for dlopen() ... not found
- checking for dlopen() in libdl ... found
- checking for sysinfo() ... found
- checking for getloadavg() ... found
- checking for /proc/meminfo ... found
- checking for sched_yield() ... found
- checking for SO_SETFIB ... not found
- checking for SO_ACCEPTFILTER ... not found
- checking for TCP_DEFER_ACCEPT ... found
- checking for TCP_KEEPIDLE ... found
- checking for TCP_FASTOPEN ... found
- checking for TCP_INFO ... found
- checking for accept4() ... found
- checking for eventfd() ... found
- checking for int size ... 4 bytes
- checking for long size ... 8 bytes
- checking for long long size ... 8 bytes
- checking for void * size ... 8 bytes
- checking for uint64_t ... found
- checking for sig_atomic_t ... found
- checking for sig_atomic_t size ... 4 bytes
- checking for socklen_t ... found
- checking for in_addr_t ... found
- checking for in_port_t ... found
- checking for rlim_t ... found
- checking for uintptr_t ... uintptr_t found
- checking for system byte ordering ... little endian
- checking for size_t size ... 8 bytes
- checking for off_t size ... 8 bytes
- checking for time_t size ... 8 bytes
- checking for setproctitle() ... not found
- checking for pread() ... found
- checking for pwrite() ... found
- checking for sys_nerr ... found
- checking for localtime_r() ... found
- checking for posix_memalign() ... found
- checking for memalign() ... found
- checking for mmap(MAP_ANON|MAP_SHARED) ... found
- checking for mmap("/dev/zero", MAP_SHARED) ... found
- checking for System V shared memory ... found
- checking for POSIX semaphores ... not found
- checking for POSIX semaphores in libpthread ... found
- checking for struct msghdr.msg_control ... found
- checking for ioctl(FIONBIO) ... found
- checking for struct tm.tm_gmtoff ... found
- checking for struct dirent.d_namlen ... not found
- checking for struct dirent.d_type ... found
- checking for sysconf(_SC_NPROCESSORS_ONLN) ... found
- checking for openat(), fstatat() ... found
- checking for getaddrinfo() ... found
- checking for PCRE library ... found
- checking for PCRE JIT support ... found
- checking for OpenSSL library ... found
- checking for zlib library ... found
- creating objs/Makefile
- Configuration summary
- + using system PCRE library
- + using system OpenSSL library
- + md5: using OpenSSL library
- + sha1: using OpenSSL library
- + using system zlib library
- + jemalloc library is disabled
- nginx path prefix: "/usr/myapp/tengine"
- nginx binary file: "/usr/myapp/tengine/sbin/nginx"
- nginx configuration prefix: "/usr/myapp/tengine/conf"
- nginx configuration file: "/usr/myapp/tengine/conf/nginx.conf"
- nginx pid file: "/usr/myapp/tengine/logs/nginx.pid"
- nginx error log file: "/usr/myapp/tengine/logs/error.log"
- nginx http access log file: "/usr/myapp/tengine/logs/access.log"
- nginx http client request body temporary files: "client_body_temp"
- nginx dso module path: "/usr/myapp/tengine/modules/"
- nginx http proxy temporary files: "proxy_temp"
- nginx http fastcgi temporary files: "fastcgi_temp"
- nginx http uwsgi temporary files: "uwsgi_temp"
- nginx http scgi temporary files: "scgi_temp"
- [root@localhost tengine-2.2.0]# make && make install
4. 启动tengine下的nginx进程,可以看到当我启动之后,tengine的80端口已经打开了。
- [root@localhost myapp]# ls
- tengine tengine-2.2.0 tengine-2.2.0.tar.gz
- [root@localhost myapp]# cd tengine
- [root@localhost tengine]# ls
- conf html include logs modules sbin
- [root@localhost tengine]# cd conf
- [root@localhost conf]# cd ../sbin
- [root@localhost sbin]# ls
- dso_tool nginx
- [root@localhost sbin]# ./nginx
- [root@localhost sbin]# netstat -tln
- Active Internet connections (only servers)
- Proto Recv-Q Send-Q Local Address Foreign Address State
- tcp 0 0 0.0.0.0:80 0.0.0.0:* LISTEN
- tcp 0 0 192.168.122.1:53 0.0.0.0:* LISTEN
- tcp 0 0 0.0.0.0:22 0.0.0.0:* LISTEN
- tcp 0 0 127.0.0.1:631 0.0.0.0:* LISTEN
- tcp 0 0 127.0.0.1:25 0.0.0.0:* LISTEN
- tcp6 0 0 :::22 :::* LISTEN
- tcp6 0 0 ::1:631 :::* LISTEN
- tcp6 0 0 ::1:25 :::* LISTEN
- [root@localhost sbin]#
三:css文件和合并加载的验证
1. css文件验证
下面在nginx.conf 中配置一下静态资源的访问路径,所有静态资源都是放在/usr目录下。
- location~ ^ /(images|javascript|js|css|flash|media|static)/ {
- root / usr;
- }
然后生成 /usr/css/top.css 文件,最终浏览可以发现配置已生效。
- [root@localhost usr]# mkdir css
- [root@localhost usr]# ls
- bin css etc games include lib lib64 libexec local myapp sbin share src tmp
- [root@localhost usr]# cd css
- [root@localhost css]# rz
- [root@localhost css]# ls
- top.css
2. css 合并压缩
这个合并模式还需要在tengine下安装一个ngx_http_concat_module 模块,可以看下官网:http://tengine.taobao.org/document_cn/http_concat_cn.html。
我这里采用静态编译,编译之前先把之前的tengine进程给关闭掉(nginx -s stop)。
- [root@localhost myapp]# cd tengine-2.2.0
- [root@localhost tengine-2.2.0]# ls
- AUTHORS.te CHANGES CHANGES.ru conf contrib html Makefile modules packages README.markdown tests
- auto CHANGES.cn CHANGES.te configure docs LICENSE man objs README src THANKS.te
- [root@localhost tengine-2.2.0]# ./configure --prefix=/usr/myapp/tengine --with-http_concat_module && make && make install
接下来只要在nginx.conf 中配置concat on,最多合并20个文件,最后 nginx -s reload 重启一下
- location~ ^ /(images|javascript|js|css|flash|media|static)/ {
- root / usr;
- concat on;
- concat_max_files 20;
- concat_types text / css application / x - javascript;
- }
接下来再上传一个tips.css到/usr/css目录下,然后键入url:http://192.168.23.168/css/??top.css,tips.css ,,,终于大功告成啦。。。。
好了,本篇就说到这里,希望对你有帮助。。。
来源: http://www.cnblogs.com/huangxincheng/p/7469328.html