nginx-http-concat开源模块

最新推荐文章于 2024-06-26 09:36:15 发布

原创最新推荐文章于 2024-06-26 09:36:15 发布 · 537 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#linux #nginx

Linux 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何在Nginx中安装和配置concat模块，以实现静态资源的合并，减少HTTP请求次数，提高网站加载速度。文章详细说明了从备份原Nginx执行文件到测试合并请求的全过程。

该模块类似于apache中的mod_concat模块，用于合并多个文件在一个响应报文中。

请求参数需要用两个问号（'??'）例如：

http://example.com/??style1.css,style2.css,foo/style3.css

参数中某位置只包含一个‘?’，则'?'后表示文件的版本，例如：

http://example.com/??style1.css,style2.css,foo/style3.css?v=102234

location /static/css/ {
    concat on;
    concat_max_files 20;
}

location /static/js/ {
    concat on;
    concat_max_files 30;
}

安装过程：

1、查看nginx版本和nginx上次编译安装参数

#nginx -V
nginx version: nginx/1.16.1
built by gcc 4.4.7 20120313 (Red Hat 4.4.7-23) (GCC) 
built with OpenSSL 1.1.1d  10 Sep 2019
TLS SNI support enabled
configure arguments: --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module

2、备份原 Nginx 执行文件

# cd /usr/local/nginx/sbin/nginx
# cp nginx nginx.bak

3、在服务器上寻找该版本nginx的安装包，没有就去下载对应版本的的nginx的源代码，并解压缩

wget http://nginx.org/download/nginx-1.16.1.tar.gz
tar xzvf nginx-1.16.1.tar.gz

4、下载nginx-http-concat 源码，上传至服务器/root/目录下

https://github.com/alibaba/nginx-http-concat

5、安装规则：如果是第三方模块，则指定目录；如果是内置模块，则指定模块名。

./configure --prefix=/你的安装目录 --add-module=/第三方模块目录

因此进入nginx-1.16.1目录，复制第一步获得的configure aguments，然后在最后没加上 --add-module=/root/nginx-http-concat，调用./configure来配置

./configure --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module  --add-module=/root/nginx-http-concat

6、配置成功之后就调用make

make

注意不要make install，不然会直接覆盖掉

7、make完之后在objs目录下面找到nginx文件，停止nginx服务，将编译好的nginx复制到原始nginx的sbin目录

# /etc/init.d/nginx stop
# cp /objs/nginx /usr/local/nginx/sbin/nginx

8、检测和启动

nginx -t (检测配置文件)
nginx -s reload (平滑重启)

查看当前nginx模块情况， 发现新增的参数已经添加上了
# nginx -V
nginx version: nginx/1.16.1
built by gcc 4.4.7 20120313 (Red Hat 4.4.7-23) (GCC) 
built with OpenSSL 1.1.1d  10 Sep 2019
TLS SNI support enabled
configure arguments: --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --add-module=/root/nginx-http-concat

9、修改vhost

location /static {
            concat on;
            concat_types text/css application/javascript;
            concat_unique off;
            concat_max_files 10; //最大合并文件数量是10个
            concat_delimiter '\n';
            expires 7d;
            userid off;
        }

10、测试将原先2个请求合并为1个请求

http://example.com/static/??style1.css,style2.css,foo/style3.css?v=102234

访问时发现几个js都能成功请求，至此安装完成

11、具体应用

js：<script src="??a.js,b.css,home/c.js?v=123" />

以上意思是将a.js，b.css和home/c.js这三个请求合并为一个，并且版本号为123.

css:<link rel="stylesheet" href="??a.css,b.css,home/c.css?v=234" />

这边也是一个道理,只不过只包含css.

12、问题400 Bad Request错误

由于Nginx在新版本中，使用了标准的 MIME-Type：application/javascript。而在nginx_concat_module模块目前版本的代码中，写的是 application/x-javascript 的类型

查看nginx使用的 MIME-Type，可以去vim /usr/local/nginx/conf/mime.types，从中可以知道

text/css css;

application/javascript js;

而然而nginx-http-concat模块中，第33行中

vim /nginx-http-concat/ngx_http_concat_module.c

ngx_string("application/x-javascript"),

两者不一致会导致400 Bad Request错误

解决办法一：

修改ngx_http_concat_module.c，去掉x-，修改为

ngx_string("application/javascript"),

解决办法二：

在vhost中写入

concat_types text/css application/javascript;

然后重启服务即可

减少web请求在一定程度上能减少web服务器的压力，使用nginx concat模块便可以实现这个功能，但目前nginx-http-concat 和proxy_pass 还无法同时使用，如果想减少web请求，又不想让前端设计师来插手的话，大家可以参考下google出的pagespeed模块