Nginx 美化目录展示

Nginx 的 fancyindex 是一个第三方模块, 用于美化 Nginx 默认的目录索引页面;
默认的 Nginx 目录索引页面样式简陋, 而 fancyindex 模块提供了更美观的布局/文件图标/排序功能/面包屑导航等特性.

nginx-rtmp-module 这个模块目前各大发行版都放置在 nginx-extras 包之中, 这里以 debian 服务器为主:

1
2
3
4
5
6
7
8
9
# 安装 Nginx 及其第三方扩展
sudo apt install nginx nginx-extras

# 具体确定是否存在 nginx-rtmp-module 模块可以输入以下指令确实是否有输出
ls -l /usr/share/nginx/modules/ | grep ngx_http_fancyindex_module

# 这里最好删除掉默认 nginx 的 80 监听, 不知道为什么配置好 fancyindex 会出现报错
sudo rm /etc/nginx/sites-enabled/default
 sudo rm /etc/nginx/sites-available/default

如果安装之后默认就已经启用对应扩展, 在 Nginx 的 server 或 location 块中配置 fancyindex 相关指令, 核心指令如下:

指令 作用 默认值
fancyindex on; 启用 fancyindex 模块 off
fancyindex_exact_size off; 以人性化单位显示文件大小（如1.2MB），on为字节数 on
fancyindex_localtime on; 显示本地时间，off为UTC时间 off
fancyindex_name_length 255; 文件名最大显示长度 50
fancyindex_header "header.html"; 自定义头部文件路径 无
fancyindex_footer "footer.html"; 自定义底部文件路径 无
fancyindex_ignore "^\..+$"; 忽略指定文件/目录（分号分隔） 无
fancyindex_show_path on; 显示面包屑导航（路径） on
fancyindex_sort modified_desc; (比较新版本才新增)文件排序规则：name_asc/desc（名称）、size_asc/desc（大小）、modified_asc/desc（修改时间） modified_desc

这里简单处理生成个目录用于确认展示情况:

1
2
3
4
sudo mkdir -p /data/fancyindex/html # 创建主要的 html 目录

# 注意: 这个目录归属要划分到 nginx 的启用账户
sudo chown -R www-data:www-data /data/fancyindex

那么现在就可以编写具体的 nginx 启动配置:

1
2
# 创建 files.conf 用于管理文件展示
sudo vim /etc/nginx/conf.d/files.conf

/etc/nginx/conf.d/files.conf 的内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
server {
    listen 8089; # 具体按照自身需求确认采用 http 还是 https, 这里为了避免和默认监听冲突采用 8090 端口
    server_name _;  # 替换为你的域名|IP
    root /data/fancyindex/html;  # 目录索引的根路径
    charset utf-8,gbk;  # 解决中文乱码

    location / {
        fancyindex on;  # 启用fancyindex
        fancyindex_exact_size off;  # 人性化文件大小
        fancyindex_localtime on;  # 本地时间
        fancyindex_name_length 255;  # 显示完整文件名
        # 忽略 .log 结尾|.tmp 结尾 | .svn 目录 | .git 目录 | 隐藏文件（以.开头）| test 目录
        fancyindex_ignore "\.log$|\.tmp$|^\.svn$|^\.git$|^\..+$|^test$";
    }
}

重新启动服务来测试:

1
2
3
4
5
6
# 这里创建个 .hello 文件和 hello.txt 测试下两者展示情况
sudo -u www-data touch /data/fancyindex/html/.hello
sudo -u www-data touch /data/fancyindex/html/hello.txt

# 重启服务
sudo systemctl restart nginx

fancyindex_ignore 仅在目录索引页面中隐藏指定的文件|目录而不会禁止用户直接访问这些资源,需配合 location+deny 来禁止访问:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
# 改进禁止访问
server {
    listen 8089; # 具体按照自身需求确认采用 http 还是 https, 这里为了避免和默认监听冲突采用 8089 端口
    server_name _;  # 替换为你的域名|IP
    root /data/fancyindex/html;  # 目录索引的根路径
    charset utf-8,gbk;  # 解决中文乱码

    location / {
        fancyindex on;  # 启用fancyindex
        fancyindex_exact_size off;  # 人性化文件大小
        fancyindex_localtime on;  # 本地时间
        fancyindex_name_length 255;  # 显示完整文件名
        # 忽略 .log 结尾|.tmp 结尾 | .svn 目录 | .git 目录 | 隐藏文件（以.开头）| test 目录
        fancyindex_ignore "\.log$|\.tmp$|^\.svn$|^\.git$|^\..+$|^test$";
    }
    
    # 规则1：禁止访问所有.log/.tmp后缀的文件（任意目录下）
    location ~* \.(log|tmp)$ {
        deny all;
        return 404; # 伪装成资源不存在，比403更安全
    }

    # 规则2：禁止访问根目录下的.test/.*隐藏目录/文件（任意目录下）
    location ~* /(\..+|test) {
        deny all;
        return 404;
    }
    
    # 个别隐藏文件需要允许访问(如/favicon.ico), 可在禁止规则前添加允许规则   
    location = /favicon.ico {
        allow all;
        try_files $uri =404;
    }
}

如果仅展示 hello.txt 就代表成功, 但是问题也到来: 页面还是不好看, 怎么提升美化效果?

这里推荐美化主题如下:

直接先拉取代码复制到对应目录:

1
2
3
4
5
6
# 拉取源代码
cd /tmp && git clone https://github.com/Naereen/Nginx-Fancyindex-Theme.git

# 复制移动到之前配置的目录
sudo cp -r Nginx-Fancyindex-Theme/Nginx-Fancyindex /data/fancyindex/html/Nginx-Fancyindex
sudo chown -R www-data:www-data /data/fancyindex/html/Nginx-Fancyindex

最后就是更新修改配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
# 美化的具体配置
server {
    listen 8089; # 具体按照自身需求确认采用 http 还是 https, 这里为了避免和默认监听冲突采用 8089 端口
    server_name _;  # 替换为你的域名|IP
    root /data/fancyindex/html;  # 目录索引的根路径
    charset utf-8,gbk;  # 解决中文乱码

    # 注意这里的 / 改为 ^~ / 
    location ^~ / {
        fancyindex on;  # 启用fancyindex
        fancyindex_exact_size off;  # 人性化文件大小
        fancyindex_localtime on;  # 本地时间
        fancyindex_name_length 255;  # 显示完整文件名
        # 忽略 .log 结尾|.tmp 结尾 | .svn 目录 | .git 目录 | 隐藏文件（以.开头）| test 目录
        fancyindex_ignore "\.log$|\.tmp$|^\.svn$|^\.git$|^\..+$|^test$";
        
        # 追加美化, 注意这里是追加根目录下, 也就是基于 root 变量
        fancyindex_header "/Nginx-Fancyindex/header.html";
        fancyindex_footer "/Nginx-Fancyindex/footer.html";
        fancyindex_ignore "Nginx-Fancyindex"; # 不显示第三方主题目录
    }
    
    # 规则1：禁止访问所有.log/.tmp后缀的文件（任意目录下）
    location ~* \.(log|tmp)$ {
        deny all;
        return 404; # 伪装成资源不存在，比403更安全
    }

    # 规则2：禁止访问根目录下的.test/.*隐藏目录/文件（任意目录下）
    location ~* /(\..+|test) {
        deny all;
        return 404;
    }
    
    # 个别隐藏文件需要允许访问(如/favicon.ico), 可在禁止规则前添加允许规则   
    location = /favicon.ico {
        allow all;
        try_files $uri =404;
    }
}

如果对这部分主题不满意, 可以参照上面的 Nginx-Fancyindex 项目自己去编写界面主题,
实际上仅作为暴露出来提供下载页面也不需要太过复杂的UI.