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";
}
...
效果如下
