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

我想运行一个非常简单的 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、图像）文件的行。

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

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

$ npm install http-server -g

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

$ cd MyApp

$ http-server

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

$ npx http-server

为了防止因错误输入软件包名称而导致安全和用户体验问题，npx 在安装任何内容之前都会进行提示。您可以使用 -y 或 --yes 选项抑制此提示：

$ npx -y http-server

或者，您可以尝试此操作，这将打开您的 Web 浏览器并启用 CORS 请求：

$ http-server -o --cors

如需更多选项，请查看的文档http-server在 GitHub 上，或运行：

$ http-server --help

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

功能分叉

当然，您可以使用自己的分叉轻松地补充这些功能。您可能会发现该项目现有 800 多个分支之一已完成此操作：

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

轻型服务器：自动刷新替代方案

一个不错的替代品http-server is 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-服务器可能就是您正在寻找的。

自动刷新编辑器

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

I use 实时服务器使用 Visual Studio 代码。

The 开源文本编辑器Brackets还包括 NodeJS 静态 Web 服务器。只需打开括号中的任意 HTML 文件，然后按“实时预览“它会启动一个静态服务器并在该页面上打开您的浏览器。浏览器将自动刷新每当您编辑并保存 HTML 文件时。这在测试自适应网站时特别有用。在多种浏览器/窗口大小/设备上打开您的 HTML 页面。保存您的 HTML 页面并立即查看您的自适应内容是否正常工作all自动刷新。

Web / SPA / PWA / 移动 / 桌面 / 浏览器扩展 Web 开发人员

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

VueJS 开发人员

对于 VueJS 开发者来说，最喜欢的是类星体框架其中包括开箱即用的 Webpack DevServer，带有支持服务器端渲染 (SSR) 的开关以及代理规则解决您的 CORS 问题。它包括大量专为适应移动和桌面而设计的优化组件。这些允许您构建one app适用于所有平台（SPA、SPA+SSR、PWA、PWA+SSR、Cordova 和 Capacitor Mobile AppStore 应用程序、Electron Desktop Node+VueJS 应用程序甚至浏览器扩展）。

另一种流行的是NuxtJS它还支持静态 HTML/CSS 代码生成以及 SSR 或无 SSR 构建模式以及其他 UI 组件套件的插件。

React 框架开发人员

ReactJS开发者还可以设置热重载.

Cordova/电容器 + Ionic 框架开发人员

标志性的是一个仅限移动设备混合组件框架，现在支持 VueJS、React 和 Angular 开发。具有自动刷新功能的本地服务器被嵌入到ionic工具。赶紧跑ionic serve从您的应用程序文件夹。甚至更好...ionic serve --lab并排查看 iOS 和 Android 的自动刷新视图。