Nginx 目錄瀏覽基礎與進階

目錄

• 1、簡述
• 2、配置目錄瀏覽
• 3、進階版配置
  • 3.1 添加第三方模塊
  • 3.2 修改配置文件
  • 3.3 重啟測試
  • 3.4 自定義主題

1、簡述

Nginx作為一款優秀的web服務器，其默認不允許列出站點的整個目錄，如果需要配置，需要單獨打開此功能

此功能一般用於單獨開設虛擬主機供內網如下載文件等功能使用，其他情況下為了安全，一般不會開啟此功能

2、配置目錄瀏覽

server {
   listen       80;
   index index.html index.htm;
   server_name downloads.ssgeek.com;
   root /data/downloads;
   autoindex on;  # 開啟目錄瀏覽功能
   autoindex_localtime on;  # 顯示本地時間
   autoindex_format html;  # 輸入格式，可選項為html、xml、json、jsonp
   autoindex_exact_size off;  # 顯示精確字節大小還是顯示友好可讀的大小
   charset utf-8,gbk;  # 保證以中文命名的文件顯示不會亂碼
}

除上述配置之外，還可以利用basic_auth為目錄瀏覽功能，加上認證功能以增加一定的安全性

配置完成后重啟Nginx，效果如下

3、進階版配置

Nginx自帶的目錄瀏覽功能看起來並不是那么美觀，可以使用第三方模塊ngx-fancyindex插件來美化目錄瀏覽功能

3.1 添加第三方模塊

查看現有nginx版本及編譯參數

# /usr/local/nginx/sbin/nginx -V
nginx version: nginx/1.14.2
built by gcc 4.8.5 20150623 (Red Hat 4.8.5-39) (GCC) 
built with OpenSSL 1.0.2l  25 May 2017
TLS SNI support enabled
configure arguments: --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --without-http-cache --with-http_ssl_module --with-pcre=/usr/local/pcre-8.39 --with-zlib=/usr/local/zlib-1.2.11 --with-openssl=/usr/local/openssl-1.0.2l --sbin-path=/usr/local/nginx/sbin/nginx --conf-path=/usr/local/nginx/conf/nginx.conf --error-log-path=/usr/local/nginx/log/error.log --http-log-path=/usr/local/nginx/log/access.log --pid-path=/usr/local/nginx/run/nginx.pid

下載第三方模塊源碼並解壓

# wget -c https://github.com/aperezdc/ngx-fancyindex/archive/v0.5.1.tar.gz
# tar xf v0.5.1.tar.gz

在已經安裝的nginx下添加新的第三方模塊

# pwd
/root
# cd nginx-1.14.2/
# ./configure --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --without-http-cache --with-http_ssl_module --with-pcre=/usr/local/pcre-8.39 --with-zlib=/usr/local/zlib-1.2.11 --with-openssl=/usr/local/openssl-1.0.2l --sbin-path=/usr/local/nginx/sbin/nginx --conf-path=/usr/local/nginx/conf/nginx.conf --error-log-path=/usr/local/nginx/log/error.log --http-log-path=/usr/local/nginx/log/access.log --pid-path=/usr/local/nginx/run/nginx.pid --add-module=/root/ngx-fancyindex-0.5.1
# make # 只編譯不安裝
# /usr/local/nginx/sbin/nginx -s stop
# mv /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.bak
# cp objs/nginx /usr/local/nginx/sbin/
# chown www:www /usr/local/nginx/sbin/nginx

3.2 修改配置文件

配置文件的詳細配置參考如下

server {
   listen       80;
   index index.html index.htm;
   server_name downloads.ssgeek.com;
   charset utf-8,gbk;
   location / {
       root /data/downloads;
       # 防止瀏覽器預覽打開
       if ($request_filename ~* ^.*?\.(txt|doc|pdf|rar|gz|zip|docx|exe|xlsx|ppt|pptx)$){
           add_header Content-Disposition attachment;
       }
       fancyindex on;  # 開啟第三方模塊的目錄瀏覽
    #    fancyindex_default_sort name;  # 排序規則，默認name，可選項name、size、date、name_desc、size_des、date_desc
    #    fancyindex_directories_first on; # 是否將目錄分組在一起並在所有常規文件之前對它們進行排序，默認啟用
    #    fancyindex_css_href "";  # 插入指向CSS樣式表的鏈接
       fancyindex_exact_size off;  # 顯示精確字節大小還是顯示友好可讀的大小
       fancyindex_name_length 500;  # 定義最大文件名長度限制（以字節為單位）
    #    fancyindex_footer "";  # 定義在目錄列表的底部插入哪個文件
    #    fancyindex_header "";  # 定義在目錄列表的頂部插入哪個文件
    #    fancyindex_show_path on;  # 在標題之后是否輸出路徑和結束</ h1>標記，默認啟用
    #    fancyindex_show_dotfiles on;  # 是否列出以點開頭的文件，默認關閉
    #    fancyindex_ignore "";  # 指定不顯示的文件名列表
    #    fancyindex_hide_symlinks off;  # 是否隱藏符號鏈接，默認關閉
    #    fancyindex_hide_parent_dir on;  # 是否隱藏父目錄，默認關閉
       fancyindex_localtime on;  # 時間顯示為本地時間，默認關閉，顯示為格林尼治標准時間
       fancyindex_time_format "%Y-%b-%d %H:%M";  # 顯示的時間格式，默認為%Y-%b-%d %H:%M
   }
}

這里我的配置如下

   location / {
       root /data/downloads;
       if ($request_filename ~* ^.*?\.(txt|doc|pdf|rar|gz|zip|docx|exe|xlsx|ppt|pptx)$){
           add_header Content-Disposition attachment;
       }
       fancyindex on;
       fancyindex_exact_size off;
       fancyindex_name_length 500;
       fancyindex_show_dotfiles on;
       fancyindex_localtime on;
       fancyindex_time_format "%Y-%m-%d %H:%M:%S";
   }

3.3 重啟測試

修改完配置文件后，重啟進行測試，效果如下

3.4 自定義主題

如果覺得上面的還不是太好看，項目中也提供了更多主題供配置，主題的地址如下

主題一：使用自定義的頁眉和頁腳

主題二：使用自定義頁眉和頁腳，頁眉包含搜索字段，可使用JavaScript按文件名過濾

主題三：使用Material Design元素的響應主題

主題四：基於Bootstrap 4和FontAwesome的簡單扁平主題

四個主題的配置和效果分別如下

• 主題一

下載主題相關樣式代碼，目錄結構如下

# tree -L 1 /data/downloads/fancyindex
/data/downloads/fancyindex
├── css
├── fonts
├── footer.html
├── header.html
├── icons
├── images
└── js

配置文件

...
   location / {
       /data/downloads;
       if ($request_filename ~* ^.*?\.(txt|doc|pdf|rar|gz|zip|docx|exe|xlsx|ppt|pptx)$){
           add_header Content-Disposition attachment;
       }
       fancyindex on;
       fancyindex_exact_size off;
       fancyindex_name_length 500;
       fancyindex_show_dotfiles on;
       fancyindex_ignore "fancyindex";
       fancyindex_header "/fancyindex/header.html";
       fancyindex_footer "/fancyindex/footer.html";
       fancyindex_localtime on;
       fancyindex_time_format "%Y-%m-%d %H:%M:%S";
   }
...

效果如下

• 主題二

下載主題相關樣式代碼，目錄結構如下

# # tree -L 1 /data/downloads/Nginx-Fancyindex-Theme-dark
/data/downloads/Nginx-Fancyindex-Theme-dark
├── addNginxFancyIndexForm.js
├── footer.html
├── header.html
├── jquery.min.js
├── showdown.min.js
└── styles.css

配置文件

...
   location / {
       root /data/downloads;
       if ($request_filename ~* ^.*?\.(txt|doc|pdf|rar|gz|zip|docx|exe|xlsx|ppt|pptx)$){
           add_header Content-Disposition attachment;
       }
       fancyindex on;
       fancyindex_exact_size off;
       fancyindex_name_length 500;
       fancyindex_show_dotfiles on;
       fancyindex_ignore "Nginx-Fancyindex-Theme-dark";
       fancyindex_header "/Nginx-Fancyindex-Theme-dark/header.html";
       fancyindex_footer "/Nginx-Fancyindex-Theme-dark/footer.html";
       fancyindex_localtime on;
       fancyindex_time_format "%Y-%m-%d %H:%M:%S";
   }
...

效果如下

• 主題三

下載主題相關樣式代碼，目錄結構如下

# tree -L 1 /data/downloads/fancyindex
/data/downloads/fancyindex
├── clipboard.min.js
├── dialog-polyfill.css
├── dialog-polyfill.js
├── fancyindex.css
├── fancyindex.js
├── font
├── footer.html
├── header.html
├── images
├── material-icons.css
├── mdl
├── README.md
└── roboto.css

配置文件同主題一

...
   location / {
       root /data/downloads;
       if ($request_filename ~* ^.*?\.(txt|doc|pdf|rar|gz|zip|docx|exe|xlsx|ppt|pptx)$){
           add_header Content-Disposition attachment;
       }
       fancyindex on;
       fancyindex_exact_size off;
       fancyindex_name_length 500;
       fancyindex_show_dotfiles on;
       fancyindex_ignore "fancyindex";
       fancyindex_header "/fancyindex/header.html";
       fancyindex_footer "/fancyindex/footer.html";
       fancyindex_localtime on;
       fancyindex_time_format "%Y-%m-%d %H:%M:%S";
   }
...

效果如下

• 主題四

下載主題相關樣式代碼，目錄結構如下

# tree -L 1 /data/downloads/theme
/data/downloads/theme
├── footer.html
├── header.html
├── js
├── less
├── LICENSE
├── Makefile
├── README.md
└── theme.less

配置文件

...
   location / {
       root /data/downloads;
       if ($request_filename ~* ^.*?\.(txt|doc|pdf|rar|gz|zip|docx|exe|xlsx|ppt|pptx)$){
           add_header Content-Disposition attachment;
       }
       fancyindex on;
       fancyindex_exact_size off;
       fancyindex_name_length 500;
       fancyindex_show_dotfiles on;
       fancyindex_ignore "theme";
       fancyindex_header "/theme/header.html";
       fancyindex_footer "/theme/footer.html";
       fancyindex_localtime on;
       fancyindex_time_format "%Y-%m-%d %H:%M:%S";
   }
...

效果如下