公司的前端开发工程师今天找我,让我给他搞下淘宝的一个开源项目 nginx_concat_module 模块,将该模块添加到线上的nginx上去。
简介
nginx_concat_module 是淘宝研发的针对 nginx 的文件合并模块,主要用于合并前端代码减少 http 请求数。如果你的应用环境中部署了 nginx,那么可以考虑尝试此模块减少请求数。
部署:
1、准备工具
[[email protected] ~]# yum install gcc gcc-c++ make wget subversion -y [[email protected] ~]# cd /usr/local/src [[email protected] src]# wget http://down1.chinaunix.net/distfiles/openssl-0.9.8q.tar.gz [[email protected] src]# tar zxf openssl-0.9.8q.tar.gz [[email protected] src]# wget http://nchc.dl.sourceforge.net/project/pcre/pcre/8.32/pcre-8.32.tar.gz [[email protected] src]# tar zxf pcre-8.32.tar.gz [[email protected] src]#
2、从淘宝的svn取 nginx_concat_module 的源代码
[[email protected] src]# svn co http://code.taobao.org/svn/nginx_concat_module/trunk/ nginx_concat_module
这里需要注意:
由于Nginx在新版本中,使用了标准的 MIME-Type:application/javascript。而在nginx_concat_module模块目前版本的代码中,写的是 application/x-javascript 的类型。
[[email protected] src]# grep javascript nginx_concat_module/ngx_http_concat_module.c ngx_string("application/x-javascript"),
这样子就造成了,你安装该模块之后,对于js文件依旧不能合并,并且会报如下的400错误。
因此,我们最好在向nginx添加该模块之前,修改nginx_concat_module的源代码文件ngx_http_concat_module.c,将application/x-javascript更改为application/javascript,然后再编译安装即可!
修改后的效果如下:
[[email protected] src]# grep javascript nginx_concat_module/ngx_http_concat_module.c ngx_string("application/javascript"),
3、安装部署
[[email protected] src]# wget http://nginx.org/download/nginx-1.6.0.tar.gz [[email protected] src]# tar zxf nginx-1.6.0.tar.gz [[email protected] src]# useradd nginx -s /sbin/nologin [[email protected] src]# cd nginx-1.6.0 [[email protected] nginx-1.6.0]# ./configure --user=nginx --group=nginx --prefix=/usr/local/nginx-1.6.0 --with-http_ssl_module --with-openssl=/usr/local/src/openssl-0.9.8q --with-pcre=/usr/local/src/pcre-8.32 --add-module=/usr/local/src/nginx-concat-master [[email protected] nginx-1.6.0]# make [[email protected] nginx-1.6.0]# make install [[email protected] nginx-1.6.0]# ln -s /usr/local/nginx-1.6.0 /usr/local/nginx [[email protected] nginx-1.6.0]# /usr/local/nginx -s reload
4、配置nginx_concat_module模块参数,使其生效
nginx_concat_module模块添加进nginx之后,我们需要对其进行配置才能够正常使用。配置的参数主要有如下几个:
concat on; # nginx_concat_module主开关 concat_max_files 10; # 最大合并文件数 concat_unique on; # 只允许同类型文件合并 concat_types text/html; # 允许合并的文件类型,多个以逗号分隔。如:application/x-javascript, text/css
在使用中,如果在location 标签下配置就表示对当前的location生效,如果在server下就表示对server标签下的内容生效。需要注意的是,它可能会和你配置的rewrite规则干扰,因此请注意使用范围。
5、使用
[[email protected] nginx-1.6.0]# curl http://localhost/b.js bbbbbbbbbbbbbbbbbbbbbbbbbbb [[email protected] nginx-1.6.0]# curl http://localhost/a.js aaaaaaaaaaaaaaaaaaaaaaaaaaa [[email protected] nginx-1.6.0]# curl http://localhost/??a.js,b.js aaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbb
下面附上一些该模块相关的资料:
淘宝SVN关于该项目的信息:
http://code.taobao.org/p/nginx_concat_module/src/
github关系该项目的信息:
https://github.com/alibaba/nginx-http-concat/issues?q=is%3Aissue+is%3A403