百度360必应搜狗淘宝本站头条
mqtt服务器xftp6vscode使用技巧mybatiscollectionkeyerror
当前位置：网站首页 > 热门文章 > 正文

使用 Docker 和 Nginx 实现简单目录索引服务

bigegpt 2024-08-07 17:42 8 浏览

本文将会介绍如何使用 Docker、Node、JavaScript、Traefik 完成一个简单的目录索引服务，全部代码在 300 行以内。相关代码已开源至 GitHub ，文末有链接，感兴趣可以自取。

实现一个目录索引站点并不是什么难事，但是即便如此，需要考虑的事情也有很多，要实现非阻塞IO、要实现文件缓存、要实现SSL等等一系列稍微有些麻烦的事情，如何能在尽可能少编写代码的情况下，完成这个需求呢。

其实很简单，借助完善靠谱的开源项目们，本文最终实现例子效果如下。

最终结果预览

实现核心逻辑

说到 Web 目录索引服务，我们一般会想到的就是大名鼎鼎的 Nginx 或者它的竞品们了。而它其中一个默认模块便提供了这个目录列表的功能: ngx_http_autoindex_module。

这个模块十分简单，在此我就不过度展开，有兴趣可以翻阅 Nginx 官方文档，了解这个模块提供的几个简单的指令。

对某个路由下的页面开启 autoIndex 可以轻松实现列目录的功能，比如这样：

location / {

autoindex_format html;

autoindex_localtime on;

autoindex_exact_size on;

autoindex on;

}

如果你简单使用上面的逻辑，你会得到一个黑底白字的页面，虽然能用，但是未免太过丑陋，查看生成文档源代码(由于代码高亮问题，使用 xpre 代替 pre)：

<html>

<head><title>Index of /</title></head>

<body>

<h1>Index of /</h1><hr><xpre><a href="../">../</a>

<a href="a/">a/</a> 16-Dec-2018 13:39 -

<a href="b/">b/</a> 16-Dec-2018 13:39 -

<a href="c/">c/</a> 16-Dec-2018 13:39 -

</xpre><hr></body>

</html>

这个时候一般会有两个方案对默认的界面进行美化：

  1. 编译一个支持定义模板的 Nginx 插件。
  2. 使用 ngx_http_addition_module 模块手动进行模板美化。

第一种方案需要额外编译，有一定的额外维护成本、以及后续升级改造的不稳定因素。我们选择第二种方式，比如将上面的逻辑改造为：

location / {

add_before_body /autoindex/header.html;

add_after_body /autoindex/footer.html;

autoindex_format html;

autoindex_localtime on;

autoindex_exact_size on;

autoindex on;

}

代码生效后，你将得到这样的文档结果：

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>小站</title>

<style>your code here</style>

</head>

<body><html>

<head><title>Index of /</title></head>

<body>

<h1>Index of /</h1><hr><xpre><a href="../">../</a>

<a href="a/">a/</a> 16-Dec-2018 13:39 -

<a href="b/">b/</a> 16-Dec-2018 13:39 -

<a href="c/">c/</a> 16-Dec-2018 13:39 -

</xpre><hr></body>

</html>

<table><thead><tr><th width="40%">Name</th><th width="30%">Date</th><th width="10%">Size</th></tr></thead><tbody></tbody><tfoot><tr><th colspan="3"><a href="https://soulteary.com" target="_blank">Proudly Powered By Nginx, Design By @soulteary</a></th></tr></tfoot></table>

<script>your code here</script>

</body>

</html>

这时你会发现样式似乎是正常了，但是会出现三个额外的问题：

  1. 文档闭合不标准，存在多个文档闭合标签。
  2. Nginx AutoIndex 默认生成的 HTML 文档存在内联样式标签，无法像三方模块一样进行页面定制。
  3. 默认生成文档结构不利于SEO以及不利于页面样式定制。

但是很庆幸，Nginx 还提供了一个内置模块：ngx_http_sub_module。 这个模块拥有编程语言中 replace 函数的作用，配合少量的替换操作，我们可以将文档轻松改造成我们想要的结构。

location / {

add_before_body /autoindex/header.html;

add_after_body /autoindex/footer.html;

autoindex_format html;

autoindex_localtime on;

autoindex_exact_size on;

autoindex on;

sub_filter '<html>\r\n<head><title>Index of $uri</title></head>' '';

sub_filter '<body bgcolor="white">' '';

sub_filter '</body>' '';

sub_filter '<hr>' '';

sub_filter '<hr>' '';

sub_filter '</html>' '';

sub_filter_once on;

charset utf-8;

}

此刻，再查看文档，会发现文档已经十分适合进行样式改造了。

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>小站</title>

<style>your code here</style>

</head>

<body>

<body>

<h1>Index of /</h1><xpre><a href="../">../</a>

<a href="a/">a/</a> 16-Dec-2018 13:39 -

<a href="b/">b/</a> 16-Dec-2018 13:39 -

<a href="c/">c/</a> 16-Dec-2018 13:39 -

</xpre>

<table><thead><tr><th width="40%">Name</th><th width="30%">Date</th><th width="10%">Size</th></tr></thead><tbody></tbody><tfoot><tr><th colspan="3"><a href="https://soulteary.com" target="_blank">Proudly Powered By Nginx, Design By @soulteary</a></th></tr></tfoot></table>

<script>your code here</script>

</body>

</html>

在有一个良好的文档基础之后，我们可以使用 JavaScript 对它进行简单的增强，考虑到最基础浏览器的兼容问题，我们使用 ES5 标准进行逻辑书写，下面不到二十行的代码，可以让我们使用文档中的 pre 标签作为数据源，重新生成适合排版的模板。

var dataSets = document.getElementsByTagName('pre')[0].innerHTML.split('\n');

var directoryUp = false;

var tpl = '';

for (var i = 0, j = dataSets.length - 1; i < j; i++) {

var line = dataSets[i];

if (line.indexOf('../') === -1) {

line = line.match(/^(.*)\s+(\S+\s\S+)\s+(\S+)/);

tpl += '<tr>' +

'<td>' + line[1] + '</td>' +

'<td>' + '<span class="date" datetime="' + new Date(line[2]) + '">' + line[2] + '</span>' + '</td>' +

'<td>' + line[3] + '</td>' +

'</tr>';

} else {

if (location.pathname !== '/') directoryUp = true;

}

}

if (directoryUp) tpl = '<tr><td colspan="3"><a href="..">..</a></td></tr>' + tpl;

document.getElementsByTagName('tbody')[0].innerHTML = tpl;

当然，如果你想拥有更适合阅读的时间戳，可以引入一个名为 timeago.js 的脚本，配合下面的代码，让 Nginx 输出的时间戳变可读性变的更好。

timeago().render(document.querySelectorAll('.date'));

借助容器快速服务化

因为我们并未对 Nginx 进行任何改造，所以我们可以很省事的直接使用 Nginx 官方镜像提供我们的目录索引服务，这里推荐使用 alpine 镜像，小巧好用，比如下面的镜像，连带系统到软件，不到 20 MB。

nginx:1.15.7-alpine

为了简单，我直接使用 compose 和 Traefik 完成搭建应用的最后一步，相关的说明之前的博客有写，我就不赘述了，还是不太会使用的同学请翻阅历史文档。

version: '3'

services:

nginx:

image: nginx:1.15.7-alpine

restart: always

labels:

- "traefik.enable=true"

- "traefik.port=80"

- "traefik.frontend.rule=Host:demo.soulteary.com,demo.soulteary.io"

- "traefik.frontend.entryPoints=https,http"

- "traefik.frontend.headers.customResponseHeaders=Access-Control-Allow-Origin:*"

networks:

- traefik

expose:

- 80

volumes:

- ./nginx.conf:/etc/nginx/nginx.conf

- ./mime.types:/etc/nginx/mime.types

- ./public:/app/public

- ./autoindex:/app/.autoindex

extra_hosts:

- "demo.soulteary.com:127.0.0.1"

- "demo.soulteary.io:127.0.0.1"

networks:

traefik:

external: true

当然，既然提到服务，最低要求是能够自动负载均衡、并且提供多节点存活，比如下面这样。

docker-compose up --scale nginx=2

最后

可能你会觉得这么一顿折腾，相比 Nginx 默认配置性能会有很大降低，然而事实是并没有，有兴趣的同学可以进行性能压测。

相关推荐

方差分析简介（方差分析通俗理解）

介绍方差分析（ANOVA，AnalysisofVariance）是一种广泛使用的统计方法，用于比较两个或多个组之间的均值。单因素方差分析是方差分析的一种变体，旨在检测三个或更多分类组的均值是否存在...

正如404页面所预示，猴子正成为断网元凶--吧嗒吧嗒真好吃

吧嗒吧嗒，绘图：MakiNaro你可以通过加热、冰冻、水淹、模塑、甚至压溃压力来使网络光缆硬化。但用猴子显然是不行的。光缆那新挤压成型的塑料外皮太尼玛诱人了，无法阻挡一场试吃盛宴的举行。印度政府正...

Python数据可视化:箱线图多种库画法

概念箱线图通过数据的四分位数来展示数据的分布情况。例如：数据的中心位置，数据间的离散程度，是否有异常值等。把数据从小到大进行排列并等分成四份，第一分位数（Q1），第二分位数（Q2）和第三分位数（Q3）...

多组独立(完全随机设计)样本秩和检验的SPSS操作教程及结果解读

作者/风仕在上一期，我们已经讲完了两组独立样本秩和检验的SPSS操作教程及结果解读，这期开始讲多组独立样本秩和检验，我们主要从多组独立样本秩和检验介绍、两组独立样本秩和检验使用条件及案例的SPSS操作...

方差分析 in R语言 and Excel（方差分析r语言例题）

今天来写一篇实际中比较实用的分析方法，方差分析。通过方差分析，我们可以确定组别之间的差异是否超出了由于随机因素引起的差异范围。方差分析分为单因素方差分析和多因素方差分析，这一篇先介绍一下单因素方差分析...

可视化:前端数据可视化插件大盘点 图表/图谱/地图/关系图

前端数据可视化插件大盘点图表/图谱/地图/关系图全有在大数据时代，很多时候我们需要在网页中显示数据统计报表，从而能很直观地了解数据的走向，开发人员很多时候需要使用图表来表现一些数据。随着Web技术的...

matplotlib 必知的 15 个图（matplotlib各种图）

施工专题，我已完成20篇，施工系列几乎覆盖Python完整技术栈，目标只总结实践中最实用的东西，直击问题本质，快速帮助读者们入门和进阶：1我的施工计划2数字专题3字符串专题4列表专题5流程控制专题6编...

R ggplot2常用图表绘制指南（ggplot2绘制折线图）

ggplot2是R语言中强大的数据可视化包，基于“图形语法”（GrammarofGraphics），通过分层方式构建图表。以下是常用图表命令的详细指南，涵盖基本语法、常见图表类型及示例，适合...

Python数据可视化:从Pandas基础到Seaborn高级应用

数据可视化是数据分析中不可或缺的一环，它能帮助我们直观理解数据模式和趋势。本文将全面介绍Python中最常用的三种可视化方法。Pandas内置绘图功能Pandas基于Matplotlib提供了简洁的绘...

Python 数据可视化常用命令备忘录

本文提供了一个全面的Python数据可视化备忘单，适用于探索性数据分析(EDA)。该备忘单涵盖了单变量分析、双变量分析、多变量分析、时间序列分析、文本数据分析、可视化定制以及保存与显示等内容。所...

统计图的种类（统计图的种类及特点图片）

统计图是利用几何图形或具体事物的形象和地图等形式来表现社会经济现象数量特征和数量关系的图形。以下是几种常见的统计图类型及其适用场景：1.条形图（BarChart）条形图是用矩形条的高度或长度来表示...

实测，大模型谁更懂数据可视化?（数据可视化和可视化分析的主要模型）

大家好，我是Ai学习的老章看论文时，经常看到漂亮的图表，很多不知道是用什么工具绘制的，或者很想复刻类似图表。实测，大模型LaTeX公式识别，出乎预料前文，我用Kimi、Qwen-3-235B...

通过AI提示词让Deepseek快速生成各种类型的图表制作

在数据分析和可视化领域，图表是传达信息的重要工具。然而，传统图表制作往往需要专业的软件和一定的技术知识。本文将介绍如何通过AI提示词，利用Deepseek快速生成各种类型的图表，包括柱状图、折线图、饼...

数据可视化:解析箱线图(box plot)

箱线图/盒须图（boxplot）是数据分布的图形表示，由五个摘要组成：最小值、第一四分位数（25th百分位数）、中位数、第三四分位数（75th百分位数）和最大值。箱子代表四分位距（IQR）。IQR是...

[seaborn] seaborn学习笔记1-箱形图Boxplot

1箱形图Boxplot(代码下载)Boxplot可能是最常见的图形类型之一。它能够很好表示数据中的分布规律。箱型图方框的末尾显示了上下四分位数。极线显示最高和最低值，不包括异常值。seaborn中...

一周热门
最近发表
标签列表