我想运行一个非常简单的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页面？
您可以将Connect和ServeStatic与Node.js一起使用：
$ npm install connect serve-static
var connect = require('connect');
var serveStatic = require('serve-static');
connect().use(serveStatic(__dirname)).listen(8080, function(){
console.log('Server running on 8080...');
});
$ node server.js
你现在可以去http://localhost:8080/yourfile.html
您不需要使用任何NPM模块来运行简单的服务器，对于Node，有一个非常小的库叫做“NPM Free Server”：
50行代码，如果您请求文件或文件夹，则输出，如果工作失败，则为红色或绿色。小于1KB（缩小）。
如果您的PC上安装了节点，那么您可能拥有NPM，如果您不需要NodeJS，可以使用qazxsw poi包：
1 - 在PC上安装软件包：
serve
2 - 提供静态文件夹：
npm install -g serve
它将显示您的静态文件夹所在的端口，只需导航到主机，如：
serve <path>
d:> serve d:\StaticSite
我在npm上找到了一个有趣的库，可能对你有用。它被称为mime（http://localhost:3000
或npm install mime），它可以确定文件的mime类型。这是我用它编写的网络服务器的一个例子：
https://github.com/broofa/node-mime
这将提供任何常规文本或图像文件（.html，.css，.js，.pdf，.jpg，.png，.m4a和.mp3是我测试过的扩展，但理论上它应该适用于所有内容）
这是我用它得到的输出示例：
var mime = require("mime"),http = require("http"),fs = require("fs");
http.createServer(function (req, resp) {
path = unescape(__dirname + req.url)
var code = 200
if(fs.existsSync(path)) {
if(fs.lstatSync(path).isDirectory()) {
if(fs.existsSync(path+"index.html")) {
path += "index.html"
} else {
code = 403
resp.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 = 404
resp.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")
注意路径构造中的Listening at http://localhost:9000
GET 200 OK /cloud
GET 404 Not Found /cloud/favicon.ico
GET 200 OK /cloud/icon.png
GET 200 OK /
GET 200 OK /501.png
GET 200 OK /cloud/manifest.json
GET 200 OK /config.log
GET 200 OK /export1.png
GET 200 OK /Chrome3DGlasses.pdf
GET 200 OK /cloud
GET 200 OK /-1
GET 200 OK /Delta-Vs_for_inner_Solar_System.svg
函数。这是为了允许带有空格和编码字符的文件名。
Node.js示例应用程序节点聊天具有您想要的功能。
在它的unescape
3.步骤就是你要找的。
步骤1
- 创建一个在端口8002上以hello world响应的服务器
第2步
- 创建一个index.html并提供服务
第三步：
- 插入util.js
- 更改逻辑，以便提供任何静态文件
- 如果没有找到文件，则显示404
第4步
- 添加jquery-1.4.2.js
- 添加client.js
- 更改index.html以提示用户输入昵称
我这样做的方法是首先通过全局安装节点静态服务器
util.js
然后导航到包含html文件的目录，并使用npm install node-static -g
启动静态服务器。
转到浏览器并键入static。
localhost:8080/"yourHtmlFile"我想你在哪里寻找这个。在你的index.html中，只需用普通的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/html'});
// change the to 'text/plain' to 'text/html' it will work as your index page
res.end(index);
}).listen(9615);
基本上复制接受的答案，但避免创建一个js文件。
<html>
<h1>Hello world</h1>
</html>
发现它非常方便。
截至最新版Express，serve-static已成为一个独立的中间件。用它来服务：
$ node
> var connect = require('connect'); connect().use(static('.')).listen(8000);
首先安装require('http').createServer(require('serve-static')('.')).listen(3000)
。
我使用下面的代码启动一个简单的Web服务器，如果Url中没有提到文件，它会呈现默认的html文件。
serve-static它将呈现所有js，css和图像文件以及所有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 name
fileName = (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);
对此：
{'Content-Type': 'text/plain'}
这将使浏览器客户端将文件显示为html而不是纯文本。
稍微详细的表达4.x版本，但它提供了最少行数的目录列表，压缩，缓存和请求记录
{'Content-Type': 'text/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
有关更多选项，请查看documentation for http-server on GitHub，或运行：
$ http-server --help
很多其他不错的功能和对NodeJitsu的脑死亡简单部署。
功能分叉
当然，您可以使用自己的fork轻松实现功能。你可能会发现它已经在这个项目现有的800多个分支中完成：
轻型服务器：自动刷新替代方案
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工具现在都包含一个Web服务器，它将监视您的源文件并在更改时自动刷新您的网页。
open source文本编辑器Brackets还包括一个NodeJS静态Web服务器。只需在Brackets中打开任何HTML文件，按“实时预览”即可启动静态服务器并在页面上打开浏览器。每当您编辑和保存HTML文件时，浏览器都会自动刷新。这在测试自适应网站时尤其有用。在多个浏览器/窗口大小/设备上打开HTML页面。保存您的HTML页面，并立即查看您的自适应内容是否正常工作，因为它们都会自动刷新。
PhoneGap开发人员
如果你正在编写一个hybrid mobile app，你可能有兴趣知道PhoneGap团队采用了他们的新PhoneGap App这个自动刷新概念。这是一个通用的移动应用程序，可以在开发期间从服务器加载HTML5文件。这是一个非常流畅的技巧，因为现在你可以跳过混合移动应用程序的开发周期中的慢速编译/部署步骤，如果你要更改JS / CSS / HTML文件 - 这是你大部分时间都在做的事情。它们还提供检测文件更改的静态NodeJS Web服务器（运行phonegap serve）。
PhoneGap + Sencha Touch开发者
我现在已经为Sencha Touch和jQuery Mobile开发人员广泛调整了PhoneGap静态服务器和PhoneGap开发者应用程序。在Sencha Touch Live查看。支持--qr QR码和--localtunnel，它将您的静态服务器从您的台式计算机代理到防火墙外的URL！吨的用途。混合移动设备的大规模加速。
Cordova + Ionic框架开发人员
本地服务器和自动刷新功能被添加到ionic工具中。只需从您的应用程序文件夹中运行ionic serve即可。更好的... ionic serve --lab可以查看iOS和Android的自动刷新并排视图。
疯狂的复杂答案在这里。如果您不打算处理nodeJS文件/数据库，但只想提供静态html / css / js / images，如您的问题建议那么只需安装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 !")
模块或类似的;
这是一个“一个班轮”，将创建和发布一个迷你网站。只需将终端中的整个块粘贴到相应的目录中即可。
pushstate-server
打开浏览器并转到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上面的大多数答案非常清楚地描述了如何提供内容。我所看到的另外一个是目录列表，以便可以浏览目录的其他内容。这是我的进一步读者的解决方案：
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'
对于一个简单的'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 folder
var serve = serveStatic('reports/');
// Create server
var 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));
已经有一些很好的解决方案。如果您在更改文件时需要nodejs server，还有一个解决方案。
live-reloading导航你的目录并做
npm install lite-server -g
它将通过实时重新加载为您打开浏览器。
来自w3schools
创建一个节点服务器以提供所请求的任何文件非常容易，而且您不需要为它安装任何软件包
lite-server
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);
将从磁盘提供file.html
这是我用来快速查看网页的最快解决方案之一
npx serve
从那时起，只需输入您的html文件的目录并运行即可
https://github.com/zeit/serve
然后将设备更改为Nexus 7格局。
我也可以推荐SugoiJS，它很容易设置，并提供快速开始编写和具有强大功能的选项。
看看这里开始：sudo npm install ripple-emulator -g
，文档：ripple emulate
它有请求处理装饰器，请求策略和授权策略装饰器。
例如：
http://demo.sugoijs.com/
今天有大量的图书馆，很容易。这里的答案是功能性的。如果您想要更快更简单的另一个版本
当然先安装node.js.后来：
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")
}
}
}
”的内容（你不需要下载它，我发布了解如何工作背后）
> # 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")
这里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);
应该与此文件位于同一目录中。希望这有助于某人:)
看看这个gist。我在这里复制它以供参考，但要点已经定期更新。
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文件。我自己用过它。在“二进制”模式下使用读/写不是问题。这只意味着文件不会被文件库解释为文本，并且与响应中返回的内容类型无关。
您的代码的问题是您总是返回内容类型的“text / plain”。上面的代码不会返回任何内容类型，但是如果您只是将它用于HTML，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");
http://127.0.0.1/image.jpg
绝对值得一看！以下是自述文章的摘录：
精简的模块化Web服务器，用于快速的全栈开发。
使用此工具：
Local-web-server是image.jpg的发行版，捆绑了一个有用的中间件“初学者包”。
这个包安装了local-web-server命令行工具（看看lws）。
不带任何参数运行ws会将当前目录作为静态网站托管。如果该文件存在，导航到服务器将呈现目录列表或usage guide。
wsindex.html。
这个剪辑演示了静态托管和几个日志输出格式 - $ ws
Listening on http://mbp.local:8000, http://127.0.0.1:8000, http://192.168.0.100:8000
和Static files tutorial。
提供单页应用程序（具有客户端路由的应用程序，例如React或Angular应用程序）与指定单个页面的名称一样简单：
dev对于静态站点，对典型SPA路径（例如stats，$ ws --spa index.html
）的请求将返回/user/1，因为该位置的文件不存在。但是，通过将/login标记为SPA，您可以创建此规则：
如果请求静态文件（例如404 Not Found），则服务它，如果没有（例如index.html），则服务指定的SPA并处理路由客户端。
/css/style.css。
另一个常见用例是将某些请求转发到远程服务器。
以下命令代理博客发布从/login开始到SPA tutorial的任何路径的请求。例如，/posts/的请求将被代理到https://jsonplaceholder.typicode.com/posts/。
/posts/1https://jsonplaceholder.typicode.com/posts/1。
此剪辑演示了以上使用$ ws --rewrite '/posts/(.*) -> https://jsonplaceholder.typicode.com/posts/$1'
指定默认文件扩展名和Rewrite tutorial来监视活动。
对于HTTPS或HTTP2，分别传递--static.extensions或--verbose标志。 --https有关进一步的配置选项以及如何在浏览器中获取“绿色挂锁”的指南。
--http2你不需要快递。你不需要连接。 Node.js确实是http NATIVELY。您需要做的就是根据请求返回一个文件：
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 baseDirectory
var 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 exist
response.end()
})
} catch(e) {
response.writeHead(500)
response.end() // end the response so browsers don't hang
console.log(e.stack)
}
}).listen(port)
console.log("listening on port "+port)
我认为你现在缺少的那部分是你发送的：
Content-Type: text/plain
如果您希望Web浏览器呈现HTML，则应将其更改为：
Content-Type: text/html
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 dir
response.send("Hello!!");
});
app.listen(port, host);
请注意，您也应该添加WATCHFILE（或使用nodemon）。以上代码仅适用于简单的连接服务器。
第3步：node server.js或nodemon server.js
如果您只想要主机简单的HTTP服务器，现在有更简单的方法。 npm install -g http-server
并打开我们的目录并输入http-server
快捷方式：
var express = require('express');
var app = express();
app.use('/', express.static(__dirname + '/../public')); // ← adjust
app.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);
我认为从字典中查找内容类型更简洁，而不是处理switch语句：
var contentTypesByExtension = {
'html': "text/html",
'js': "text/javascript"
};
...
var contentType = contentTypesByExtension[fileExtension] || 'text/plain';
这基本上是连接版本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作为默认选项。