扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
用淘宝改良的Nginx(Tengine)提供web服务今天在本博客上顺利把Nginx换成了Tengine;并启用了动态加载模块 mod_concat,对本博客使用的知更鸟主题各个页面head模板中大量调用的多个CSS,JSS请求进行了合并,即客户端浏览器只需通过一次http请求,即可从服务器返回所需要的多个CSS,JS文件;下面是配置步骤:
十年的靖西网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都全网营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整靖西建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联建站从事“靖西网站设计”,“靖西网站推广”以来,每个客户项目都认真落实执行。编译安装Tengine
1,停止web服务,备份原来的Nginx目录(我是lnmp一键安装的,所以直接备份/usr/local/nginx目录即可)
service nginx stop cd /usr/local mv nginx nginx.old 2,下载tengine源码包,编译安装tengine(标准安装,指定安装路径和原nginx一致,编译启用 TLS SNI support
cd /usr/local/src wget http://tengine.taobao.org/download/tengine-2.1.0.tar.gz tar zxvf tengine-2.1.0.tar.gz cd tengine-2.1.0 ./configure --prefix=/usr/local/nginx --with-pcre=/usr/local/src/pcre-8.37 make make install 3,拷贝原Nginx的配置文件,启动web服务( 官方说Tengine完全100%兼容nginx的配置,而且路径一样可借用原nginx的启动控制脚本来启动和停止Tengine )
cd /usr/local cp nginx.old/conf/nginx.conf nginx/conf/ #拷贝nginx主配置文件 cp -Rp nginx.old/conf/vhost nginx/conf/ #拷贝vhost虚拟主机配置文件目录 /usr/local/nginx/sbin/nginx -t #检测配置文件正确性,确定木有语法错误 service nginx start #启动Tengine Tengine的安装完成,测试网站访问,虚拟站点,SSL访问均正常,感觉不出与nginx的差别;只能从404错误回显看到是采用的Tengine引擎,如下:
编译启用动态加载模块: mod_concat
Tengine动态加载模块的编译安装方法,参考官方文档http://tengine.taobao.org/document_cn/dso_cn.html
Tengine所有的HTTP功能模块,都可以在configure的时候,通过--with-http_xxxx_module=shared的形式编译为动态加载模块,如果不指定=shared则会被静态编译到Tengine的核心中;安装动态加载模块用make dso_install命令;
cd /usr/local/src/tengine-2.1.0 ./configure --prefix=/usr/local/nginx --with-pcre=/usr/local/src/pcre-8.37 --with-http_concat_module=shared #编译http_concat模块为动态加载 make make dso_install
编译安装完成后,ngx_http_concat_module.so文件会被安装到Tenginx安装目录下的modules目录内;
编辑nginx.conf配置文件,添加如下红色代码,让Tengine启动时动态加载刚刚编译的ngx_http_concat_module.so
user www www; worker_processes auto; #Tengine独有特性,支持自动按CPU数量绑定worker进程 dso { load ngx_http_concat_module.so; #加载动态加载模块 }
重启Tengine,查看已加载模块
service nginx restart /usr/local/nginx/sbin/nginx -l #列出Tenginx所有支持的功能模块(包括静态与动态) ...... output_buffers ngx_http_range_body_filter_module: ngx_http_not_modified_filter_module: ngx_http_concat_module (shared): concat concat_max_files concat_unique concat_types concat_delimiter concat_ignore_file_error
合并网页中的CSS,JS
先对比看下我博客的同一个页面在合并前后的网页源代码对比(点击放大)
页面中的多次js和css请求,通过??符合,以逗号分隔,合并成了一个http连接如下:
http://www.moonfly.net/wp-content/themes/HotNewspro/js/??jquery.min.js,custom.js,superfish.js,muscript.js
前面Tenine动态加载了ngx_http_concat_module就是为了处理这样的请求,将多个JS或CSS文件的内容通过一个http响应报文中返回给浏览器;以减少浏览器连接服务器的次数;
具体配置:
从上面的网页源代码中,我们看到该主题所需要的所有JS和CSS文件都存放在 wp-content/themes/HotNewspro 这个路径下,所以我们需要修改网站的nginx配置文件中,使Tengine针对这个目录启用 concat函数;在原有网站配置文件的server段中添加如下内容:
location /wp-content/themes/HotNewspro/ { concat on; #启用concat函数 concat_unique off; #允许返回不同类型的文件内容(js,css同时合并) concat_delimiter "n"; #自动在返回每个文件内容的末尾添加换行符 concat_ignore_file_error off; #不要忽略所合并的文件不存在等错误 } 重新reload nginx后,修改网站的主题模板代码,将模板中在同一位置输出多行JS和CSS的地方全部改成用??连接,逗号分隔每个请求的文件名的形式;我采用的知更鸟的博客主题,主要修改了6个页面的头部模板文件( 友情提示,修改前先备份)
header_h.php header_img.php header_img_s.php header.php header_video.php header_video_s.php
原模板内容:
....... 修改为:
.......
nginx1.6下安装nginx_concat_module报400错误第一次安装都很顺利,第二次安装就出现访问合并链接出现400错误。
瞬间就跪了,果断google之,居然有前人也碰到这样的问题,有救了。
由于Nginx在新版本中,使用了标准的 MIME-Type:application/javascript。而在nginx_concat_module模块目前版本的代码中,写的是 application/x-javascript 的类型。
也就是模块认不到js文件了。。。
[root@tools-ops01-jz src]# grep javascript nginx_concat_module/ngx_http_concat_module.c ngx_string("application/x-javascript"),
因此,我们最好在向nginx添加该模块之前,修改nginx_concat_module的源代码文件ngx_http_concat_module.c,将application/x-javascript更改为application/javascript,然后再编译安装即可!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流