Windows下搭建Nginx圖片服務器

在項目最開始，上傳圖片的時候，服務器先保存原圖再使用ImageMagick生成上傳圖片縮略圖，這種方法有不少缺點，例如生成的縮略圖的大小是固定的，不能動態請求指定大小的縮略圖。html

雖然有很是多的圖片雲存儲服務，例如七牛、UpYun、Aliyun OSS 等，可是由於一些其餘的考慮（例如：價格因素），咱們最後仍是選擇本地存儲。nginx

經過調研，發現nginx能夠動態請求縮略圖。可是網上的教程都是針對Linux系統下的，幾經周折終於在Windows系統下編譯nginx併成功搭建nginx圖片服務器。git

點擊下載進入nginx下載頁，Windows系統能夠直接點擊nginx/Windows-a.b.c下載編譯好的程序，解壓以後便可使用，Linux系統須要點擊nginx-a.b.c下載源碼並編譯後才能使用。github

編譯Nginx

ngx_http_image_filter_module模塊是一個轉換JPEG、GIF、PNG、WebP格式圖片的過濾器，若是須要使用ngx_http_image_filter_module等非默認編譯的模塊，則須要從新編譯nginx源碼。windows

編譯需求

在Microsoft Win32平臺上構建nginx你須要：ruby

微軟 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 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客戶端）：ide
```
$ 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 作實時的圖片縮略圖