使用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来完成这个工作:

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

     $ npm install connect serve-static 
  2. 用这个内容创buildserver.js文件:

     var connect = require('connect'); var serveStatic = require('serve-static'); connect().use(serveStatic(__dirname)).listen(8080, function(){ console.log('Server running on 8080...'); }); 
  3. 运行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-serverlight-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.jsnode server.jsnodemon server.js

现在有更简单的方法,如果你只是想主机简单的HTTP服务器。 npm install -g http-server

并打开我们的目录并inputhttp-server

https://www.npmjs.org/package/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语句,我认为从字典中查找内容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 mimehttps://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应该和这个文件在同一个目录下。 希望这可以帮助别人:)