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


当前回答

你可以在shell中输入这些

npx serve

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

其他回答

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

$ npm install http-server -g

现在你可以通过以下命令运行服务器:

$ cd MyApp

$ http-server

如果你使用的是NPM 5.2.0或更新版本,你可以使用http-server而不用安装npx。不建议在生产中使用,但这是快速让服务器在本地主机上运行的好方法。

$ npx http-server

或者,你可以试试这个,打开你的网络浏览器,启用CORS请求:

$ http-server -o --cors

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

$ http-server --help

NodeJitsu还有很多其他不错的特性和非常简单的部署。

特色餐叉

当然,您可以轻松地用自己的fork充值这些功能。你可能会发现这个项目现有的800多个分支中的一个已经完成了:

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

轻服务器:一个自动刷新的选择

一个很好的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代码Live服务器。

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

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

一些SPA框架包括一个内置的Webpack DevServer版本,可以检测源文件的更改,并触发SPA或PWA web应用程序的增量重建和补丁(称为热重新加载)。以下是一些流行的SPA框架可以做到这一点。

VueJS开发者

对于VueJS开发人员来说,最喜欢的是Quasar Framework,它包括了Webpack DevServer的开箱即用开关,以支持服务器端呈现(SSR)和代理规则,以解决CORS问题。它包括大量优化的组件,旨在适应移动和桌面。这些允许您为所有平台构建一个应用程序(SPA, SPA+SSR, PWA, PWA+SSR, Cordova和电容器移动AppStore应用程序,电子桌面节点+VueJS应用程序,甚至浏览器扩展)。

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

React框架开发人员

ReactJS开发人员还可以设置热重载。

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

Iconic是一个仅用于移动设备的混合组件框架,现在支持VueJS、React和Angular开发。ionic工具内置了一个具有自动刷新功能的本地服务器。只需从应用程序文件夹中运行ionic serve即可。更好的是……ionic serve -lab用于查看iOS和Android的自动刷新视图。

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

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

:

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

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

如果你的电脑上安装了节点,你可能有NPM,如果你不需要NodeJS的东西,你可以使用服务包来实现这个:

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

npm install -g serve

2 -提供静态文件夹:

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

它会告诉你你的静态文件夹正在被服务的端口,只需像这样导航到主机:

http://localhost:3000
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'

创建一个简单的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