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

我想运行一个非常简单的HTTP服务器,对example.com的每个GET请求都应该得到index.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?

1290232 次浏览

编辑:

Node.js示例应用程序节点聊天具有您想要的功能。
README.textfile
3.步骤就是你要找的。

step1

  • 在端口8002上创建一个响应hello world的服务器

step2

  • 创造index.html并为之服务

step3

  • 介绍util.js
  • 更改逻辑以提供任何静态文件
  • 如果没有找到文件,则显示404

step4

  • 添加jquery-1.4.2.js
  • 添加client.js
  • 更改index.html以提示用户输入昵称

这里是server.js

这里是util.js

我认为你现在错过的部分是你正在发送:

Content-Type: text/plain

如果您希望Web浏览器呈现超文本标记语言,您应该将其更改为:

Content-Type: text/html

我认为从字典中查找内容类型会更简洁,而不是处理Switch语句:

var contentTypesByExtension = {'html': "text/html",'js':   "text/javascript"};
...
var contentType = contentTypesByExtension[fileExtension] || 'text/plain';

说明:这个答案来自2011年。但是,它仍然有效。

您可以将连接静态服务与Node.js一起使用:

  1. 使用NPM安装连接和服务静态

     $ npm install connect serve-static
  2. 使用此内容创建server.js文件:

     var connect = require('connect');var serveStatic = require('serve-static');
    connect().use(serveStatic(__dirname)).listen(8080, () => console.log('Server running on 8080...'));
  3. Node.js

     $ node server.js

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

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

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

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

你的代码的问题是你总是返回一个内容类型“文本/纯”。上面的代码没有返回任何内容类型,但是如果你只是将它用于超文本标记语言,CSS和JS,浏览器可以很好地推断出这些。没有内容类型比错误的更好。

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

Step1(内部命令提示符[我希望你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 dirresponse.send("Hello!!");});
app.listen(port, host);

请注意,您也应该添加WATCHFILE(或使用nodeme)。上面的代码仅适用于简单的连接服务器。

步骤3:node server.jsnodemon server.js

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

打开我们的目录并键入http-server

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

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'

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

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

最简单Node.js服务器是:

$ npm install http-server -g

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

$ cd MyApp
$ http-server

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

$ npx http-server

或者,您可以尝试这样做,它会打开您的Web浏览器并启用CORS请求:

$ http-server -o --cors

有关更多选项,请查看在GitHub上留档#0,或运行:

$ http-server --help

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

功能分叉

当然,您可以使用自己的分叉轻松地为功能充值。您可能会发现它已经在该项目现有的800多个分叉中的一个中完成了:

Light Server:自动刷新替代方案

http-server的一个不错的替代方案是#1。它支持文件查看和自动刷新以及许多其他功能。

$ 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服务器,那么服务器名称可能就是您想要的。

自动刷新编辑器

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

我将Live Server与Visual Studio Code一起使用。

开源文本编辑器支架还包括一个NodeJS静态Web服务器。只需在括号中打开任何超文本标记语言文件,按“实时预览”,它就会启动一个静态服务器,并在页面上打开您的浏览器。每当您编辑和保存超文本标记语言文件时,浏览器都会自动刷新。这在测试自适应网站时特别有用。在多个浏览器/窗口大小/设备上打开您的超文本标记语言页面。保存您的文本超标记语言页面,并立即查看您的自适应东西是否在它们所有自动刷新时工作。

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

一些SPA框架包含webpack开发服务器的内置版本,可以检测源文件更改并触发SPA或PWA Web应用程序的增量重建和补丁(称为热重载)。这里有一些流行的SPA框架可以做到这一点。

VueJS开发者

对于VueJS开发人员来说,最喜欢的是类星体框架,它包括开箱即用的Webpack DevServer,带有支持服务端渲染(SSR)的开关和代理规则来解决您的CORS问题。它包括大量旨在适应移动和桌面的优化组件。这些允许您为所有平台构建一个应用(SPA、SPA+SSR、PWA、PWA+SSR、科尔多瓦和电容器移动应用商店应用程序、电子桌面节点+VueJS应用程序甚至浏览器扩展)。

另一个流行的是NuxtJS,它还支持静态超文本标记语言/CSS代码生成以及SSR或无SSR构建模式,以及其他UI组件套件的插件。

React框架开发者

ReactJS开发人员也可以设置热重装

科尔多瓦/电容器+离子框架开发人员

Iconic是一个仅移动混合组件框架,现在支持VueJS,React和Angular开发。具有自动刷新功能的本地服务器被烘焙到ionic工具中。只需从您的应用程序文件夹中运行ionic serve。更好的是…#2可以并排查看iOS和Android的自动刷新视图。

我在npm上发现了一个有趣的库,可能对你有用。它被称为mime(npm install mimehttps://github.com/broofa/node-mime),它可以确定文件的mime类型。这是我使用它编写的Web服务器示例:

var mime = require("mime"),http = require("http"),fs = require("fs");http.createServer(function (req, resp) {path  = unescape(__dirname + req.url)var code = 200if(fs.existsSync(path)) {if(fs.lstatSync(path).isDirectory()) {if(fs.existsSync(path+"index.html")) {path += "index.html"} else {code = 403resp.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 = 404resp.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:9000GET 200 OK /cloudGET 404 Not Found /cloud/favicon.icoGET 200 OK /cloud/icon.pngGET 200 OK /GET 200 OK /501.pngGET 200 OK /cloud/manifest.jsonGET 200 OK /config.logGET 200 OK /export1.pngGET 200 OK /Chrome3DGlasses.pdfGET 200 OK /cloudGET 200 OK /-1GET 200 OK /Delta-Vs_for_inner_Solar_System.svg

注意路径构造中的unescape函数。这是为了允许带有空格和编码字符的文件名。

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

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

发现它非常方便。

更新

从最新版本的Express开始,服务静态已成为一个单独的中间件。使用它来服务:

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

先安装serve-static

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

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

您不需要Express。您不需要连接。Node.js自然执行超文本传输协议。您需要做的就是根据请求返回一个文件:

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 baseDirectoryvar 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 existresponse.end()})} catch(e) {response.writeHead(500)response.end()     // end the response so browsers don't hangconsole.log(e.stack)}}).listen(port)
console.log("listening on port "+port)
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 pageres.end(index);}).listen(9615);

我想你在哪里寻找这个。在你的index.html,只需用普通的html代码填充它-无论你想在上面呈现什么,比如:

<html><h1>Hello world</h1></html>

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

sudo npm install ripple-emulator -g

从那时起,只需输入您的html文件的目录并运行

ripple emulate

然后将设备更改为Nexus 7景观。

这里有大量复杂的答案。如果您不打算处理nodeJS文件/数据库,而只想按照您的问题建议提供静态html/css/js/图像,那么只需安装推送状态服务器模块或类似模块;

这是一个“单行程序”,它将创建和启动一个迷你站点。只需将整个块粘贴到您的终端中的适当目录中。

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目录作为根来提供文件。要添加其他资产,只需将它们放置在该目录中。

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

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

对此:

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

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

你不需要使用任何npm模块来运行一个简单的服务器,有一个名为“npm免费服务器”的非常小的Node库:

  • 50行代码
  • 如果您请求文件或文件夹,则输出
  • 给它一个红色或绿色的颜色,如果它失败或工作
  • 大小小于1KB(缩小)
  • 完全评论,所以你可以根据需要调整它

npm-free server(在GitHub上)

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

npm install node-static -g

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

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

快速的方法:

var express = require('express');var app = express();app.use('/', express.static(__dirname + '/../public')); // ← adjustapp.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);

上面的大多数答案都非常好地描述了内容是如何提供的。我所寻找的是额外的目录列表,以便可以浏览目录的其他内容。这是我对其他读者的解决方案:

'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 foldervar serve = serveStatic('reports/');
// Create servervar 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));

如果你的PC上安装了node,可能你有NPM,如果你不需要NodeJS的东西,你可以使用服务包:

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

npm install -g serve

2-提供您的静态文件夹:

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

它将显示您的静态文件夹正在提供哪个端口,只需导航到主机,如下所示:

http://localhost:3000

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

npm install lite-server -g

浏览您的目录并执行

lite-server

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

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

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应该与此文件位于同一目录中。希望对大家有所帮助:)

从w3的学校

创建一个节点服务器来提供所请求的任何文件是很容易的而且你不需要为它安装任何包

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

我也可以推荐SugoiJS,它非常容易设置,并提供了一个快速开始编写的选项,并且具有强大的功能。

看一下这里开始:http://demo.sugoijs.com/,留档:https://wiki.sugoijs.com/

它具有请求处理装饰器、请求策略和授权策略装饰器。

例如:

import {Controller,Response,HttpGet,RequestParam} from "@sugoi/server";​@Controller('/dashboard')export class CoreController{constructor(){}​@HttpGet("/:role")test(@RequestParam('role') role:string,@RequestHeader("role") headerRole:string){if(role === headerRole )return "authorized";else{throw new Error("unauthorized")}}}

今天介绍的大量库非常容易。这里的答案是功能性的。如果你想要另一个版本更快更简单的开始

当然先安装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 cacheimport 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")

你可以把这些写进你的壳里

npx serve

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

本地网络服务器绝对值得一看!以下是自述文件的摘录:

本地网络服务器

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

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

使用此工具:

  • 构建任何类型的前端Web应用程序(静态、动态、单页应用程序、Prog的Web应用程序、React等)。
  • 原型后端服务(REST API、微服务、WebSocket、服务器发送事件服务等)。
  • 监控活动、分析性能、试验缓存策略等。

local-web-server是lws的发行版,与有用的中间件的“入门包”捆绑在一起。

剧情介绍

这个包安装ws命令行工具(看看使用指南)。

静态网站

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

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

静态文件教程

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

单页应用程序

服务单页应用程序(具有客户端路由的应用程序,例如React或Angular应用程序)与指定单页名称一样简单:

$ ws --spa index.html

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

如果请求静态文件(例如/css/style.css),则提供它,如果不是(例如/login),则提供指定的SPA并处理路由客户端。

SPA教程

URL重写和代理请求

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

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

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

重写教程

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

HTTPS和HTTP2

对于HTTPS或HTTP2,分别传递--https--http2标志。查看wiki用于进一步的配置选项和如何在浏览器中获取“绿色挂锁”的指南。

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

Express函数sendFile完全满足您的需要,并且由于您希望从node获得Web服务器功能,Express是自然选择,然后提供静态文件变得像以下一样简单:

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

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

一个用于节点的快速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中的相对路径!

瞧!

Node.jsWeb服务器


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

创建简单Node.jsWeb服务器并从文件异步提供超文本标记语言页面

创建我的第一个node.js服务器,我找到了一个简单而有效的方法来做到这一点。

我们可以在开始时加载一次,而不是为每个请求加载超文本标记语言。然后返回我们在启动时加载的数据。

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