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

Question

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

Answer 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

当然，您可以使用自己的 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 服务器

如果您需要为原型(prototype)项目创建一个简单的 REST 服务器，那么 json-server可能就是你要找的。

自动刷新编辑器

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

我使用 Live Server使用 Visual Studio Code。

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，带有支持服务器端渲染 (SSR) 和 proxy rules 的开关解决您的 CORS 问题。它包括大量旨在适应移动和桌面的优化组件。这些允许您为所有平台(SPA、SPA+SSR、PWA、PWA+SSR、Cordova 和 Capacitor Mobile AppStore 应用程序、Electron Desktop Node+VueJS 应用程序甚至浏览器扩展)构建一个应用程序。

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

React 框架开发人员

ReactJS开发者也可以setup hot reloading .

Cordova/Capacitor + Ionic 框架开发人员

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