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

Posted 2023-02-26

技术标签:

【中文标题】使用 Node.js 作为简单的 Web 服务器【英文标题】：Using Node.js as a simple web server 【发布时间】：2011-08-30 08:57:24 【问题描述】：

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

如何提供包含一些图像、CSS 和 JavaScript 的单个 HTML 页面？

【问题讨论】：

看看 npm 模块“connect”。它提供了这样的基本功能，并且是许多设置和其他软件包的基础。您应该将您的解决方案作为答案并将其标记为正确。我找到了由 Eric B. Sowell 提出的完美解决方案，名为 Serving static files from node js。阅读全文。强烈推荐。看看我写的一个叫做 Cachemere 的模块。它还会自动缓存您的所有资源。 github.com/topcloud/cachemere local-web-server 是一个很好的例子 【参考方案1】：

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

$ npm install http-server -g

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

$ cd MyApp

$ http-server

如果您使用的是 NPM 5.2.0 或更高版本，则可以使用 http-server 而无需使用 npx 安装它。不建议在生产中使用此方法，但它是快速让服务器在 localhost 上运行的好方法。

$ npx http-server

或者，您可以试试这个，它会打开您的网络浏览器并启用 CORS 请求：

$ http-server -o --cors

如需更多选项，请查看documentation for http-server on GitHub，或运行：

$ http-server --help

许多其他不错的功能和对 NodeJits 的简单部署。

功能分叉

当然，您可以使用自己的 fork 轻松地补充功能。您可能会发现它已经在该项目的现有 800 多个分支之一中完成：

https://github.com/nodeapps/http-server/network

Light Server：自动刷新替代方案

http-server 的一个不错的替代品是light-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 工具都包含一个网络服务器，该服务器将监视您的源文件并在您的网页发生更改时自动刷新它们。

我在 Visual Studio Code 中使用 Live Server。

open source 文本编辑器 Brackets 还包括一个 NodeJS 静态 Web 服务器。只需打开括号中的任何 HTML 文件，按“实时预览”，它就会启动一个静态服务器并在页面上打开您的浏览器。每当您编辑和保存 HTML 文件时，浏览器都会自动刷新。这在测试自适应网站时特别有用。在多个浏览器/窗口大小/设备上打开您的 HTML 页面。保存您的 HTML 页面并立即查看您的自适应内容是否正在工作，因为它们全部自动刷新。

Web / SPA / PWA / Mobile / Desktop / Browser Ext Web 开发人员

一些 SPA 框架包含一个内置版本的 Webpack DevServer，它可以检测源文件更改并触发您的 SPA 或 PWA Web 应用程序的增量重建和修补（称为热重载）。这里有一些流行的 SPA 框架可以做到这一点。

VueJS 开发人员

对于 VueJS 开发人员来说，最喜欢的是 Quasar Framework，它包括开箱即用的 Webpack DevServer 以及支持服务器端渲染 (s-s-r) 的开关和 proxy rules 来解决您的 CORS 问题。它包括大量旨在适应移动和桌面的优化组件。这些允许您为所有平台（SPA、SPA+s-s-r、PWA、PWA+s-s-r、Cordova 和 Capacitor Mobile AppStore 应用程序、Electron Desktop Node+VueJS 应用程序甚至浏览器扩展）构建一个应用程序。

另一个流行的是NuxtJS，它还支持静态 HTML/CSS 代码生成以及 s-s-r 或非 s-s-r 构建模式，以及其他 UI 组件套件的插件。

React 框架开发人员

ReactJS开发者也可以setup hot reloading。

Cordova/Capacitor + Ionic 框架开发人员

Iconic 是一个仅限移动设备混合组件框架，现在支持 VueJS、React 和 Angular 开发。 ionic 工具中包含具有自动刷新功能的本地服务器。只需从您的应用程序文件夹中运行ionic serve。更好...ionic serve --lab 来查看 ios 和 android 的自动刷新并排视图。

【讨论】：

npm install live-server -g 如果你想要同样的东西，但在检测到文件更改时自动重新加载一点“陷阱”--。 http-server 默认在 0.0.0.0 为站点提供服务。因此，您必须指定一个 IP 地址才能使其作为本地测试服务器正常工作：http-server -a localhost Yes ... 0.0.0.0 将使其绑定到所有 IP 联网设备（WiFi、电缆、蓝牙）的所有 IP，这在任何公共网络上都是一个坏主意，因为您可能会被黑客入侵.如果您只是想在安全的防火墙网络中演示您的应用程序以向其他人展示或将其连接到同一网络上的移动设备，这还不错。非常有用的小工具。我的服务器上运行了很多 Node 应用程序，所以我添加了一个“-p”选项来选择 8080 以外的端口。例如：nohup http-server -p 60080 &（在后台启动它并让您断开与shell session。）你应该确保端口对世界开放，例如：iptables -I INPUT 1 -p tcp --dport 60090 -j ACCEPT（在许多Linux系统上）如何将它作为服务运行，这样我即使关闭命令提示符也可以使用它。如果没有这个，有没有工具提供这种。【参考方案2】：

注意：这个答案来自 2011 年。但是，它仍然有效。

您可以将 Connect 和 ServeStatic 与 Node.js 一起使用：

使用 NPM 安装 connect 和 serve-static

 $ npm install connect serve-static

使用此内容创建 server.js 文件：

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

 connect()
     .use(serveStatic(__dirname))
     .listen(8080, () => console.log('Server running on 8080...'));

使用 Node.js 运行

 $ node server.js

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

【讨论】：

出于教育原因，我们的想法是不使用现有库，但我认为使用 Express 比其较低级别的版本 Connect 更好。 Express 提供静态文件的部分只是 Connect，所以我看不出使用 Express 提供静态文件的原因。但是，是的，Express 也可以完成这项工作。很好的建议。上述步骤非常适合我的目的。感谢 Gian，这里是 Express 的链接，它显示它是基于 Connect 构建的，expressjs.com 这是如何使用 Express：expressjs.com/guide.html 对我不起作用，结果无法获取 /test.html。我应该用目录名替换 __dirname 吗？现在，connect 已更改为版本 3。因此，必须使用 miqid 描述的 serve-static。我发布了另一个答案，其中包含连接 v3 的完整代码。【参考方案3】：

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

Node.JS 静态文件网络服务器。将它放在您的路径中以启动任何目录中的服务器，采用可选的端口参数。

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 文件。我自己用过。在“二进制”模式下使用读/写不是问题。这只是意味着文件不会被文件库解释为文本，并且与响应中返回的内容类型无关。

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

通常，内容类型是您的网络服务器的配置。因此，如果这不能解决您的问题，我很抱歉，但它作为一个简单的开发服务器对我有用，并认为它可能会帮助其他人。如果您在响应中确实需要正确的内容类型，您要么需要像 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");

【讨论】：

这并不能真正解决“问题”。您将 index.html 作为二进制文件返回，并且不处理 css 和 js。它确实处理 css 和 js。它不会将 index.html 作为二进制文件返回。它只是以任何格式从磁盘复制数据。请参阅更新以获取更多说明。代码的一个问题，它区分大小写，在 unix 上对于某些文件，它给出 404 请注意，“path.exists 和 path.existsSync 现在已弃用。请使用 fs.exists 和 fs.existsSync。” ***.com/a/5008295/259 请注意，fs.exists() 现在也已弃用。在fs.stat() 上捕获错误，而不是创建竞争条件。【参考方案4】：

您不需要快递。你不需要连接。 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)

【讨论】：

如果我没记错的话，这个解决方案不考虑编码类型，因此对 HTML 页面和图像的请求将获得相同的编码。不是吗？ @idophir 大多数情况下，编码并不重要，浏览器会根据使用的 html 标签或其他信息推断它，或者他们猜得很好。就像上面提到的那样，没有 MIME 类型比错误的更好。您当然可以使用 node-mime 之类的工具来确定文件的 mime 类型，但完全符合 Web 标准的 http 服务器不在此问题的范围内。 @Rooster 你不需要任何特别的东西 - 只需 node thisfile.js。它会运行，监听新的连接并返回新的结果，直到 A. 它被信号关闭，或者 B. 一些疯狂的错误以某种方式导致程序终止。 @Rooster 在github.com/Unitech/pm2找到另一个有名望的守护进程@ 我最喜欢这个答案，但有两个问题：1）它应该返回404，它返回200；为了解决这个问题，我在“打开”回调中调用 writeHead(200)。 2）如果有错误，则socket保持打开状态；修复我在“错误”回调中调用 response.destroy()。【参考方案5】：

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

Content-Type: text/plain

如果您希望 Web 浏览器呈现 HTML，则应将其更改为：

Content-Type: text/html

【讨论】：

感谢您的快速回复。该页面现在加载但没有 CSS。如何获得加载了 CSS 和 JS 的标准 html 页面？您需要开始扩展该服务器。现在它只知道如何提供 index.html - 你现在需要教它如何提供 foo.css 和 foo.js，并使用它们自己的适当 MIME 类型。如果你不想提供静态文件，你可以把你的css放到<style>标签中。九年后，这确实应该被接受为正确答案。【参考方案6】：

第 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.js 或 nodemon server.js

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

然后打开我们的目录并输入http-server

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

【讨论】：

@STEEL，有没有办法自动启动节点服务器。我的意思是不转到目录路径然后键入 nodeserver 然后只有它会启动。我想启动像 IIS 这样的节点服务器。你能告诉我吗 @Vinoth 是的，有很多方法。您的具体目的或目标是什么，我可以帮助您 @steel 我想自动启动服务器而不在命令提示符中提供节点服务器。这是我的要求，你能告诉我一些例子吗你需要使用ThoughtWorks GO之类的工具，它可以通过点击浏览器执行终端命令。【参考方案7】：

快捷方式：

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

【讨论】：

【参考方案8】：

比起处理 switch 语句，我认为从字典中查找内容类型更简洁：

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

...

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

【讨论】：

是的，看起来比 Eric B. Sowell 使用的“switch”解决方案优雅得多（请参阅所选答案）。谢谢。这个答案完全断章取义......它指的是这个评论中的这个链接-***.com/questions/6084360/…（是的，无论如何，互联网坏了）【参考方案9】：

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

【讨论】：

【参考方案10】：

您不需要使用任何 NPM 模块来运行简单的服务器，有一个非常小的库，名为“NPM 免费服务器”用于 Node：

NPM Free Server on GitHub

50 行代码，如果您正在请求文件或文件夹，则输出，如果工作失败，则将其显示为红色或绿色。大小小于 1KB（已缩小）。

【讨论】：

绝佳选择。提供 html、css、js 和图像。非常适合调试。只需将此代码替换为您的 server.js。我希望我能添加更多的赞成票！这很棒！我从 dist 文件夹对服务器进行了小改动 var filename = path.join(process.cwd() + '/dist/', uri);。我将代码放入 server.js，当我输入 npm start 时它正常工作 如何将它作为服务运行，这样我即使关闭命令提示符也可以使用它。如果不是这个，有没有工具提供这种。【参考方案11】：

如果你在你的 PC 上安装了 node，可能你有 NPM，如果你不需要 NodeJS 的东西，你可以使用serve 包：

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

npm install -g serve

2 - 为您的静态文件夹提供服务：

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

它会显示你的静态文件夹正在服务哪个端口，只需导航到主机，如下所示：

http://localhost:3000

【讨论】：

如何将它作为服务运行，这样我即使关闭命令提示符也可以使用它。如果没有这个，有没有工具提供这种。这应该是公认的答案。因为它最简单，而且开箱即用。因此，如果您只运行没有路径的服务，它将从当前文件夹（您之前有 CD-ed 的文件夹）运行服务器。我喜欢这个。我使用它的唯一问题是无法为 URL 指定基本名称。例如/public/<map from here>【参考方案12】：

你可以在你的shell中输入这些

npx serve

回购：https://github.com/zeit/serve.

【讨论】：

提供选项-s或--single，服务器将所有未找到的请求重写为index.html。所以npx serve -s 就像 OP 想要的那样工作。【参考方案13】：

我在 npm 上发现了一个有趣的库，它可能对你有用。它被称为 mime（npm install mime 或 https://github.com/broofa/node-mime），它可以确定文件的 mime 类型。这是我使用它编写的网络服务器的示例：

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 函数。这是为了允许带有空格和编码字符的文件名。

【讨论】：

【参考方案14】：

编辑：

Node.js 示例应用 Node Chat 具有您想要的功能。这是README.textfile 3. 步就是你要找的。p>

第一步
创建一个在端口 8002 上响应 hello world 的服务器
第二步
创建一个 index.html 并提供它
第三步
介绍util.js 更改逻辑以提供任何静态文件在找不到文件的情况下显示 404
第四步
添加 jquery-1.4.2.js 添加client.js 更改 index.html 以提示用户输入昵称

这里是server.js

这里是util.js

【讨论】：

我不在乎。我只有 index.html。我只想加载 html+css+js。谢谢！ -1 for .readFileSync 在回调中。对于 node.js，我们使用非阻塞 IO。请不要推荐Sync 命令。嗨@krmby，感谢您的帮助。我真的很陌生。我下载了 server.js 和 util.js。当我运行“node server.js”并尝试使用浏览器访问该页面时，我收到此错误：TypeError: Object # has no method 'close' at /var/www/hppy-site/util.js :67:8 at /var/www/hppy-site/util.js:56:4 at [object Object]. (fs.js:107:5) at [object Object].emit (events.js :61:17) at afterRead (fs.js:970:12) at wrapper (fs.js:245:17) 有什么想法吗？顺便说一句 - 当我下载您的项目并运行它时也会发生同样的情况。对不起。我正在使用一个新版本。将 res.close() 替换为 res.end()【参考方案15】：

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

npm install node-static -g

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

转到浏览器并输入localhost:8080/"yourHtmlFile"。

【讨论】：

没有什么比单线更胜一筹了。谢谢！如何将它作为服务运行，这样我即使关闭命令提示符也可以使用它。如果不是这个，有没有工具提供这种。【参考方案16】：

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>

【讨论】：

【参考方案17】：

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

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

觉得很方便。

更新

在 Express 的最新版本中，serve-static 已成为一个单独的中间件。使用它来服务：

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

先安装serve-static。

【讨论】：

【参考方案18】：

我使用下面的代码来启动一个简单的 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 内容。

同意声明“没有比错误更好的内容类型”

【讨论】：

【参考方案19】：

来自 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

【讨论】：

【参考方案20】：

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

'Content-Type': 'text/plain'

到这里：

'Content-Type': 'text/html'

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

【讨论】：

这不是和this existing answer一样吗？【参考方案21】：

Express 函数 sendFile 完全符合您的需求，并且由于您希望节点提供 Web 服务器功能，因此 express 是自然的选择，然后提供静态文件变得如此简单：

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

在这里阅读更多：https://expressjs.com/en/api.html#res.sendFile

node 的 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 中的相对路径！

瞧！

【讨论】：

【参考方案22】：

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'

【讨论】：

Content-Type 应该是 text/html，因为它是这样定义的：Content-Type := type "/" subtype *[";" parameter]。这似乎把我在那个文件夹里的所有文件都变成了html类型，即使它是js...【参考方案23】：

一个稍微冗长的 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 !")

【讨论】：

【参考方案24】：

这里有大量复杂的答案。如果您不打算处理 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。完成。

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

【讨论】：

如果你已经有了静态，你可以使用下面的：

npm install pushstate-server --save; touch server.js; echo "var server = require('pushstate-server');server.start( port: 3000, directory: './' );" &gt; server.js; node server.js

【参考方案25】：

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

npm install lite-server -g

浏览您的目录并执行

lite-server

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

【讨论】：

【参考方案26】：

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

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

【讨论】：

【参考方案27】：

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

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 类型。注意：fs.exists() 已被弃用，fs.existsSync() 是直接替代品。 @mwieczorek 应该如何预测？您是否错过了他正在拆分文件扩展名？可能要使用： let mimeType = mimeTypes[ filename.split(".").pop() ] || “应用程序/八位字节流”【参考方案28】：

local-web-server 绝对值得一看！以下是自述文件的摘录：

本地网络服务器

用于快速全栈开发的精简、模块化 Web 服务器。

支持 HTTP、HTTPS 和 HTTP2。小巧且 100% 可个性化。仅加载和使用您的项目所需的行为。附加自定义视图以个性化可视化活动的方式。编程和命令行界面。

使用此工具：

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

Local-web-server 是 lws 的分发版，捆绑了有用的中间件“入门包”。

概要

这个包安装了ws 命令行工具（看看usage guide）。

静态网站

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

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

Static files tutorial.

此剪辑演示了静态托管以及几种日志输出格式 - dev 和 stats。

单页应用

提供单页应用程序（具有客户端路由的应用程序，例如 React 或 Angular 应用程序）就像指定单页的名称一样简单：

$ ws --spa index.html

对于静态站点，对典型 SPA 路径（例如 /user/1、/login）的请求将返回 404 Not Found，因为该位置的文件不存在。但是，通过将 index.html 标记为 SPA，您可以创建以下规则：

如果请求了静态文件（例如 /css/style.css），则提供它，如果没有（例如 /login），则提供指定的 SPA 并在客户端处理路由。

SPA tutorial.

URL 重写和代理请求

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

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

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

Rewrite tutorial.

此剪辑演示了上述以及使用--static.extensions 指定默认文件扩展名和--verbose 来监控活动。

HTTPS 和 HTTP2

对于 HTTPS 或 HTTP2，分别传递 --https 或 --http2 标志。 See the wiki 了解更多配置选项和如何在浏览器中获取“绿色挂锁”的指南。

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

【讨论】：

【参考方案29】：

Node.js 网络服务器从头开始

没有第三方框架；允许查询字符串；添加尾部斜杠；处理 404

创建一个public_html 子文件夹并将所有内容放入其中。

要点： https://gist.github.com/veganaize/fc3b9aa393ca688a284c54caf43a3fc3

var fs = require('fs');

require('http').createServer(function(request, response) 
  var path = 'public_html'+ request.url.slice(0,
      (request.url.indexOf('?')+1 || request.url.length+1) - 1);
      
  fs.stat(path, function(bad_path, path_stat) 
    if (bad_path) respond(404);
    else if (path_stat.isDirectory() && path.slice(-1) !== '/') 
      response.setHeader('Location', path.slice(11)+'/');
      respond(301);
     else fs.readFile(path.slice(-1)==='/' ? path+'index.html' : path,
          function(bad_file, file_content) 
      if (bad_file) respond(404);
      else respond(200, file_content);
    );
  );
 
  function respond(status, content) 
    response.statusCode = status;
    response.end(content);
  
).listen(80, function()console.log('Server running on port 80...'));

【讨论】：

【参考方案30】：

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

sudo npm install ripple-emulator -g

从此进入你的html文件所在目录并运行

ripple emulate

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

【讨论】：

Nexus 7 有什么用？

以上是关于使用 Node.js 作为简单的 Web 服务器的主要内容，如果未能解决你的问题，请参考以下文章

使用 node js 配置本地服务器

Node.js Web 模块

Node.js：创建应用+回调函数（阻塞/非阻塞）

Node.js简介

青训营Node.js基础 - Web应用开发 - 开发调试 - 线上部署