Nginx之支持webp图片

1.　　说明

　　　　我公司采用tengine+fastdfs的方式搭建的图片服务器，因为客户上传了一些webp格式的图片，访问该图片的时候返回415（Unsupported Media Type），经过查询nginx官网发现，nginx支持webp，但是要求nginx版本1.11.6以上。我公司的nginx是1.6.2，所以需要升级nginx版本和libgb图片库

2.　　运行环境

　　　　tengine2.1.1(nginx1.6.2)    ----->  tengine2.3.2(nginx1.17.3)

　　　　gd2.0  ----> libgd-2.3.2

3.　　升级过程

　　　　1.　　升级gd库

　　　　　　　　1.　　卸载默认gd库

　　　　　　　　　　　　yum remove -y gd-2.0.35-11.el6.x86_64 gd-devel-2.0.35-11.el6.x86_64

　　　　　　　　2.　　安装依赖包

　　　　　　　　　　　　yum install -y gcc g++ gcc-c++ zlib zlib-devel openssl openssl-devel pcre pcre-devel

　　　　　　　　　　　　yum install -y libjpeg-turbo-devel libpng-devel freetype-devel libtiff-devel libXpm-devel libwebp-devel fontconfig-devel　　　　　　　　　　　　　　　　　　　　

　　　　　　　　3.　　下载安装libimagequant

　　　　　　　　　　　　tar -zxvf libimagequant-2.12.2.tar.gz

　　　　　　　　　　　　cd libimagequant-2.12.2

　　　　　　　　　　　　./configure --prefix=/usr

　　　　　　　　　　　　make libimagequant.so

　　　　　　　　　　　　make install

　　　　　　　　4.　　下载安装libgd

　　　　　　　　　　　　tar -zxvf libgd-2.3.2.tar.gz

　　　　　　　　　　　　cd libgd-2.3.2

　　　　　　　　　　　　./configure --with-liq=/root/libimagequant-2.12.2

　　　　　　　　　　　　make

　　　　　　　　　　　　make install

　　　　　　　　5.　　下载安装libwebp

　　　　　　　　　　　　tar -zxvf libwebp-1.2.2.tar.gz

　　　　　　　　　　　　cd libwebp-1.2.2

　　　　　　　　　　　　yum install -y gcc make autoconf automake libtool

　　　　　　　　　　　　./autogen.sh

　　　　　　　　　　　　./configure

　　　　　　　　　　　　make

　　　　　　　　　　　　make install　　　　

　　　　　　　　6.　　建立软链接

　　　　　　　　　　　　ln -s /usr/local/lib/libgd.so.3.0.10 /usr/lib64/libgd.so

　　　　　　　　　　　　ln -s /usr/local/lib/libgd.so.3.0.10 /usr/lib64/libgd.so.3　　　　　

　　　　2.　　升级nginx版本

　　　　　　　　1.　　官网下载指定版本的压缩包，并上传至服务器

　　　　　　　　2.　　解压

　　　　　　　　　　　　tar -zxvf tengine-2.3.2.tar.gz

　　　　　　　　3.　　编译tengine

　　　　　　　　　　　　./configure --prefix=/usr/local/nginx --user=www --group=www --with-poll_module --with-pcre --with-http_realip_module --with-http_dav_module --with-http_gzip_static_module --with-http_degradation_module --with-http_addition_module --with-http_xslt_module --with-http_image_filter_module  --with-http_sub_module --with-http_flv_module --with-http_slice_module --with-http_mp4_module  --with-http_random_index_module --with-http_secure_link_module  --add-module=./modules/ngx_http_upstream_check_module/  --with-http_lua_module --add-dynamic-module=../lua-nginx-module-0.10.13 --add-module=/usr/local/src/fastdfs-nginx-module/src

　　　　　　　　4.　　安装make(切记不能make install)

　　　　　　　　　　　　make

　　　　　　　　　　　　报错：modules/ngx_http_lua_module/src/ngx_http_lua_common.h:20:20: 错误：luajit.h：没有那个文件或目录

　　　　　　　　　　　　解决方法：

　　　　　　　　　　　　　　提前把lua编译安装好，然后/etc/profile中，添加内容：　　　　　　　　　　　　　　

　　　　　　　　　　　　　　export LUAJIT_LIB=/usr/local/lib

　　　　　　　　　　　　　　export LUAJIT_INC=/usr/local/include/luajit-2.0

　　　　　　　　　　　　　　source /etc/profile　　　　　　　　　　　　　　

　　　　　　　　5.　　备份配置

　　　　　　　　　　　　mv /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.old

　　　　　　　　6.　　复制新的配置

　　　　　　　　　　　　cp -r objs/nginx /usr/local/nginx/sbin/nginx

　　　　　　　　7.　　检查配置　　　　　　　　　　　　

检查配置
	/usr/local/nginx/sbin/nginx -t
	报错1：dso，执行下面的操作：
	该操作忽略
	根据错误屏蔽 一些nginx配置
	#dso {
#     load ngx_http_fastcgi_module.so;
#     load ngx_http_limit_req_module.so;
#     load ngx_http_limit_conn_module.so;
#     load ngx_http_memcached_module.so;
#     load ngx_http_rewrite_module.so;
     #load ngx_http_access_module.so;
#     load ngx_http_lua_module.so;
#}
   
    报错2: 找不到libluajit-5.1.so.2
	ldd /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
	echo "/usr/local/lib" >>/etc/ld.so.conf
	echo "/usr/local/luajit/lib" >>/etc/ld.so.conf
	ldconfig 

　　　　　　　　8. 　　平滑升级tengine

　　　　　　　　　　　　kill -USR2 `cat /var/run/nginx.pid`

　　　　　　　　　　　　ps axw -o pid,ppid,user,%cpu,vsz,wchan,command | egrep '(nginx|PID)'

　　　　　　　　　　　　可以看到有两个nginx的master进程

　　　　　　　　9.　　优雅关闭tengine

　　　　　　　　　　　　kill -QUIT `cat /var/run/nginx.pid.oldbin`

　　　　　　　　10.　　这一步可以忽略掉。

　　　　　　　　　　　　启动tengine

　　　　　　　　　　　　/usr/local/nginx/sbin/nginx

　　　　　　　　11.　　检查tengine版本号

　　　　　　　　　　　　/usr/local/nginx/sbin/nginx -v

　　　　　　　　　　　　Tengine version: Tengine/2.3.2 (nginx/1.8.1) 显示这个就说明升级成功了　　

　　　　3.　　修改fdfs_storage的Nginx文件　　　　　　　　

        location ~/f01/M00/(.*)/(.*)/(\d+)_(.*)\.(jpg|png|ttf|PNG|JPG|TTF|jpeg|gif|webp|WEBP) {
                        alias /fastdfs_data/data/;
                        ngx_fastdfs_module;
                        set $w $3;
                        set $h $3;
                  rewrite /f01/M00/(.*)/(.*)/(\d+)_(.*)\.(jpg|png|ttf|JPG|PNG|TTF|jpeg|gif|webp|WEBP) /f01/M00/$1/$2/$4.$5 break;
                  image_filter resize $w $h;
                  image_filter_buffer 2M;
                }　　

　　　　4.　　使用浏览器访问webp图片，可以正常访问，就OK了。