我想运行一个非常简单的HTTP服务器。对example.com的每个GET请求都应该得到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);

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

我如何能提供一个单一的HTML页面与一些图像,CSS和JavaScript?


当前回答

这基本上是连接版本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作为默认选项。

其他回答

对于简单的nodejs服务器,已经有一些很好的解决方案。 如果你在修改文件时需要实时重新加载,还有一个解决方案。

npm install lite-server -g

导航您的目录并执行

lite-server

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

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

Node.JS静态文件web服务器。将它放在您的路径中以启动任何目录中的服务器,需要一个可选的端口参数。

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

更新

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

你的代码的问题是你总是返回一个“文本/纯”的内容类型。上面的代码不返回任何内容类型,但如果您只是将其用于HTML、CSS和JS,浏览器可以很好地推断出这些内容。没有内容类型总比错误的内容类型好。

通常情况下,content-type是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的公认答案的更新版本:

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

var app = connect();

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

我还添加了一个默认选项,以便index.html作为默认选项。

Local-web-server绝对值得一看!以下是自述的节选:

本地web服务器

一个精简的、模块化的web服务器,用于快速的全栈开发。

支持HTTP、HTTPS和HTTP2。 体积小,100%个性化。只加载和使用项目所需的行为。 附加一个自定义视图以个性化活动的可视化方式。 编程和命令行接口。

使用此工具:

构建任何类型的前端web应用程序(静态,动态,单页应用程序,渐进式web应用程序,React等)。 原型后端服务(REST API,微服务,websocket,服务器发送事件服务等)。 监控活动,分析性能,试验缓存策略等。

Local-web-server是一个lws发行版,它与一个有用的中间件“入门包”捆绑在一起。

剧情简介

这个包安装ws命令行工具(请参阅使用指南)。

静态网站

不带任何参数地运行ws将把当前目录作为一个静态网站托管。导航到服务器将呈现一个目录列表或您的index.html,如果该文件存在的话。

$ ws
Listening on http://mbp.local:8000, http://127.0.0.1:8000, http://192.168.0.100:8000

静态文件教程。

这个片段演示了静态托管和两个日志输出格式-开发和统计。

单页应用

为单页应用程序(一个带有客户端路由的应用程序,例如React或Angular应用程序)提供服务就像指定单页的名称一样简单:

$ ws --spa index.html

对于静态站点,对典型SPA路径(例如/user/1, /login)的请求将返回404 Not Found,因为该位置的文件不存在。然而,通过将index.html标记为SPA,你创建了以下规则:

如果一个静态文件被请求(例如/css/style.css),那么服务它,如果没有(例如/login),那么服务指定的SPA并处理路由客户端。

SPA教程。

URL重写和代理请求

另一个常见的用例是将某些请求转发到远程服务器。

下面的命令将博客帖子请求从任何以/posts/开头的路径代理到https://jsonplaceholder.typicode.com/posts/。例如,对/posts/1的请求将被代理到https://jsonplaceholder.typicode.com/posts/1。

$ ws --rewrite '/posts/(.*) -> https://jsonplaceholder.typicode.com/posts/$1'

重写教程。

这个片段演示了上面加上——static的用法。Extensions用于指定默认文件扩展名,——verbose用于监视活动。

HTTPS和HTTP2

对于HTTPS或HTTP2,分别传递——HTTPS或——HTTP2标志。请参阅wiki以获得进一步的配置选项和如何在浏览器中获得“绿色挂锁”的指南。

$ lws --http2
Listening at https://mba4.local:8000, https://127.0.0.1:8000, https://192.168.0.200:8000

我不确定这是否是你想要的,但是,你可以尝试改变:

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

:

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

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