如何在本地通过Node.js提供静态文件?

我有以下文件位置:

file:///Users/MyName/Developer/sitename/scripts (contains all .js files..) file:///Users/MyName/Developer/sitename/css (contains all .css files..) file:///Users/MyName/Developer/sitename/images (contains all .jpg/png/etc. files..) file:///Users/MyName/Developer/sitename/sitename.html file:///Users/MyName/Developer/sitename/server.js 

里面sitename.html我加载所有必要的文件如下例如:

 <html> <head> <script src="scripts/somefile.js"></script> </head> ... </html> 

所以,每当我打开file:///Users/MyName/Developer/sitename/sitename.html一切工作正常。

但是,每当我尝试通过我已经安装的本地Node.js服务器(服务器文件位置: file:///Users/MyName/Developer/sitename/server.js加载file:///Users/MyName/Developer/sitename/sitename.html file:///Users/MyName/Developer/sitename/server.js )如下:

 var http = require("http"); var fs = require("fs"); fs.readFile('./sitename.html', function (err, html) { if (err) throw err; http.createServer(function (request,response) { // serve site if (request.url === "/") { response.writeHeader(200, {"Content-Type": "text/html"}); response.write(html); } response.end(); }).listen(8080); }); 

find并加载了sitename.html ,但所有通过它加载的其他文件都无法加载,因为它们都是前缀http://localhost:8080/http://localhost:8080/scripts/somefile.js不是有效的文件path)。

它看起来像服务器一旦创build(内http.createServer(.....); )上下文更改和父目录现在变成http://localhost:8080/而不是file:///Users/MyName/Developer/sitename/这是有道理的,我猜,但是使用仍然存储在本地的文件不是很有帮助。

我如何解决这个问题? 事实上,我正在存储server.js (就目前来说)在同一个目录,使事情更令人困惑?

谢谢!

您可以使用file:// URL加载文件,因为它是您的networking浏览器的一个function。

当加载地址http://localhost:8080您不再利用浏览器提供文件的能力(您正在访问Node.js服务器)。 被提供的HTML页面包含与当前主机名一起加载资源的相对path。

服务资产有多种select。

您可以使用Node.js来提供这些文件:

  • Express.js有一个用于提供静态资产的模块
  • Node-static是我在npm上快速search的一个模块

或者,您可以使用Web服务器为您提供文件。 这可能是最高性能的select。 这是一个用nginx提供静态内容的例子 。

我在提供本地静态文件时find的最简单的解决scheme是使用Http-Server 。

它的使用非常简单。 在全局安装之后

  npm install http-server -g 

转到您想要提供的根目录

 cd <dir> http-server 

而已!

问题是,虽然你已经定义了一个静态资源(sitename.html)的path,但你还没有定义它引用的所有其他静态资源(例如somefile.js)的path。 假设下面的文件结构,下面包含处理加载静态资源相对于您的公共目录(www),而不使用外部模块的服务器代码。 (部分来自这里 )

 project/ server/ server.js dispatcher.js www/ index.html js/ (your javascript files) css/ (your css files) 

server.js

 var http = require('http'); http.createServer(handleRequest).listen(8124, "127.0.0.1"); var dispatcher = require('./dispatcher.js'); function handleRequest(req, res) { try { console.log(req.url); dispatcher.dispatch(req, res); } catch(err) { console.log(err); } } 

dispatcher.js

 var fs = require('fs'); var path = require('path'); this.dispatch = function(request, response) { //set the base path so files are served relative to index.html var basePath = "../www"; var filePath = basePath + request.url; var contentType = 'text/html'; var extname = path.extname('filePath'); //get right Content-Type switch (extname) { case '.js': contentType = 'text/javascript'; break; case '.css': contentType = 'text/css'; break; } //default to index.html if (filePath == basePath + "/") { filePath = filePath + "index.html"; } //Write the file to response fs.readFile(filePath, function(error, content) { if (error) { response.writeHead(500); response.end(); } else { response.writeHead(200, {'Content-Type': contentType}); response.end(content, 'utf-8'); } }); } 
Interesting Posts