Node.js快速文件服务器(HTTP上的静态文件)

时间:2013-05-02 08:45:52

标签: node.js http fileserver

是否有Node.js随时可用的工具(与npm一起安装),这有助于我将文件夹内容作为文件服务器通过HTTP公开。

示例,如果我有

D:\Folder\file.zip
D:\Folder\file2.html
D:\Folder\folder\file-in-folder.jpg

然后从D:\Folder\ node node-file-server.js开始 我可以通过

访问文件
http://hostname/file.zip
http://hostname/file2.html
http://hostname/folder/file-in-folder.jpg

Why is my node static file server dropping requests? 参考一些神秘的

  

标准node.js静态文件服务器

如果没有这样的工具,我应该使用什么框架?

相关: Basic static file server in NodeJS

31 个答案:

答案 0 :(得分:900)

一个好的“随时可用的工具”选项可以是http-server:

npm install http-server -g

使用它:

cd D:\Folder
http-server

或者,像这样:

http-server D:\Folder

检查出来:https://github.com/nodeapps/http-server

答案 1 :(得分:162)

如果您不想使用现成的工具,可以使用下面的代码,如我在https://developer.mozilla.org/en-US/docs/Node_server_without_framework所示:

var http = require('http');
var fs = require('fs');
var path = require('path');

http.createServer(function (request, response) {
    console.log('request starting...');

    var filePath = '.' + request.url;
    if (filePath == './')
        filePath = './index.html';

    var extname = path.extname(filePath);
    var contentType = 'text/html';
    switch (extname) {
        case '.js':
            contentType = 'text/javascript';
            break;
        case '.css':
            contentType = 'text/css';
            break;
        case '.json':
            contentType = 'application/json';
            break;
        case '.png':
            contentType = 'image/png';
            break;      
        case '.jpg':
            contentType = 'image/jpg';
            break;
        case '.wav':
            contentType = 'audio/wav';
            break;
    }

    fs.readFile(filePath, function(error, content) {
        if (error) {
            if(error.code == 'ENOENT'){
                fs.readFile('./404.html', function(error, content) {
                    response.writeHead(200, { 'Content-Type': contentType });
                    response.end(content, 'utf-8');
                });
            }
            else {
                response.writeHead(500);
                response.end('Sorry, check with the site admin for error: '+error.code+' ..\n');
                response.end(); 
            }
        }
        else {
            response.writeHead(200, { 'Content-Type': contentType });
            response.end(content, 'utf-8');
        }
    });

}).listen(8125);
console.log('Server running at http://127.0.0.1:8125/');

<强>更新 如果您需要从外部需求/文件访问您的服务器,您需要在您的node.js文件中通过编写下面的内容来克服CORS,正如我在上一个答案中所提到的here

// Website you wish to allow to connect
response.setHeader('Access-Control-Allow-Origin', '*');

// Request methods you wish to allow
response.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

// Request headers you wish to allow
response.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
response.setHeader('Access-Control-Allow-Credentials', true);

<强>更新

正如阿德里安所说,他在评论中写了一篇ES6代码并附有完整的解释here,我只是在下面重新发布他的代码,以防代码因原因而离开原始网站:

const http = require('http');
const url = require('url');
const fs = require('fs');
const path = require('path');
const port = process.argv[2] || 9000;

http.createServer(function (req, res) {
  console.log(`${req.method} ${req.url}`);

  // parse URL
  const parsedUrl = url.parse(req.url);
  // extract URL path
  let pathname = `.${parsedUrl.pathname}`;
  // based on the URL path, extract the file extention. e.g. .js, .doc, ...
  const ext = path.parse(pathname).ext;
  // maps file extention to MIME typere
  const map = {
    '.ico': 'image/x-icon',
    '.html': 'text/html',
    '.js': 'text/javascript',
    '.json': 'application/json',
    '.css': 'text/css',
    '.png': 'image/png',
    '.jpg': 'image/jpeg',
    '.wav': 'audio/wav',
    '.mp3': 'audio/mpeg',
    '.svg': 'image/svg+xml',
    '.pdf': 'application/pdf',
    '.doc': 'application/msword'
  };

  fs.exists(pathname, function (exist) {
    if(!exist) {
      // if the file is not found, return 404
      res.statusCode = 404;
      res.end(`File ${pathname} not found!`);
      return;
    }

    // if is a directory search for index file matching the extention
    if (fs.statSync(pathname).isDirectory()) pathname += '/index' + ext;

    // read file from file system
    fs.readFile(pathname, function(err, data){
      if(err){
        res.statusCode = 500;
        res.end(`Error getting the file: ${err}.`);
      } else {
        // if the file is found, set Content-type and send data
        res.setHeader('Content-type', map[ext] || 'text/plain' );
        res.end(data);
      }
    });
  });


}).listen(parseInt(port));

console.log(`Server listening on port ${port}`);

答案 2 :(得分:73)

对于想要在NodeJS脚本中运行的服务器的人:

您可以使用expressjs/serve-static替换connect.static(从连接3开始不再提供):

myapp.js:

var http = require('http');

var finalhandler = require('finalhandler');
var serveStatic = require('serve-static');

var serve = serveStatic("./");

var server = http.createServer(function(req, res) {
  var done = finalhandler(req, res);
  serve(req, res, done);
});

server.listen(8000);

然后从命令行:

  • $ npm install finalhandler serve-static
  • $ node myapp.js

答案 3 :(得分:54)

我知道它不是Node,但我使用的是Python的SimpleHTTPServer:

python -m SimpleHTTPServer [port]

效果很好,附带Python。

答案 4 :(得分:33)

connect可能是您正在寻找的。

轻松安装:

npm install connect

然后最基本的静态文件服务器可以写成:

var connect = require('connect'),
    directory = '/path/to/Folder';

connect()
    .use(connect.static(directory))
    .listen(80);

console.log('Listening on port 80.');

答案 5 :(得分:13)

使用npm:https://expressjs.com/en/starter/installing.html

安装express

使用以下内容在index.html的同一级别创建一个名为server.js的文件:

var express = require('express');
var server = express();
server.use('/', express.static(__dirname + '/'));
server.listen(8080);

如果您希望将其放在其他位置,请在第三行设置路径:

server.use('/', express.static(__dirname + '/public'));

CD到包含您文件的文件夹,并使用以下命令从控制台运行节点:

node server.js

浏览至localhost:8080

答案 6 :(得分:12)

仅限演示/投影服务器

如果这就是你所需要的,试试这个:

const http = require('http');
const fs = require('fs');
const port = 3000;
const app = http.createServer((req,res) => {
    res.writeHead(200);
    if (req.url === '/') req.url = '/index.html'; // courtesy of @JosephCho
    res.end(fs.readFileSync(__dirname + req.url));
});

app.listen(port);

注意:您需要使用“/index.html”作为地址的一部分,即“http://localhost:3000/index.html

答案 7 :(得分:10)

从npm@5.2.0起,npm开始与通常的名为npx的npm一起安装新的二进制文件。因此,现在可以从当前目录创建静态http服务器:

npx serve

npx http-server

答案 8 :(得分:9)

One-line™Proofs而非承诺

enter image description here

第一个是http-server hs - link

npm i -g http-server   // install
hs C:\repos            // run with one line?? FTW!!

第二个是ZEIT.co的serve - link

npm i -g serve         // install
serve C:\repos         // run with one line?? FTW!!

以下是可用选项,如果这有助于您做出决定。

C:\Users\Qwerty>http-server --help
usage: http-server [path] [options]

options:
  -p           Port to use [8080]
  -a           Address to use [0.0.0.0]
  -d           Show directory listings [true]
  -i           Display autoIndex [true]
  -g --gzip    Serve gzip files when possible [false]
  -e --ext     Default file extension if none supplied [none]
  -s --silent  Suppress log messages from output
  --cors[=headers]   Enable CORS via the "Access-Control-Allow-Origin" header
                     Optionally provide CORS headers list separated by commas
  -o [path]    Open browser window after starting the server
  -c           Cache time (max-age) in seconds [3600], e.g. -c10 for 10 seconds.
               To disable caching, use -c-1.
  -U --utc     Use UTC time format in log messages.

  -P --proxy   Fallback proxy if the request cannot be resolved. e.g.: http://someurl.com

  -S --ssl     Enable https.
  -C --cert    Path to ssl cert file (default: cert.pem).
  -K --key     Path to ssl key file (default: key.pem).

  -r --robots  Respond to /robots.txt [User-agent: *\nDisallow: /]
  -h --help    Print this list and exit.
C:\Users\Qwerty>serve --help

  Usage: serve.js [options] [command]

  Commands:

    help  Display help

  Options:

    -a, --auth      Serve behind basic auth
    -c, --cache     Time in milliseconds for caching files in the browser
    -n, --clipless  Don't copy address to clipboard (disabled by default)
    -C, --cors      Setup * CORS headers to allow requests from any origin (disabled by default)
    -h, --help      Output usage information
    -i, --ignore    Files and directories to ignore
    -o, --open      Open local address in browser (disabled by default)
    -p, --port   Port to listen on (defaults to 5000)
    -S, --silent    Don't log anything to the console
    -s, --single    Serve single page applications (sets `-c` to 1 day)
    -t, --treeless  Don't display statics tree (disabled by default)
    -u, --unzipped  Disable GZIP compression
    -v, --version   Output the version number

如果您需要关注更改,请参阅hostr,信用Henry Tseng's answer

答案 9 :(得分:8)

还有另一个非常好的静态Web服务器:browser-sync。

可以使用节点包管理器下载:

npm install -g browser-sync

安装后,导航到cmd提示符中的项目文件夹,然后运行以下命令:

browser-sync start --server --port 3001 --files="./*"

它将开始迎合浏览器中当前文件夹中的所有文件。

可以从BrowserSync

找到更多内容

感谢。

答案 10 :(得分:6)

如果您使用Express framework,则可以使用此功能。

要设置简单的文件服务应用,请执行以下操作:

mkdir yourapp
cd yourapp
npm install express
node_modules/express/bin/express

答案 11 :(得分:6)

Here是我的单文件/轻量级node.js静态文件web-server pet项目,没有依赖性,我相信这是一个快速而丰富的工具,它的使用就像在你的命令上发出这个命令一样简单安装node.js(或Debian / Ubuntu上的nodejs-legacy)时的Linux / Unix / macOS终端(或Android上的termux):

curl pad.js.org | node 

(文档上的Windows用户存在不同的命令)

它支持我认为有用的不同内容,

  • 分层目录索引创建/服务
    • 具有不同标准的排序功能
    • 在浏览器上通过[多文件]拖放和文件/纯文本复制粘贴以及Chrome,Firefox和其他浏览器上的系统剪贴板屏幕截图粘贴上传可能会有一些限制(可以关闭)通过它提供的命令行选项)
    • 文件夹/笔记创建/上传按钮
  • 为众所周知的文件类型提供正确的MIME(可能会禁用该文件)
  • 作为npm软件包和本地工具安装的可能性,或作为Docker永久服务的单线程安装
  • HTTP 206文件服务(多部分文件传输)以加快传输速度
  • 从终端和浏览器控制台上传(实际上它原本打算成为其他页面/域上浏览器的JS控制台的文件系统代理)
  • CORS下载/上传(也可以关闭)
  • 简易HTTPS集成
  • 轻量级命令行选项,用于实现更好的安全服务:
    • 使用node.js 8上的补丁,无需先安装即可访问这些选项:curl pad.js.org | node - -h
    • 或者首先将其安装为[sudo] npm install -g pad.js的系统全局npm包,然后使用其安装的版本访问其选项:pad -h
    • 或者使用提供的Docker镜像,默认情况下使用相对安全的选项。 [sudo] docker run --restart=always -v /files:/files --name pad.js -d -p 9090:9090 quay.io/ebraminio/pad.js

Screenshot of a folder index using the tool

上面描述的功能主要记录在工具http://pad.js.org的主页上,通过我使用的一些不错的技巧也是工具源本身也可以提供的地方!

工具源位于GitHub,欢迎您提供反馈,功能请求和⭐s!

答案 12 :(得分:5)

我对这个页面上的任何答案都没有太多运气,但是,下面似乎可以解决这个问题。

添加包含以下内容的server.js文件:

const express = require('express')
const path = require('path')
const port = process.env.PORT || 3000
const app = express()

// serve static assets normally
app.use(express.static(__dirname + '/dist'))

// handle every other route with index.html, which will contain
// a script tag to your application's JavaScript file(s).
app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'dist', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

还要确保您需要express。根据您的设置运行yarn add express --savenpm install express --save(我可以推荐yarn非常快)。

您可以将dist更改为您为自己的内容提供的任何文件夹。对于我的简单项目,我没有在任何文件夹中提供服务,因此我只删除了dist文件名。

然后你可以运行node server.js。由于我必须将项目上传到Heroku服务器,我需要将以下内容添加到我的package.json文件中:

  "scripts": {
    "start": "node server.js"
  }

答案 13 :(得分:4)

看一下link

您只需安装node js的快递模块。

var express = require('express');
var app = express();

app.use('/Folder', express.static(__dirname + '/Folder'));

您可以像http://hostname/Folder/file.zip

那样访问您的文件

答案 14 :(得分:4)

为了使用节点提供静态资源来提高性能,我建议使用Buffet。它的工作方式类似于Web应用程序加速器,也称为缓存HTTP反向代理,但它只是将选定的目录加载到内存中。

  

Buffet采用完全缓冲的方法 - 当您的应用程序启动时,所有文件都会完全加载到内存中,因此您永远不会感觉到文件系统的损坏。在实践中,这非常有效。因此,将Varnish放在应用程序前可能会让它变慢!

我们在codePile网站上使用它,并且在1k并发用户连接负载下下载25个资源的页面上发现~700个请求/秒增加到> 4k个请求/秒。

示例:

var server = require('http').createServer();

var buffet = require('buffet')(root: './file'); 

 

server.on('request', function (req, res) {

  buffet(req, res, function () {

    buffet.notFound(req, res);

  });

});

 

server.listen(3000, function () {

  console.log('test server running on port 3000');

});

答案 15 :(得分:3)

您可以尝试serve-me

使用它非常简单:

ServeMe = require('serve-me')();
ServeMe.start(3000);

多数民众赞成。

PD:默认提供的文件夹是“public”。

答案 16 :(得分:3)

这是另一个简单的网络服务器。

https://www.npmjs.com/package/hostr

安装

npm install -g hostr

更改工作总监

cd myprojectfolder/

然后开始

hostr

答案 17 :(得分:2)

首先通过npm install node-static -g -g安装节点静态服务器是在系统上全局安装它,然后导航到文件所在的目录,启动服务器static它监听端口8080,导航到浏览器并输入localhost:8080 / yourhtmlfilename。

答案 18 :(得分:2)

&#13;
&#13;
const http = require('http');
const fs = require('fs');
const url = require('url');
const path = require('path');


let mimeTypes = {
  '.html': 'text/html',
  '.css': 'text/css',
  '.js': 'text/javascript',
  '.jpg': 'image/jpeg',
  '.png': 'image/png',
  '.ico': 'image/x-icon',
  '.svg': 'image/svg+xml',
  '.eot': 'appliaction/vnd.ms-fontobject',
  '.ttf': 'aplication/font-sfnt'
};



http.createServer(function (request, response) {
  let pathName = url.parse(request.url).path;
  if(pathName === '/'){
    pathName = '/index.html';
  }
  pathName = pathName.substring(1, pathName.length);
  let extName = path.extName(pathName);
  let staticFiles = `${__dirname}/template/${pathName}`;

      if(extName =='.jpg' || extName == '.png' || extName == '.ico' || extName == '.eot' || extName == '.ttf' || extName == '.svg')
      {
          let file = fr.readFileSync(staticFiles);
          res.writeHead(200, {'Content-Type': mimeTypes[extname]});
          res.write(file, 'binary');
          res.end();
      }else {
        fs.readFile(staticFiles, 'utf8', function (err, data) {
          if(!err){
            res.writeHead(200, {'Content-Type': mimeTypes[extname]});
            res.end(data);
          }else {
            res.writeHead(404, {'Content-Type': 'text/html;charset=utf8'});
            res.write(`<strong>${staticFiles}</strong>File is not found.`);
          }
          res.end();
        });
      }
}).listen(8081);
&#13;
&#13;
&#13;

答案 19 :(得分:2)

它不在NPM上,但是我在Express上构建了一个简单的静态服务器,它还允许您接受表单提交并通过交易电子邮件服务发送电子邮件(现在是Sendgrid,Mandrill即将推出)。

https://github.com/jdr0dn3y/nodejs-StatServe

答案 20 :(得分:2)

您可以使用NPM serve包,如果您不需要NodeJS,它是一个快速且易于使用的工具:

1 - 在您的PC上安装软件包:

npm install -g serve

2 - 使用serve <path>

提供静态文件夹
d:> serve d:\StaticSite

它将显示您的静态文件夹所在的端口,只需导航到主机,如:

http://localhost:3000

答案 21 :(得分:2)

为了搜索者的利益,我喜欢Jakub g的答案,但想要一点错误处理。显然,最好处理错误properly,但这有助于防止网站在发生错误时停止。代码如下:

var http = require('http');
var express = require('express');

process.on('uncaughtException', function(err) {
  console.log(err);
});

var server = express();

server.use(express.static(__dirname));

var port = 10001;
server.listen(port, function() { 
    console.log('listening on port ' + port);     
    //var err = new Error('This error won't break the application...')
    //throw err
});

答案 22 :(得分:1)

对于开发工作,你可以使用(表达4) https://github.com/appsmatics/simple-httpserver.git

答案 23 :(得分:1)

在纯node.js中:

const http = require('http')
const fs = require('fs')
const path = require('path')

process.on('uncaughtException', err => console.error('uncaughtException', err))
process.on('unhandledRejection', err => console.error('unhandledRejection', err))

const publicFolder = process.argv.length > 2 ? process.argv[2] : '.'
const port = process.argv.length > 3 ? process.argv[3] : 8080

const mediaTypes = {
  zip: 'application/zip',
  jpg: 'image/jpeg',
  html: 'text/html',
  /* add more media types */
}

const server = http.createServer(function(request, response) {
  console.log(request.method + ' ' + request.url)

  const filepath = path.join(publicFolder, request.url)
  fs.readFile(filepath, function(err, data) {
    if (err) {
      response.statusCode = 404
      return response.end('File not found or you made an invalid request.')
    }

    let mediaType = 'text/html'
    const ext = path.extname(filepath)
    if (ext.length > 0 && mediaTypes.hasOwnProperty(ext.slice(1))) {
      mediaType = mediaTypes[ext.slice(1)]
    }

    response.setHeader('Content-Type', mediaType)
    response.end(data)
  })
})

server.on('clientError', function onClientError(err, socket) {
  console.log('clientError', err)
  socket.end('HTTP/1.1 400 Bad Request\r\n\r\n')
})

server.listen(port, '127.0.0.1', function() {
  console.log('?‍? Development server is online.')
})

这是一个简单的node.js服务器,仅提供特定目录中的请求文件。

用法:

node server.js folder port

folder可以是绝对的,也可以是相对的,具体取决于server.js的位置。默认值为.,它是您执行node server.js命令的目录。

port默认为8080,但是您可以指定操作系统中可用的任何端口。

就您而言,我会这样做:

cd D:\Folder
node server.js

您可以通过输入D:\Folder从浏览器中浏览http://127.0.0.1:8080/somefolder/somefile.html下的文件

答案 24 :(得分:1)

使用连接的简单静态服务器

var connect = require('connect'),
  directory = __dirname,
  port = 3000;

connect()
  .use(connect.logger('dev'))
  .use(connect.static(directory))
  .listen(port);

console.log('Listening on port ' + port);

另见Using node.js as a simple web server

答案 25 :(得分:1)

在NPM注册表https://npmjs.org/search?q=server中搜索,我找到了静态服务器https://github.com/maelstrom/static-server

  

曾经需要向同事发送文件,但不能打扰电子邮件   100MB野兽?想要运行一个简单的JavaScript示例   应用程序,但在通过文件运行它时遇到问题:///   协议?想要在没有LAN的情况下共享您的媒体目录   设置Samba或FTP,或任何其他需要您编辑的内容   配置文件?然后这个文件服务器将使你的生活   更容易一点。

     

要安装简单的静态服务器,请使用npm:

npm install -g static-server
     

然后,只需运行

即可提供文件或目录
$ serve path/to/stuff
Serving path/to/stuff on port 8001

甚至可以列出文件夹内容。

不幸的是,it couldn't serve files:)

答案 26 :(得分:1)

如果你对没有任何先决条件的超轻型http服务器感兴趣 你应该看一下:mongoose

答案 27 :(得分:0)

您还询问了为什么请求正在下降 - 不确定具体原因是什么,但总的来说,使用专用中间件(nginx,S3,CDN)可以更好地服务器静态内容,因为Node实际上并未针对这种网络模式。见这里的进一步解释(项目符号13): http://goldbergyoni.com/checklist-best-practice-of-node-js-in-production/

答案 28 :(得分:0)

以下为我工作:

使用以下内容创建文件app.js

// app.js

var fs = require('fs'),
    http = require('http');

http.createServer(function (req, res) {
  fs.readFile(__dirname + req.url, function (err,data) {
    if (err) {
      res.writeHead(404);
      res.end(JSON.stringify(err));
      return;
    }
    res.writeHead(200);
    res.end(data);
  });
}).listen(8080);

启动命令行:

cmd

cmd下运行:

node app.js

使用以下内容创建一个index.html

Hi

在chrome下方的URL处转到:

http://localhost:8080/index.html

来源:https://nodejs.org/en/knowledge/HTTP/servers/how-to-serve-static-files/

希望有帮助。

答案 29 :(得分:0)

Node.js上的小型命令行Web服务器:miptleha-http

完整来源code(80行)

答案 30 :(得分:0)

我在工作和个人项目中使用休斯顿,对我来说效果很好。

https://github.com/alejandro/Houston