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


当前回答

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

npm install node-static -g

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

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

其他回答

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

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

我觉得很方便。

更新

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

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

首先安装service -static。

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

这很容易,因为今天有大量的图书馆。这里的答案是功能性的。如果你想要另一个版本开始更快和简单

当然,首先要安装node.js。后:

> # module with zero dependencies
> npm install -g @kawix/core@latest 
> # change /path/to/static with your folder or empty for current
> kwcore "https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express-static.js" /path/to/static

这里是“https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express-static.js”的内容(你不需要下载,我贴出来是为了了解后面的工作原理)

// you can use like this:
// kwcore "https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express.js" /path/to/static
// kwcore "https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express.js" 

// this will download the npm module and make a local cache
import express from 'npm://express@^4.16.4'
import Path from 'path'

var folder= process.argv[2] || "."
folder= Path.resolve(process.cwd(), folder)
console.log("Using folder as public: " + folder)

var app = express() 
app.use(express.static(folder)) 
app.listen(8181)
console.log("Listening on 8181")

最简单的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的自动刷新视图。

Node.js webserver


没有第三方框架;允许查询字符串;添加尾随斜杠;处理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...')});