我想运行一个非常简单的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?


当前回答

我认为你现在忽略的部分是你在发送:

Content-Type: text/plain

如果你想要一个web浏览器来呈现HTML,你应该将其更改为:

Content-Type: text/html

其他回答

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

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

我觉得很方便。

更新

在Express的最新版本中,service -static已经成为一个单独的中间件。用这个来服务:

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

首先安装service -static。

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

npm install node-static -g

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

打开浏览器,输入localhost:8080/"yourHtmlFile"。

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

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

你不需要使用任何npm模块来运行一个简单的服务器,有一个非常小的库叫做“npm Free server”用于Node:

50行代码 如果您正在请求文件或文件夹,则输出 如果失败或工作,则显示红色或绿色 大小小于1KB(缩小版) 完全评论,所以你可以根据需要调整它

npm-free-server(在GitHub)

创建一个简单的Node.js Web服务器,并从一个文件异步服务一个HTML页面

创建我的第一个node.js服务器时,我找到了一个简单而有效的方法来做到这一点。

我们可以在开始时加载一次HTML,而不是为每个请求加载HTML。然后返回我们在启动时加载的数据。

const host = "localhost";
const port = 5000;
const http = require("HTTP");
const fs = require("fs").promises;

let htmlFile;
const reqListenerFunc = function (req, resp) {
    resp.setHeader("Content-Type", "text/html");
    resp.writeHead(200);
    resp.end(htmlFile);
};
const simpleServer = http.createServer(reqListenerFunc);

// // Using Arrow function directly
// const simpleServer = http.createServer( (req, resp) => {
//     resp.setHeader("Content-Type", "text/html");
//     resp.writeHead(200);
//     resp.end(htmlFile);
// });

fs.readFile(__dirname + "/index.html")
    .then(content => {
        htmlFile = content;
        simpleServer.listen(port, host, () => {
            console.log(`Node.js web server is running on http://${host}:${port}`);
        });
    })
    .catch(err => {
        console.error(`Cannot read index.html file. <br> Error: ${err}`);
        process.exit(1);
    });

阅读更多信息:https://www.digitalocean.com/community/tutorials/how-to-create-a-web-server-in-node-js-with-the-http-module