使用node.js作为一个简单的Web服务器
我想运行一个非常简单的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);
下面的一个build议很复杂，需要我为每个我想使用的资源（CSS，JavaScript，图像）文件写一个get line。
我如何用一些图片，CSS和JavaScript来提供一个HTML页面？
你可以使用Connect和ServeStatic和Node.js来完成这个工作：
-
使用NPM安装连接和静态服务
$ npm install connect serve-static -
用这个内容创buildserver.js文件：
var connect = require('connect'); var serveStatic = require('serve-static'); connect().use(serveStatic(__dirname)).listen(8080, function(){ console.log('Server running on 8080...'); }); -
运行Node.js
$ node server.js
你现在可以去http://localhost:8080/yourfile.html
最简单的Node.js服务器只是：
$ npm install http-server -g
现在，您可以通过以下命令运行服务器：
$ cd MyApp $ http-server
或者，你可以试试这个，它打开你的浏览器并启用CORS请求：
$ http-server -o --cors
有关更多选项，请查看GitHub上http-server的文档 ，或运行：
$ http-server --help
许多其他好的function和对NodeJitsu大脑死亡简单的部署。
function叉子
当然，你可以轻松地用自己的叉子来增加function。 你可能会发现这个项目现有的400多个分支之一已经完成了：
Light Server：一个自动刷新的select
一个很好的替代http-server是light-server 。 它支持文件观看和自动刷新，可能还有其他function。
$ npm install -g light-server $ light-server
添加到Windows资源pipe理器中的目录上下文菜单
reg.exe add HKCR\Directory\shell\LightServer\command /ve /t REG_EXPAND_SZ /f /d "\"C:\nodejs\light-server.cmd\" \"-s\" \"%V\""
自动刷新编辑
大多数网页编辑器和IDE工具现在都包含一个Web服务器，它将监视源文件并在更改时自动刷新网页。
开源文本编辑器Brackets还包含一个NodeJS静态Web服务器。 只要打开Brackets的任何HTML文件，按“ 实时预览 ”，它启动一个静态服务器，并在页面打开浏览器。 每当您编辑并保存HTML文件时，浏览器都会自动刷新。 这在testing自适应网站时特别有用。 在多个浏览器/窗口大小/设备上打开您的HTML页面。 保存您的HTML页面，并立即查看您的自适应工具是否工作，因为他们都自动刷新。
PhoneGap开发人员
如果您正在编写混合移动应用程序 ，您可能有兴趣知道PhoneGap团队将其自动刷新概念与他们的新PhoneGap应用程序一起使用 。 这是一个通用的移动应用程序，可以在开发过程中从服务器加载HTML5文件。 这是一个非常漂亮的技巧，因为如果您正在更改JS / CSS / HTML文件，那么现在您可以跳过混合移动应用程序开发周期中的慢编译/部署步骤 – 这是您大部分时间所做的工作。 他们还提供了用于检测文件更改的静态phonegap serve Web服务器（运行phonegap serve ）。
PhoneGap + Sencha Touch开发者
我现在已经广泛地为Sencha Touch＆jQuery Mobile开发者调整了PhoneGap静态服务器和PhoneGap开发者应用程序。 在Sencha Touch Live上查看。 支持 – QR QR码和 – localtunnel代理您的静态服务器从您的台式机到防火墙外的URL！ 吨的用途。 大规模加速混合移动开发。
Cordova + Ionic框架开发人员
本地服务器和自动刷新function被烘焙到ionic工具中。 从您的应用程序文件夹运行ionic serve 。 甚至更好… ionic serve --lab查看自动刷新iOS和Android的并行视图。
看看这个要点 。 我在这里复制它作为参考，但其要点已定期更新。
Node.JS静态文件Web服务器。 把它放在你的path来启动任何目录中的服务器，采取一个可选的端口参数。
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");
更新
要点是处理CSS和JS文件。 我自己用过 在“二进制”模式下使用读/写不是一个问题。 这只是表示该文件不被文件库解释为文本，并且与响应中返回的内容types无关。
你的代码的问题是你总是返回一个“text / plain”的内容types。 上面的代码不会返回任何内容types，但是如果您只是将它用于HTML，CSS和JS，浏览器就可以推断出这些内容。 没有内容types比错误的更好。
内容types通常是您的Web服务器的configuration。 所以我很抱歉，如果这不能解决你的问题，但它对我来说是一个简单的开发服务器，并认为这可能会帮助其他人。 如果你确实在响应中需要正确的内容types，你需要显式地将它们定义为joeytwiddle，或者使用像Connect这样具有合理默认值的库。 关于这一点的好处是它简单且独立（不依赖）。
但我确实感到你的问题。 所以这里是合并的解决scheme。
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");
你不需要expression。 你不需要连接。 Node.js确实是http。 你所要做的就是根据请求返回一个文件：
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 (eg readFileSync) }).listen(9615)
一个更完整的例子，确保请求不能访问基目录下的文件，并做适当的error handling：
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)
我认为你现在缺less的部分是你发送：
Content-Type: text/plain
如果你想要一个Web浏览器来呈现HTML，你应该改变它：
Content-Type: text/html
第1步（在命令提示符[我希望你cd到您的文件夹]）： npm install express
第2步：创build一个文件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 nodemon server.js ： node server.js或nodemon server.js
现在有更简单的方法，如果你只是想主机简单的HTTP服务器。 npm install -g http-server
并打开我们的目录并inputhttp-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语句，我认为从字典中查找内容types是比较简单的：
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作为默认选项。
你不需要使用任何NPM模块来运行一个简单的服务器，Node上有一个叫做“ NPM Free Server ”的非常小的库：
- 在GitHub上的NPM免费服务器
50行代码，输出如果你正在请求一个文件或文件夹，并给它一个红色或绿色，如果失败的工作。 小于1KB（缩小）。
编辑：
Node.js示例应用程序节点聊天具有您想要的function。
在它的README.textfile
3.步骤是你正在寻找的。
步骤1
- 在端口8002上创build一个响应hello world的服务器
第2步
- 创build一个index.html并提供服务
第三步：
- 介绍util.js
- 改变逻辑，以便提供任何静态文件
- 在没有find文件的情况下显示404
步骤4
- 添加jquery-1.4.2.js
- 添加client.js
- 更改index.html以提示用户input昵称
这里是server.js
这里是util.js
我在npm上find了一个有趣的库，可能对你有一些用处。 它叫mime（ npm install mime或https://github.com/broofa/node-mime ），它可以确定文件的MIMEtypes。 下面是我使用它写的一个web服务器的例子：
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")
这将服务于任何常规的文本或图像文件（.html，.css，.js，.pdf，.jpg，.png，.m4a和.mp3是我testing过的扩展名，但它理论上应该适用于所有的东西）
开发者笔记
这是我用它得到的输出的一个例子：
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
注意path构build中的unescapefunction。 这是为了允许具有空格和编码字符的文件名。
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);
我想你在哪里寻找这个。 在你的index.html中，只需用普通的html代码来填充它就可以了 – 无论你想在其上渲染什么，就像：
<html> <h1>Hello world</h1> </html>
基本上复制接受的答案，但避免创build一个JS文件。
$ node > var connect = require('connect'); connect().use(static('.')).listen(8000);
发现它非常方便。
更新
截至Express的最新版本，serve-static已经成为一个独立的中间件。 使用它来服务：
require('http').createServer(require('serve-static')('.')).listen(3000)
先安装serve-static 。
如果你在PC上安装了节点，可能你有NPM，如果你不需要NodeJS的东西，你可以使用这个服务包：
1 – 在PC上安装软件包：
npm install -g serve
2 – 服务您的静态文件夹：
serve <path> d:> serve d:\StaticSite
它会告诉你哪个端口你的静态文件夹正在服务，只需导航到主机，如：
http://localhost:3000
我使用下面的代码来启动一个简单的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 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);
它将呈现所有的js，css和图像文件，以及所有的html内容。
同意声明“ 没有内容types比错误内容更好 ”
我这样做的方法首先是通过全局安装节点静态服务器
npm install node-static -g
然后导航到包含您的html文件的目录，并使用static启动静态服务器。
转到浏览器并键入localhost:8080/"yourHtmlFile" 。
我不确定这是不是你想要的，但是，你可以尝试改变：
{'Content-Type': 'text/plain'}
对此：
{'Content-Type': 'text/html'}
这将使浏览器客户端显示为html而不是纯文本文件。
疯狂的复杂的答案在这里。 如果你不打算处理nodeJS文件/数据库，但只是想提供静态html / css / js /图像作为你的问题build议，那么只需安装pushstate-server模块或类似的;
这是一个“一class”，将创build和推出一个小型网站。 只需将整个块粘贴到相应目录的terminal中即可。
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'
一个稍微更详细的快速4.x版本，但提供目录列表，压缩，caching和请求logging在最less的行数
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 !")
上面的大部分答案都非常好地描述了内容的提供方式。 我正在寻找额外的目录列表，以便目录的其他内容可以浏览。 这是我的解决scheme，为更多的读者：
'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));
这是我用来快速查看网页的最快解决scheme之一
sudo npm install ripple-emulator -g
从此，只需进入你的html文件的目录并运行
ripple emulate
然后将设备更改为Nexus 7格局。
对于一个简单的nodejs server已经有了一些很好的解决scheme。 如果您在更改文件时需要live-reloading ，那么还有一个解决scheme。
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应该和这个文件在同一个目录下。 希望这可以帮助别人:)
