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";
   }
...

效果如下