在项目最开始,上传图片的时候,服务器先保存原图再使用ImageMagick生成上传图片缩略图,这种方法有很多缺点,例如生成的缩略图的大小是固定的,不能动态请求指定大小的缩略图。

虽然有非常多的图片云存储服务,例如 七牛、UpYun、Aliyun OSS 等,但是因为一些其他的考虑(例如:价格因素),我们最后还是选择本地存储。

通过调研,发现nginx可以动态请求缩略图。但是网上的教程都是针对Linux系统下的,几经周折终于在Windows系统下编译nginx并成功搭建nginx图片服务器。

点击下载进入nginx下载页,Windows系统可以直接点击nginx/Windows-a.b.c下载编译好的程序,解压之后即可使用,Linux系统需要点击nginx-a.b.c下载源码并编译后才能使用。

编译Nginx

ngx_http_image_filter_module模块是一个转换JPEG、GIF、PNG、WebP格式图片的过滤器,如果需要使用ngx_http_image_filter_module等非默认编译的模块,则需要重新编译nginx源码。

编译需求

在Microsoft Win32平台上构建nginx你需要:

  • 微软 Visual C 编译器。
  • MSYS
  • Perl,如果你想构建OpenSSL,让nginx支持SSL。例如 ActivePerl 或 Strawberry Perl
  • Mercurial 客户端。
  • PCREzlib 和 OpenSSL 库源码,注意这里是PCRE不是PCRE2
  • libgd ,编译ngx_http_image_filter_module模块依赖项。

编译

在开始构建之前确保PerlMercurialMSYS的bin目录添加到PATH环境变量中。

  • 从 Visual C 目录运行vcvarsall.bat脚本用以设置 Visual C 运行环境。以管理员身份运行命令行工具,运行vcvarsall.bat脚本(根据你的实际路径):

    "D:\Program Files\Microsoft Visual Studio 14.0\VC\vcvarsall.bat"
  • 如果需要编译ngx_http_image_filter_module模块则需要编译libgd,编译方法详见Building on Windows with Visual Studio 2015
  • 运行msys.bat ,本人使用的是MSYS2
  • hg.nginx.org库签出nginx源代码(这里会用到上面提到的Mercurial客户端):

    $ hg clone http://hg.nginx.org/nginx
  • 在下载的nginx目录中,创建一个用户构建的objs目录和用于存放第三方库源码的lib目录,解压zlibPCREOpenSSL库源码到lib目录

    $ mkdir objs
    $ mkdir objs/lib
    $ cd objs/lib
    $ tar -xzf ../../pcre-8.40.tar.gz
    $ tar -xzf ../../zlib-1.2.11.tar.gz
    $ tar -xzf ../../openssl-1.0.2k.tar.gz
  • 执行which perl命令,确保使用的Perl是上面下载安装的而不是MSYS自带的,执行which link命令,确保使用的link.exe是Visual自带的。将MSYS环境下的perl.exrelink.exre分别重命名为perl_UNUSED.exeink_UNUSED.exe 。可以使用下面的命令查看、修改环境变量。

    $ echo $PATH
    $ export PATH=/c/Perl/bin:$PATH
    $ export PATH="/d/Program Files/Microsoft Visual Studio 14.0/VC/bin":$PATH
  • 如果要编译ngx_http_image_filter_module模块则打开nginx源码目录下的auto/feature文件,将

    # -x Linux系统下检查文件是否有执行权限,Windows系统下不适用
    if [ -x $NGX_AUTOTEST ]; then
    • 修改为
    if [ YES ]; then
  • 如果要编译ngx_http_image_filter_module模块则打开nginx源码目录下的auto/lib/libgd/conf文件,在适当的位置添加下面几行代码

        ngx_feature="GD library"
        ngx_feature_name=
        ngx_feature_run=no
        ngx_feature_incs="#include <gd.h>"
        ngx_feature_path=
        ngx_feature_libs="-lgd"
        ngx_feature_test="gdImagePtr img = gdImageCreateFromGifPtr(1, NULL);"
        . auto/feature
        
    # 添加下面的代码片段
    if [ $ngx_found = no ]; then
    
        ngx_feature="GD library in custom path"
        # 指定libgd头文件位置
        ngx_feature_path="/e/thirdparty_source/libgd-2.2.4/src"
        # 指定libgd库文件位置和库文件
        ngx_feature_libs="-L/e/thirdparty_source/gdbuild -lgd"
        . auto/feature
        
    fi
  • 运行configure脚本:

    $ auto/configure --with-cc=cl --builddir=objs --prefix= \
    --conf-path=conf/nginx.conf --pid-path=logs/nginx.pid \
    --http-log-path=logs/access.log --error-log-path=logs/error.log \
    --sbin-path=nginx.exe --http-client-body-temp-path=temp/client_body_temp \
    --http-proxy-temp-path=temp/proxy_temp --http-fastcgi-temp-path=temp/fastcgi_temp \
    --with-cc-opt="-DFD_SETSIZE=1024 -Ie:/thirdparty_source/libgd-2.2.4/src" \
    --with-pcre=objs/lib/pcre-8.40 --with-zlib=objs/lib/zlib-1.2.11 \
    --with-openssl=objs/lib/openssl-1.1.0d --with-select_module --with-http_ssl_module \
    --with-http_image_filter_module --with-ld-opt="E:/thirdparty_source/gdbuild/libgd.lib"
  • 在Visual 2015命令行工具中执行nmake -f objs/Makefile命令完成编译,编译成功后生成nginx.exe文件。

如果编译openssl时出现 error A2070:invalid instruction operands错误,则可能是因为是因为openssl-1.1.0之前版本(使用汇编)编译时需要NASM ,最简单的方法是使用openssl-1.1.0以上版本重新配置编译。

Nginx的使用

可在命令行中通过命令操作nginx:

$ start nginx        # 运行nginx
$ nginx -s stop      # 停止nginx
$ nginx -s reload    # 重新加载配置文件(如修改配置文件后,可通过该命令重新加载)
$ nginx -s quit      # 退出nginx
$ nginx -v           # 查看nginx版本

更多帮助信息可以查看 nginx for WindowsBeginner’s Guide

配置图片服务器

配置图片服务器的步骤如下:

  • 在本地建了一个文件夹,例如:H:/www/imgs,里面放了几张测试图片。
  • nginx/html下创建一个名为imgs文件夹(实际访问的不是这个路径,经测试此步在Windows下非必要)

    mkdir $(nginx-dir)/html/imgs
  • 修改$(nginx-dir)/conf/nginx.conf在默认的server节点里再添加一个location节点并指定实际路径,修改后的配置文件部分内容如下:

    http {
        ...
        server {
            listen       80;
            server_name  localhost;
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
    
            location / {
                root   html;
                index  index.html index.htm;
            }
            
            # 设置图片目录
            location /imgs/ {
                root       H:/www;   # 路径“H:/www”下必须含有一个“imgs”目录
                autoindex  on;       # 如果为on,那么就发送请求地址对应的服务端路径下的文件列表给客户端
            }
            
            # 图片剪裁 crop
            # 按比例缩放 resize
            # 访问链接 http://t.cn/imgs_thumb/20170214152753.jpg?type=crop&width=100&height=100
            location ~* /imgs_thumb/(.+)$ {
                set $filename $1;
                
                if ($filename = "") {
                    break;    # 同return 404;
                }
            
                set $img_type  $arg_type;    
                set $img_w     $arg_width;
                set $img_h     $arg_height;
                
                if ($img_type = "") {
                    return 400; 
                }
                
                if ($img_w = "") {
                    return 400; 
                }
                
                if ($img_h = "") {
                    return 400; 
                }
                
                rewrite ^ /imgs_$img_type;
            }
            
            # 缩放图片的处理
            location /imgs_resize/ {
                alias  H:/www/imgs/$filename;
                image_filter resize $img_w $img_h;
            }
            
            # 剪裁图片的处理
            location /imgs_crop/ {
                alias  H:/www/imgs/$filename;
                image_filter crop $img_w $img_h;
            }
            
            # 设置视频目录
            location /videos {
                root       H:/www;
                autoindex  on;
            }
        }
    }
  • 修改完后需要重新启动nginx或重新加载配置文件即可。

推荐教程:
Nginx开发从入门到精通

参考教程:
Nginx开发从入门到精通
Module ngx_http_image_filter_module
Nginx图片剪裁模块探究
Building nginx on the Win32 platform with Visual C
Compile nginx with visual studio
nginx架构详解(50%)
Linux下nginx编译安装教程和编译参数详解
Nginx图片剪裁模块探究 http_image_filter_module
利用 Nginx 的 ngx_http_image_filter_module 做实时的图片缩略图

标签: Windows, nginx, 图片服务器, 编译Nginx

添加新评论