Nginx美化目录展示

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

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

# 安装 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

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

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

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

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

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

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

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

重新启动服务来测试:

# 这里创建个 .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 来禁止访问:

# 改进禁止访问
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 就代表成功, 但是问题也到来: 页面还是不好看, 怎么提升美化效果?

这里推荐美化主题如下:

Nginx-Fancyindex-Theme

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

# 拉取源代码
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

最后就是更新修改配置:

# 美化的具体配置
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.

MeteorCat / Nginx美化目录展示

Nginx美化目录展示