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

是否有Node.js即用型工具(随npm一起安装),可以帮助我通过HTTP将文件夹内容公开为文件服务器。

例如,如果我有

D:\Folder\file.zipD:\Folder\file2.htmlD:\Folder\folder\file-in-folder.jpg

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

访问文件
http://hostname/file.ziphttp://hostname/file2.htmlhttp://hostname/folder/file-in-folder.jpg

为什么我的节点静态文件服务器丢弃请求?一些神秘的

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

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

相关:NodeJS中的基本静态文件服务器

676611 次浏览

如果您使用Express框架,则此功能已准备就绪。

要设置一个简单的文件服务应用程序,只需这样做:

mkdir yourappcd yourappnpm install expressnode_modules/express/bin/express

连接可能就是你要找的。

易于安装:

npm install connect

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

var connect = require('connect'),directory = '/path/to/Folder';
connect().use(connect.static(directory)).listen(80);
console.log('Listening on port 80.');

在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/stuffServing path/to/stuff on port 8001

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

不幸的是,它不能提供文件:)

我在工作和个人项目中使用休斯顿,它对我很有效。

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

python -m SimpleHTTPServer [port]

它运行良好,并附带Python。

一个好的“即用型工具”选项可以是超文本传输协议-server:

npm install http-server -g

要使用它:

cd D:\Folderhttp-server

或者,像这样:

http-server D:\Folder

点击查看:https://github.com/nodeapps/http-server

一个简单的静态服务器

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);

另见使用node.js作为简单的Web服务器

它还没有在NPM上,但我在Express上构建了一个简单的静态服务器,它还允许您接受表单提交并通过事务电子邮件服务(现在是Sendrid,Mandrill即将到来)通过电子邮件发送它们。

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

您可以使用Express js/service-静态替换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

你可以试试服侍我

使用它很容易:

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

就这些。

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

如果您不想使用就绪工具,您可以使用下面的代码,如我在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/');

更新如果您需要从外部需求/文件访问您的服务器,您需要克服CORS,在您的node.js文件中编写以下内容,正如我在前面的答案中提到的这里

// Website you wish to allow to connectresponse.setHeader('Access-Control-Allow-Origin', '*');
// Request methods you wish to allowresponse.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
// Request headers you wish to allowresponse.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);

更新

正如Adrian提到的,在评论中,他写了一个带有完整解释这里的ES6代码,我只是在下面重新发布他的代码,以防代码因任何原因从原始站点消失:

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 URLconst parsedUrl = url.parse(req.url);// extract URL pathlet pathname = `.${parsedUrl.pathname}`;// based on the URL path, extract the file extension. e.g. .js, .doc, ...const ext = path.parse(pathname).ext;// maps file extension to MIME typereconst 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 404res.statusCode = 404;res.end(`File ${pathname} not found!`);return;}
// if is a directory search for index file matching the extensionif (fs.statSync(pathname).isDirectory()) pathname += '/index' + ext;
// read file from file systemfs.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 datares.setHeader('Content-type', map[ext] || 'text/plain' );res.end(data);}});});

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

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

安装

npm install -g hostr

更换工作主任

cd myprojectfolder/

然后开始

hostr

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

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});

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

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

Buffet采用了完全缓冲的方法——当您的应用程序启动时,所有文件都被完全加载到内存中,因此您永远不会感到文件系统的烧毁。在实践中,这非常有效。以至于将清漆放在您的应用程序前面甚至可能会使其变慢! 

我们在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');
});

还有另一个非常好的静态Web服务器:浏览器同步。

可以使用node包管理器下载:

npm install -g browser-sync

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

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

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

更多可以从浏览器同步中找到

谢了

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

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);

如果您对无任何先决条件的超文本传输协议服务器感兴趣你应该看看:猫鼬

看看那个链接

您只需要安装node js的Express模块。

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

您可以像超文本传输协议://host name/Folder/file.zip一样访问您的文件

使用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);

这将加载您的index.html文件。如果您希望指定要加载的html文件,请使用以下语法:

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

如果你想把它放在不同的位置,在第三行设置路径:

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

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

node server.js

浏览localhost:8080

#仅演示/原始服务器

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

const fs = require('fs'),http = require('http'),arg = process.argv.slice(2),rootdir = arg[0] || process.cwd(),port = process.env.PORT || 9000,hostname = process.env.HOST || '127.0.0.1';//tested on node=v10.19.0http.createServer(function (req, res) {
try {// change 'path///to/////dir' -> 'path/to/dir'req_url = decodeURIComponent(req.url).replace(/\/+/g, '/');
stats = fs.statSync(rootdir + req_url);
if (stats.isFile()) {buffer = fs.createReadStream(rootdir + req_url);buffer.on('open', () => buffer.pipe(res));return;}
if (stats.isDirectory()) {//Get list of files and folder in requested directorylsof = fs.readdirSync(rootdir + req_url, {encoding:'utf8', withFileTypes:false});// make an html page with the list of files and send to browserres.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});res.end(html_page(`http://${hostname}:${port}`, req_url, lsof));return;}
} catch (err) {res.writeHead(404);res.end(err);return;}}).listen(port, hostname, () => console.log(`Server running at http://${hostname}:${port}`));

function html_page(host, req_url, lsof) {//this is a Function declarations can be called before it is defined// Add link to root directory and parent directory if not already in root directorylist = req_url == '/' ? [] : [`<a href="${host}">/</a>`,`<a href="${host}${encodeURI(req_url.slice(0,req_url.lastIndexOf('/')))}">..</a>`];
templete = (host, req_url, file) => {// the above is a Function expressions cannot be called before it is definedreturn `<a href="${host}${encodeURI(req_url)}${req_url.slice(-1) == '/' ? '' : '/'}${encodeURI(file)}">${file}</a>`; }
// Add all the links to the files and folder in requested directorylsof.forEach(file => {list.push(templete(host, req_url, file));});
return `<!DOCTYPE html><html lang="en"><head><meta http-equiv="content-type" content="text/html" charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Directory of ${req_url}</title></head><body><h2>Directory of ${req_url}</h2>${list.join('<br/>\n')}</body></html>`}

你还问为什么请求下降-不确定你的具体原因是什么,但总的来说,你最好使用专用中间件(nginx、S3、CDN)来提供服务器静态内容,因为Node真的没有针对这种网络模式进行优化。请参阅此处的进一步解释(第13点):http://goldbergyoni.com/checklist-best-practice-of-node-js-in-production/

这里是我的单文件/轻量级node.js静态文件Web服务器宠物项目,我相信它是一个快速而丰富的工具,它的使用就像在安装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.js8上的补丁,您可以在不首先安装的情况下访问选项: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

使用该工具的文件夹索引的屏幕截图

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

工具源位于github,欢迎您的反馈,功能请求和⭐!

单行™证明而不是承诺

在此处输入图片描述

第一个是http-serverhs-链接

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

第二个是serve byZEIT.co-链接

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

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

C:\Users\Qwerty>http-server --helpusage: 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" headerOptionally 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的回答

我没有太多的运气与这个页面上的任何答案,然而,下面似乎做的伎俩。

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

const express = require('express')const path = require('path')const port = process.env.PORT || 3000const app = express()
// serve static assets normallyapp.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"}

您可以为此使用NPM服务包,如果您不需要NodeJS的东西,它是一个快速且易于使用的工具:

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

npm install -g serve

2-使用serve <path>为您的静态文件夹提供服务:

d:> serve d:\StaticSite

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

http://localhost:3000

下面为我工作:

创建一个包含以下内容的文件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);

创建一个包含以下内容的文件index.html

Hi

启动命令行:

cmd

运行下面的cmd

node app.js

转到下面的URL,在chrome中:

http://localhost:8080/index.html

就这些。希望能帮上忙。

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

Node.js上的小型命令行Web服务器:Miptleha超文本传输协议

完整源代码代码(80行)

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 = 404return 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:\Foldernode server.js

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

从npm@5.2.0开始,npm开始在名为npx的常规npm旁边安装一个新的二进制文件。所以现在,一个衬里从当前目录创建静态超文本传输协议服务器:

npx serve

npx http-server
  1. 安装npm包

npm安装永久超文本传输协议-server

  1. 永远开始$(超文本传输协议-server)-p 8000-d false[FILE_DIRECTORY]

永远开始 /usr/local/lib/node_modules/超文本传输协议-server/bin/超文本传输协议-server-p 8000 /home/web-files/

  1. 除此之外,

超文本传输协议-p 8000 /home/web-files