Windows下搭建Nginx图片服务器

在项目最开始，上传图片的时候，服务器先保存原图再使用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 客户端。
• PCRE 、zlib 和 OpenSSL 库源码，注意这里是PCRE不是PCRE2 。
• libgd ，编译ngx_http_image_filter_module模块依赖项。

​

编译

在开始构建之前确保Perl、Mercurial和MSYS的bin目录添加到PATH环境变量中。

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

  "D:Program FilesMicrosoft Visual Studio 14.0VCvcvarsall.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目录，解压zlib 、PCRE和OpenSSL库源码到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.exre和link.exre分别重命名为perl_UNUSED.exe和ink_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 Windows 和 Beginner’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 做实时的图片缩略图