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


1102

我想运行一个非常简单的HTTP服务器。每个GET请求example.com都应index.html以常规HTML页面的形式(例如,与您阅读普通网页时相同的体验)获得响应。

使用下面的代码,我可以阅读的内容index.html。如何index.html作为常规网页?

var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');

http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end(index);
}).listen(9615);

下面的一个建议很复杂,需要我为get要使用的每个资源(CSS,JavaScript,图像)文件写一行。

如何在单个HTML页面中提供一些图像,CSS和JavaScript?


21
看一下npm模块的“连接”。它提供了这种基本功能,并且是许多设置和其他程序包的基础。
莫雷2011年

5
您应该将解决方案作为答案并将其标记为正确。
graham.reeds 2011年

8
我能够通过Eric B. Sowell找到一个完美的解决方案,称为从节点js提供静态文件。阅读整个事情。强烈推荐。
idophir 2011年

1
看看我写的一个名为Cachemere的模块。它还会自动缓存所有资源。github.com/topcloud/cachemere
乔恩·

1
本地网络服务器是一个很好的例子
Lloyd 2014年

Answers:


991

最简单的Node.js服务器就是:

$ npm install http-server -g

现在,您可以通过以下命令运行服务器:

$ cd MyApp

$ http-server

如果您使用的是NPM 5.2.0或更高版本,则http-server无需安装即可使用npx。不建议在生产中使用此方法,但这是快速使服务器在本地主机上运行的好方法。

$ npx http-server

或者,您可以尝试这样做,这将打开您的Web浏览器并启用CORS请求:

$ http-server -o --cors

有关更多选项,请查看GitHub上文档http-server,或运行:

$ http-server --help

还有许多其他不错的功能以及可以简单地部署到NodeJitsu的功能。

功能叉

当然,您可以使用自己的fork轻松添加功能。您可能会发现它已经在该项目的现有800多个分支中完成:

轻型服务器:自动刷新替代

一个不错的替代方法http-serverlight-server。它支持文件监视和自动刷新以及许多其他功能。

$ npm install -g light-server 
$ light-server

在Windows资源管理器中添加到目录上下文菜单

 reg.exe add HKCR\Directory\shell\LightServer\command /ve /t REG_EXPAND_SZ /f /d "\"C:\nodejs\light-server.cmd\" \"-o\" \"-s\" \"%V\""

简单的JSON REST服务器

如果您需要为原型项目创建简单的REST服务器,那么json-server可能就是您想要的。

自动刷新编辑器

现在,大多数网页编辑器和IDE工具都包含一个Web服务器,它将监视您的源文件并在更改时自动刷新您的网页。

我将Live Server与Visual Studio Code一起使用。

开源的文本编辑器支架还包括一个静态的NodeJS web服务器。只需在Brackets中打开任何HTML文件,然后按“ 实时预览 ”,它就会启动静态服务器并在该页面上打开浏览器。只要您编辑和保存HTML文件,浏览器就会自动刷新。这在测试自适应网站时特别有用。在多个浏览器/窗口大小/设备上打开HTML页面。保存您的HTML页面,并立即查看您的自适应内容是否正常运行,因为它们全部自动刷新。

PhoneGap开发人员

如果您正在编写混合移动应用程序,则您可能想知道PhoneGap团队在其新的PhoneGap应用程序中采用了此自动刷新概念。这是一个通用的移动应用程序,可以在开发过程中从服务器加载HTML5文件。这是一个非常巧妙的技巧,因为如果您要更改JS / CSS / HTML文件,则现在可以跳过混合移动应用程序开发周期中缓慢的编译/部署步骤,而这通常是您的大部分时间。它们还提供phonegap serve检测文件更改的静态NodeJS Web服务器(运行)。

PhoneGap + Sencha Touch开发人员

我现在已经广泛地为Sencha Touch和jQuery Mobile开发人员改编了PhoneGap静态服务器和PhoneGap开发人员应用程序。在Sencha Touch Live上检查一下。支持--qr QR代码和--localtunnel,可将您的静态服务器从台式机代理到防火墙之外的URL!大量使用。混合移动开发人员的大规模提速。

Cordova + Ionic框架开发人员

本地服务器和自动刷新功能包含在该ionic工具中。只需ionic serve从您的应用文件夹运行即可。更好的是... ionic serve --lab可以同时查看iOS和Android的自动刷新视图。


9
npm install live-server -g 如果您想要同样的东西,但是在检测到文件更改时自动重装

3
一个小“陷阱”-。默认情况下,http服务器在0.0.0.0上提供站点服务。因此,您必须指定IP地址以使其能够作为本地测试服务商正常工作:http-server -a localhost
JESii 2015年

1
是的... 0.0.0.0将使其绑定到所有IP网络设备(WiFi,电缆,蓝牙)的所有IP,在任何公共网络上都是一个坏主意,因为您可能会遭到黑客攻击。如果您只想在安全的防火墙网络中演示您的应用程序以显示其他应用程序或将其连接到同一网络上的移动设备,那还不错。
Tony O'Hagan

真正有用的小工具。我的服务器上运行着许多Node应用程序,因此我添加了“ -p”选项来选择8080以外的端口。例如:nohup http-server -p 60080&(在后台启动它,并让您与shell会话。)您应该确保端口对世界开放,例如:iptables -I INPUT 1 -p tcp --dport 60090 -j ACCEPT(在许多Linux系统上)
Blisterpeanuts

如何将其作为服务运行,因此即使关闭命令提示符也可以使用它。如果没有这个工具,有没有提供这种工具。
桑迪普桑迪

983

您可以将ConnectServeStatic与Node.js结合使用:

  1. 使用NPM安装连接和服务静态

    $ npm install connect serve-static
  2. 创建具有以下内容的server.js文件:

    var connect = require('connect');
    var serveStatic = require('serve-static');
    
    connect()
        .use(serveStatic(__dirname))
        .listen(8080, () => console.log('Server running on 8080...'));
  3. 使用Node.js运行

    $ node server.js

你现在可以去 http://localhost:8080/yourfile.html


24
出于教育的考虑,该想法是不使用现有的库,但我认为使用Express比其较低版本的Connect更好。
idophir 2011年

135
Express提供静态文件的部分只是Connect,所以我看不到使用Express提供静态文件的原因。但是是的,Express也可以做。
Gian Marco Gherardi

7
极好的建议。上面的步骤非常适合我的目的。感谢Gian,这是Express的链接,它显示了它是基于Connect构建的express.expressjs.com这是Express的使用方法:expressjs.com/guide.html
Jack Stone

10
无法为我工作,结果无法获取/test.html。我应该用目录名替换__dirname吗?
Timo

3
现在,connect已更改为版本3。因此,必须使用如miqid所述的serve-static。我发布了另一个带有连接v3完整代码的答案。
tomet

160

看看这个要点。我在这里复制它以供参考,但是要点已定期更新。

Node.JS静态文件Web服务器。将其放在路径中以启动任何目录中的服务器,并带有可选的port参数。

var http = require("http"),
    url = require("url"),
    path = require("path"),
    fs = require("fs"),
    port = process.argv[2] || 8888;

http.createServer(function(request, response) {

  var uri = url.parse(request.url).pathname
    , filename = path.join(process.cwd(), uri);

  fs.exists(filename, function(exists) {
    if(!exists) {
      response.writeHead(404, {"Content-Type": "text/plain"});
      response.write("404 Not Found\n");
      response.end();
      return;
    }

    if (fs.statSync(filename).isDirectory()) filename += '/index.html';

    fs.readFile(filename, "binary", function(err, file) {
      if(err) {        
        response.writeHead(500, {"Content-Type": "text/plain"});
        response.write(err + "\n");
        response.end();
        return;
      }

      response.writeHead(200);
      response.write(file, "binary");
      response.end();
    });
  });
}).listen(parseInt(port, 10));

console.log("Static file server running at\n  => http://localhost:" + port + "/\nCTRL + C to shutdown");

更新资料

要点确实处理css和js文件。我自己用过的。在“二进制”模式下使用读/写不是问题。这只是意味着文件不会被文件库解释为文本,并且与响应中返回的内容类型无关。

代码的问题是,您总是返回“文本/纯文本”的内容类型。上面的代码不返回任何内容类型,但是如果您仅将其用于HTML,CSS和JS,则浏览器可以推断出它们的类型。没有内容类型比错误类型更好。

通常,内容类型是Web服务器的配置。所以,如果这不能解决您的问题,我感到抱歉问题,,但是它对我来说是一个简单的开发服务器,并认为它可能会对其他人有所帮助。如果确实在响应中需要正确的内容类型,则需要将它们明确定义为joeytwiddle拥有,或者使用诸如Connect之类的具有合理默认值的库。这样做的好处是它简单且独立(没有依赖项)。

但我确实感觉到您的问题。所以这是组合的解决方案。

var http = require("http"),
    url = require("url"),
    path = require("path"),
    fs = require("fs")
    port = process.argv[2] || 8888;

http.createServer(function(request, response) {

  var uri = url.parse(request.url).pathname
    , filename = path.join(process.cwd(), uri);

  var contentTypesByExtension = {
    '.html': "text/html",
    '.css':  "text/css",
    '.js':   "text/javascript"
  };

  fs.exists(filename, function(exists) {
    if(!exists) {
      response.writeHead(404, {"Content-Type": "text/plain"});
      response.write("404 Not Found\n");
      response.end();
      return;
    }

    if (fs.statSync(filename).isDirectory()) filename += '/index.html';

    fs.readFile(filename, "binary", function(err, file) {
      if(err) {        
        response.writeHead(500, {"Content-Type": "text/plain"});
        response.write(err + "\n");
        response.end();
        return;
      }

      var headers = {};
      var contentType = contentTypesByExtension[path.extname(filename)];
      if (contentType) headers["Content-Type"] = contentType;
      response.writeHead(200, headers);
      response.write(file, "binary");
      response.end();
    });
  });
}).listen(parseInt(port, 10));

console.log("Static file server running at\n  => http://localhost:" + port + "/\nCTRL + C to shutdown");

3
这并不能真正解决“问题”。您将index.html作为二进制文件返回,并且不处理CSS和JS。
idophir 2012年

4
它确实处理css和js。它不会以二进制文件形式返回index.html。它只是以任何格式将数据复制到磁盘上。请参阅更新以获取更多说明。
乔纳森·陈

该代码的一个问题,区分大小写,在某些文件的Unix上,它给出404
Pradeep

2
请注意,“ path.exists和path.existsSync现在已被弃用。请使用fs.exists和fs.existsSync。” stackoverflow.com/a/5008295/259
大卫·赛克斯

3
请注意,fs.exists()现在也不建议使用。在fs.stat()而不是创建竞争条件时捕获错误。
马特

100

您不需要快递。您不需要连接。Node.js会原生进行http操作。您需要做的就是根据请求返回一个文件:

var http = require('http')
var url = require('url')
var fs = require('fs')

http.createServer(function (request, response) {
    var requestUrl = url.parse(request.url)    
    response.writeHead(200)
    fs.createReadStream(requestUrl.pathname).pipe(response)  // do NOT use fs's sync methods ANYWHERE on production (e.g readFileSync) 
}).listen(9615)    

一个更完整的示例,可确保请求无法访问基本目录下的文件,并进行适当的错误处理:

var http = require('http')
var url = require('url')
var fs = require('fs')
var path = require('path')
var baseDirectory = __dirname   // or whatever base directory you want

var port = 9615

http.createServer(function (request, response) {
    try {
        var requestUrl = url.parse(request.url)

        // need to use path.normalize so people can't access directories underneath baseDirectory
        var fsPath = baseDirectory+path.normalize(requestUrl.pathname)

        var fileStream = fs.createReadStream(fsPath)
        fileStream.pipe(response)
        fileStream.on('open', function() {
             response.writeHead(200)
        })
        fileStream.on('error',function(e) {
             response.writeHead(404)     // assume the file doesn't exist
             response.end()
        })
   } catch(e) {
        response.writeHead(500)
        response.end()     // end the response so browsers don't hang
        console.log(e.stack)
   }
}).listen(port)

console.log("listening on port "+port)

3
如果我没记错的话,此解决方案将不处理编码类型,因此对HTML页面和图像的请求将获得相同的编码。是不是
idophir 2014年

2
@idophir大多数情况下,编码无关紧要,浏览器根据所使用的html标签或其他信息来推断编码,或者他们猜测得很好。就像上面提到的某人一样,没有MIME类型总比错误类型好。您当然可以使用诸如node-mime之类的东西来找出文件的mime类型,但是完全符合Web的http服务器不在此问题范围之内。
英国电信

1
@Rooster您不需要任何特别的东西-简单node thisfile.js。它会运行,监听新的连接并返回新的结果,直到A.被信号关闭或B.某些疯狂的错误导致程序终止。
英国电信

1
@Rooster另一个臭名昭著的守护进程
Traveling Man

1
我最喜欢这个答案,但是有两个问题:1)在应返回404时返回200。要修复,我在“打开”回调中调用writeHead(200)。2)如果有错误,则插座保持打开状态;修复我在“错误”回调中调用response.destroy()的问题。
Paul Brannan

70

我认为您现在缺少的部分是您正在发送:

Content-Type: text/plain

如果要使用Web浏览器呈现HTML,则应将其更改为:

Content-Type: text/html

感谢您的快速回复。现在,该页面已加载,但没有CSS。如何获得加载了CSS和JS的标准html页面?
idophir

20
您需要开始扩展该服务器。现在,它只知道如何提供index.html-您需要教它如何通过它们自己的适当MIME类型为foo.css和foo.js提供服务。
CLEE

1
如果您不想提供静态文件,则可以将CSS放入<style>标签中。
基思

1
九年后,这确实应该被接受为正确答案。
rooch84

46

步骤1(在命令提示符内[希望您CD到文件夹]): npm install express

步骤2:建立档案server.js

var fs = require("fs");
var host = "127.0.0.1";
var port = 1337;
var express = require("express");

var app = express();
app.use(express.static(__dirname + "/public")); //use static files in ROOT/public folder

app.get("/", function(request, response){ //root dir
    response.send("Hello!!");
});

app.listen(port, host);

请注意,您也应该添加WATCHFILE(或使用nodemon)。上面的代码仅适用于简单的连接服务器。

步骤3:node server.jsnodemon server.js

如果您只想托管简单的HTTP服务器,则现在有一种更简单的方法。 npm install -g http-server

并打开目录并输入 http-server

https://www.npmjs.org/package/http-server


@STEEL,有什么方法可以自动启动节点服务器。我的意思是不进入目录路径,然后键入nodeserver,那么只有它会启动。我想启动像IIS这样的节点服务器。你能告诉我
吗-Vinoth

@Vinoth是的,有很多方法。您的确切目的或目标是什么,我可以为您提供帮助

@steel我想自动启动服务器,而无需在命令promt中提供节点服务器。这是我的要求,您能告诉我一些例子

您将需要使用某些工具,例如ThoughtWorks GO,该工具可以通过单击浏览器来执行终端命令。

32

快速方法:

var express = require('express');
var app = express();
app.use('/', express.static(__dirname + '/../public')); // ← adjust
app.listen(3000, function() { console.log('listening'); });

你的方式:

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

http.createServer(function (req, res) {
    console.dir(req.url);

    // will get you  '/' or 'index.html' or 'css/styles.css' ...
    // • you need to isolate extension
    // • have a small mimetype lookup array/object
    // • only there and then reading the file
    // •  delivering it after setting the right content type

    res.writeHead(200, {'Content-Type': 'text/html'});

    res.end('ok');
}).listen(3001);

19

我认为,与其处理switch语句,不如从字典中查找内容类型:

var contentTypesByExtension = {
    'html': "text/html",
    'js':   "text/javascript"
};

...

    var contentType = contentTypesByExtension[fileExtension] || 'text/plain';

是的,看上去比Eric B. Sowell使用的“切换”解决方案优雅得多(请参阅所选答案)。谢谢。
idophir 2011年

这个答案是完全没有上下文的……它是指此评论中的这个链接-stackoverflow.com/questions/6084360/…(是的,无论如何,互联网都坏了)
Mars Robertson

15

这基本上是连接版本3可接受答案的更新版本:

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

var app = connect();

app.use(serveStatic(__dirname, {'index': ['index.html']}));
app.listen(3000);

我还添加了默认选项,以便将index.html用作默认值。


13

您无需使用任何NPM模块即可运行简单的服务器,Node的库非常小,名为“ NPM Free Server ”:

50行代码,如果您请求文件或文件夹,则输出,如果工作失败,则将其显示为红色或绿色。小于1KB(最小)。


很棒的选择。提供html,css,js和图片。非常适合调试。只需将这段代码替换为您的server.js。
pollaris

2
希望我可以添加更多的赞!这很棒!我var filename = path.join(process.cwd() + '/dist/', uri);dist文件夹对服务器进行了少量更改。我将代码放进去server.js,当我键入内容时它才起作用npm start
John Henckel

如何将其作为服务运行,因此即使关闭命令提示符也可以使用它。如果没有这个工具,有没有提供这种工具。
桑迪普桑迪

13

如果您的PC上安装了节点,则可能是NPM;如果不需要NodeJS,则可以使用serve软件包:

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

npm install -g serve

2-服务您的静态文件夹:

serve <path> 
d:> serve d:\StaticSite

它会显示您要为您的静态文件夹提供服务的端口,只需导航至主机即可,如:

http://localhost:3000

如何将其作为服务运行,因此即使关闭命令提示符也可以使用它。如果没有这个工具,有没有提供这种工具。
桑迪普桑迪

这应该是公认的答案。因为它最简单,而且开箱即用。因此,如果您只运行没有路径的服务,则它将从当前文件夹(之前已CD播放过该文件夹)运行服务器。
ИгорРајачић

9

我在npm上找到了一个有趣的库,可能对您有用。它称为mime(npm install mimehttps://github.com/broofa/node-mime),它可以确定文件的mime类型。这是我使用它编写的Web服务器的示例:

var mime = require("mime"),http = require("http"),fs = require("fs");
http.createServer(function (req, resp) {
path  = unescape(__dirname + req.url)
var code = 200
 if(fs.existsSync(path)) {
    if(fs.lstatSync(path).isDirectory()) {
        if(fs.existsSync(path+"index.html")) {
        path += "index.html"
        } else {
            code = 403
            resp.writeHead(code, {"Content-Type": "text/plain"});
            resp.end(code+" "+http.STATUS_CODES[code]+" "+req.url);
        }
    }
    resp.writeHead(code, {"Content-Type": mime.lookup(path)})
    fs.readFile(path, function (e, r) {
    resp.end(r);

})
} else {
    code = 404
    resp.writeHead(code, {"Content-Type":"text/plain"});
    resp.end(code+" "+http.STATUS_CODES[code]+" "+req.url);
}
console.log("GET "+code+" "+http.STATUS_CODES[code]+" "+req.url)
}).listen(9000,"localhost");
console.log("Listening at http://localhost:9000")

这将服务于任何常规文本或图像文件(.html,.css,.js,.pdf,.jpg,.png,.m4a和.mp3是我测试过的扩展名,但从理论上讲,它应该适用于所有内容)

开发者须知

这是我得到的输出示例:

Listening at http://localhost:9000
GET 200 OK /cloud
GET 404 Not Found /cloud/favicon.ico
GET 200 OK /cloud/icon.png
GET 200 OK /
GET 200 OK /501.png
GET 200 OK /cloud/manifest.json
GET 200 OK /config.log
GET 200 OK /export1.png
GET 200 OK /Chrome3DGlasses.pdf
GET 200 OK /cloud
GET 200 OK /-1
GET 200 OK /Delta-Vs_for_inner_Solar_System.svg

注意unescape路径构造中的功能。这是为了允许文件名带有空格和编码字符。


8

编辑:

Node.js示例应用程序Node Chat具有您想要的功能。
在它的README.textfile
3中。步骤就是您要寻找的。

步骤1

  • 创建一个在端口8002上以hello world响应的服务器

第2步

  • 创建一个index.html并将其投放

第三步

  • 介绍util.js
  • 更改逻辑,以便提供任何静态文件
  • 在找不到文件的情况下显示404

第四步

  • 添加jquery-1.4.2.js
  • 添加client.js
  • 更改index.html以提示用户输入昵称

这是server.js

这是util.js


5
我不在乎 我只有index.html。我只想获取html + css + js。谢谢!
伊多菲尔

16
-1用于.readFileSync回调。通过node.js,我们使用非阻塞IO。请不要推荐Sync命令。
雷诺斯

@krmby,您好,感谢您的帮助。我真的很新。我下载了server.js和util.js。当我运行“ node server.js”并尝试使用浏览器访问该页面时,出现以下错误:TypeError:对象#<ServerResponse>在/var/www/hppy-site/util.js中没有方法“ close” :67:8在/var/www/hppy-site/util.js:56:4在[对象Object]。<anonymous>(fs.js:107:5)在[object Object..emit(events.js) :61:17)在afterRead(fs.js:970:12)在包装器(fs.js:245:17)上有什么想法吗?顺便说一句-当我下载您的项目并运行它时,情况也在发生。
伊多菲尔

1
抱歉。我正在使用新版本。用res.end()替换了res.close()
idophir 2011年

8

我这样做的方法是首先通过以下方式全局安装节点静态服务器

npm install node-static -g

然后导航到包含html文件的目录,并使用启动静态服务器static

进入浏览器并输入localhost:8080/"yourHtmlFile"


1
没有什么比一线制更胜一筹了。谢谢!
AndroidDev

如何将其作为服务运行,因此即使关闭命令提示符也可以使用它。如果没有这个工具,有没有提供这种工具。
桑迪普桑迪

7
var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');

http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/html'});
    // change the to 'text/plain' to 'text/html' it will work as your index page
    res.end(index);
}).listen(9615);

我想你在哪里寻找这个。在您的index.html中,只需用普通的html代码填充它-无论您想在其上呈现,例如:

<html>
    <h1>Hello world</h1>
</html>

7

基本上复制可接受的答案,但避免创建js文件。

$ node
> var connect = require('connect'); connect().use(static('.')).listen(8000);

发现它非常方便。

更新资料

从Express的最新版本开始,serve-static已成为独立的中间件。使用它来服务:

require('http').createServer(require('serve-static')('.')).listen(3000)

serve-static首先安装。


6

来自w3schools

创建节点服务器以提供所请求的任何文件非常容易,并且您不需要为其安装任何软件包

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

http.createServer(function (req, res) {
  var q = url.parse(req.url, true);
  var filename = "." + q.pathname;
  fs.readFile(filename, function(err, data) {
    if (err) {
      res.writeHead(404, {'Content-Type': 'text/html'});
      return res.end("404 Not Found");
    }  
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(data);
    return res.end();
  });
}).listen(8080);

http:// localhost:8080 / file.html

将从磁盘提供file.html



5

我使用下面的代码来启动一个简单的Web服务器,如果Url中没有提到文件,则它将呈现默认的html文件。

var http = require('http'),
fs = require('fs'),
url = require('url'),
rootFolder = '/views/',
defaultFileName = '/views/5 Tips on improving Programming Logic   Geek Files.htm';


http.createServer(function(req, res){

    var fileName = url.parse(req.url).pathname;
    // If no file name in Url, use default file name
    fileName = (fileName == "/") ? defaultFileName : rootFolder + fileName;

    fs.readFile(__dirname + decodeURIComponent(fileName), 'binary',function(err, content){
        if (content != null && content != '' ){
            res.writeHead(200,{'Content-Length':content.length});
            res.write(content);
        }
        res.end();
    });

}).listen(8800);

它将呈现所有js,css和图像文件以及所有html内容。

同意声明“ 没有内容的类型不是一个错误的一个更好的


5

我不确定这是否正是您想要的,但是,您可以尝试更改:

{'Content-Type': 'text/plain'}

对此:

{'Content-Type': 'text/html'}

这将使浏览器客户端将文件显示为html而不是纯文本。


1
这与现有答案不一样吗?

4
var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');

http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'html'});
res.end(index);
}).listen(9615);

//Just Change The CONTENT TYPE to 'html'

6
的定义Content-Typetext/html为:Content-Type := type "/" subtype *[";" parameter]
t.neese 2014年

1
这似乎将我在该文件夹中的所有文件都转换为html类型,即使它是js ...
ahnbizcad

很棒....
smack cherry

4

较详细的express 4.x版本,但提供目录列表,压缩,缓存并以最少的行数记录请求

var express = require('express');
var compress = require('compression');
var directory = require('serve-index');
var morgan = require('morgan'); //logging for express

var app = express();

var oneDay = 86400000;

app.use(compress());
app.use(morgan());
app.use(express.static('filesdir', { maxAge: oneDay }));
app.use(directory('filesdir', {'icons': true}))

app.listen(process.env.PORT || 8000);

console.log("Ready To serve files !")

4

疯狂的复杂答案在这里。如果您不打算处理nodeJS文件/数据库,而只想提供静态html / css / js / images作为您的问题建议,则只需安装pushstate-server模块或类似的模块即可;

这是将创建和启动迷你网站的“一个班轮”。只需将整个块粘贴到终端中的适当目录中即可。

mkdir mysite; \
cd mysite; \
npm install pushstate-server --save; \
mkdir app; \
touch app/index.html; \
echo '<h1>Hello World</h1>' > app/index.html; \
touch server.js; \
echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './app' });" > server.js; \
node server.js

打开浏览器并转到http:// localhost:3000。做完了

服务器将使用appdir作为根来提供文件。要添加其他资产,只需将它们放在该目录中即可。


2
如果您已经有静态变量,则可以使用以下命令:npm install pushstate-server --save; touch server.js; echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './' });" > server.js; node server.js
旋转

4

一个简单的解决方案已经有一些很好的解决方案nodejs server。如果live-reloading在更改文件时需要,还有另一种解决方案。

npm install lite-server -g

浏览目录并执行

lite-server

它将为您打开浏览器并进行实时重新加载。


4

Express函数sendFile完全可以满足您的需求,并且由于您希望从节点获得Web服务器功能,因此Express是自然的选择,然后提供静态文件就变得非常简单:

res.sendFile('/path_to_your/index.html')

在此处阅读更多信息:https : //expressjs.com/en/api.html#res.sendFile

一个带有节点的Express Web服务器的小例子:

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

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(8080);

运行它,并导航到http:// localhost:8080

为了对此进行扩展,以允许您提供诸如CSS和图像之类的静态文件,这是另一个示例:

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

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

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(8080);

因此,创建一个名为css的子文件夹,将您的静态内容放入其中,然后index.html就可以使用它,以方便参考,例如:

<link type="text/css" rel="stylesheet" href="/css/style.css" />

注意href中的相对路径!

瞧!


3

上面的大多数答案都很好地描述了内容的提供方式。我所需要的只是目录列表,以便可以浏览目录的其他内容。这是我为其他读者提供的解决方案:

'use strict';

var finalhandler = require('finalhandler');
var http = require('http');
var serveIndex = require('serve-index');
var serveStatic = require('serve-static');
var appRootDir = require('app-root-dir').get();
var log = require(appRootDir + '/log/bunyan.js');

var PORT = process.env.port || 8097;

// Serve directory indexes for reports folder (with icons)
var index = serveIndex('reports/', {'icons': true});

// Serve up files under the folder
var serve = serveStatic('reports/');

// Create server
var server = http.createServer(function onRequest(req, res){
    var done = finalhandler(req, res);
    serve(req, res, function onNext(err) {
    if (err)
        return done(err);
    index(req, res, done);
    })
});


server.listen(PORT, log.info('Server listening on: ', PORT));

2

这是我用来快速查看网页的最快的解决方案之一

sudo npm install ripple-emulator -g

从那时起,只需输入html文件的目录并运行

ripple emulate

然后将设备更改为Nexus 7横向。


5
Nexus 7可以做什么?
waeltken 2015年

2

我遇到的更简单的版本如下。出于教育目的,最好是因为它不使用任何抽象库。

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

var mimeTypes = {
  "html": "text/html",
  "mp3":"audio/mpeg",
  "mp4":"video/mp4",
  "jpeg": "image/jpeg",
  "jpg": "image/jpeg",
  "png": "image/png",
  "js": "text/javascript",
  "css": "text/css"};

http.createServer(function(req, res) {
    var uri = url.parse(req.url).pathname;
    var filename = path.join(process.cwd(), uri);
    fs.exists(filename, function(exists) {
        if(!exists) {
            console.log("not exists: " + filename);
            res.writeHead(200, {'Content-Type': 'text/plain'});
            res.write('404 Not Found\n');
            res.end();
            return;
        }
        var mimeType = mimeTypes[path.extname(filename).split(".")[1]];
        res.writeHead(200, {'Content-Type':mimeType});

        var fileStream = fs.createReadStream(filename);
        fileStream.pipe(res);

    }); //end path.exists
}).listen(1337);

现在转到浏览器并打开以下内容:

http://127.0.0.1/image.jpg

这里image.jpg应与此文件位于同一目录中。希望这可以帮助某人:)


您不应该从文件名中得知mime类型。
mwieczorek '18

注意:已弃用fs.exists(),直接替换为fs.existsSync()。
JWAspin

@mwieczorek应该如何划分?您是否想念他正在拆分文件扩展名?
詹姆斯·牛顿,

可能要使用:let mimeType = mimeTypes [filename.split(“。”)。pop()] || “应用程序/八位位组流”
James Newton,

1

我也可以推荐SugoiJS,它很容易设置,并提供了一个选项,可以快速开始编写,并且功能强大。

看看这里开始吧:http : //demo.sugoijs.com/ ,文档:https : //wiki.sugoijs.com/

它具有请求处理装饰器,请求策略和授权策略装饰器。

例如:

import {Controller,Response,HttpGet,RequestParam} from "@sugoi/server";

@Controller('/dashboard')
export class CoreController{
    constructor(){}

    @HttpGet("/:role")
    test(@RequestParam('role') role:string,
         @RequestHeader("role") headerRole:string){
        if(role === headerRole )
            return "authorized";
        else{
            throw new Error("unauthorized")
        }
    }
}

1

今天的大量图书馆非常容易。这里的答案是有效的。如果您想要另一个版本更快更简单地启动

当然首先要安装node.js。后来:

> # module with zero dependencies
> npm install -g @kawix/core@latest 
> # change /path/to/static with your folder or empty for current
> kwcore "https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express-static.js" /path/to/static

此处的内容为“ https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express-static.js ”(您无需下载它,我发布的原因是了解其工作原理)

// you can use like this:
// kwcore "https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express.js" /path/to/static
// kwcore "https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express.js" 

// this will download the npm module and make a local cache
import express from 'npm://express@^4.16.4'
import Path from 'path'

var folder= process.argv[2] || "."
folder= Path.resolve(process.cwd(), folder)
console.log("Using folder as public: " + folder)

var app = express() 
app.use(express.static(folder)) 
app.listen(8181)
console.log("Listening on 8181")
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.