目录浏览功能

关键词：serve autoindex 目录浏览 文件目录 ftp目录 文件列表

前言

Index of /

../
.vscode/       2021-06-30T07:09:51.895Z         -
index.js       2021-06-30T07:23:28.717Z       329

1. NodeJS使用st模块

1.1 原生http方式

const http = require('http');
const st = require('st');
const httpPort = 8080;

let mount = st({path: 'static'});

http.createServer((req, res) => {
    if (mount(req, res)) return;// serving a static file
}).listen(httpPort)

console.log('http://localhost:' + httpPort);

1.2 express方式

const express = require('express');
const st = require('st');
const httpPort = 8080;

let app = express();

let mount = st({path: 'static'});
app.use('/', mount);

app.listen(httpPort);

console.log('http://localhost:'+httpPort);

autoindex-json模块

const express = require('express');
const autoindexJson = require('autoindex-json');

const DATA_DIR = '/path/to/your/data';
app.use('/files', express.static(DATA_DIR), autoindexJson(DATA_DIR));
app.listen(3000);

GET http://localhost:3000/files?path=
[{"name":"new_college","type":"directory","mtime":"Thu, 28 Jan 2021 02:11:52 GMT"}]

GET http://localhost:3000/files?path=new_college/README.md
[{"name":"README.md","type":"file","mtime":"Thu, 28 Jan 2021 02:07:03 GMT","size":2280}]

源码改进(显示url)：

const autoindexJson = (dir, options) => async function(req, res, next) {
...
  for (const file of files) {
    const filepath = path.join(url, file);
    const fstats = statSync(filepath);
    // stats.push(getStats(fstats, filepath));
    
    let tmpStats = getStats(fstats, filepath);
    if (tmpStats.type === 'file'){
      tmpStats.url = req.protocol + '://' + req.get('host') + req.baseUrl + '/' + req.query[options.pathField] + '/' + tmpStats.name;
    }else if(tmpStats.type === 'directory'){
      tmpStats.url = req.protocol + '://' + req.get('host') + req.originalUrl  + '/' + tmpStats.name;
    }else{

    }
    stats.push(tmpStats);
  }
...
}

serve-index

'use strict';

const util = require('util');
const http = require('http');
const express = require('express');
const serveIndex = require('serve-index');

const httpPort = 8080;

const app = express();

let httpServer = http.createServer(app);

// similar node_modules: serve-static st autoindex-json
app.use('/static', express.static('static'), serveIndex('static', {'icons' : true}));

httpServer.listen(httpPort);

3. Nginx开启目录浏览功能(autoindex)

$ nginx -v
nginx version: nginx/1.20.1
$ vi /etc/nginx/nginx.conf

开启server的目录浏览

server {
        listen       80;
        server_name  localhost;

		charset utf-8; # 中文必须设置

        #access_log  logs/host.access.log  main;

         location / { 
                  root /opt; # 根目录用root
                  autoindex on; # 开启目录浏览功能
                  autoindex_exact_size off; # 关闭详细文件大小统计，让文件大小显示MB，GB单位，默认为b
                  autoindex_localtime on; # 开启以服务器本地时区显示文件修改日期
         }
         
         location /files { 
                  alias /opt; # 非根目录用alias
                  autoindex on; # 开启目录浏览功能
                  autoindex_exact_size off; # 关闭详细文件大小统计，让文件大小显示MB，GB单位，默认为b
                  autoindex_localtime on; # 开启以服务器本地时区显示文件修改日期
         }
}

4. express访问静态文件

express静态文件指向需要访问的文件夹(能访问单个文件，不能浏览目录)

if( 'development' === process.env.NODE_ENV){
    // get web 1ogs
    app.use('/1ogs', express.static('logs'));
}

5. pm2静态服务器

使用pm2搭建一个静态文件服务器

pm2 serve <path> <port>

或者

{
  "script": "serve",
  "env": {
    "PM2_SERVE_PATH": '.',
    "PM2_SERVE_PORT": 8080
  }
}