如何通过Node.js在本地提供静态文件? [英] How do I serve static files through Node.js locally?
问题描述
我有以下文件位置:
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内部，我按如下方式加载所有必需的文件:
Inside sitename.html I load all necessary files as follows for example :
<html>
<head>
<script src="scripts/somefile.js"></script>
</head>
...
</html>
因此，每当我打开file:///Users/MyName/Developer/sitename/sitename.html时，一切都很好.
So whenever I open up file:///Users/MyName/Developer/sitename/sitename.html everything works fine.
但是，每当我尝试通过已设置的本地Node.js服务器(服务器文件位置:file:///Users/MyName/Developer/sitename/server.js)加载file:///Users/MyName/Developer/sitename/sitename.html时，如下所示:
However, whenever I try to load file:///Users/MyName/Developer/sitename/sitename.html via a local Node.js server that I've setup (server file location : file:///Users/MyName/Developer/sitename/server.js) as follows :
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);
});
找到并加载了
sitename.html，但是应该加载的所有其他文件均无法加载，因为它们都被赋予了前缀http://localhost:8080/(例如，http://localhost:8080/scripts/somefile.js不是有效的文件路径).
sitename.html is found and loaded but all the other files that are supposed to load through it fail to load because they're all given the prefix http://localhost:8080/ (http://localhost:8080/scripts/somefile.jsis not a valid file path for example).
看起来好像在服务器创建后(在http.createServer(.....);内部)上下文发生了变化，父目录现在变成了http://localhost:8080/而不是file:///Users/MyName/Developer/sitename/，我想这是有道理的，但是在使用仍存储在本地.
It looks like as soon as the server is created (inside http.createServer(.....);) the context changes and the parent directory now becomes http://localhost:8080/ instead of file:///Users/MyName/Developer/sitename/ which makes sense I guess but is not very helpful when using files that are still stored locally.
我该如何解决?我将server.js(暂时)存储在同一目录中的事实使事情变得更加混乱了吗?
How do I work around that? Is the fact that I'm storing server.js (just for the time being) in the same directory making things even more confusing?
谢谢！
推荐答案
您可以使用file:// URL加载文件，因为它是Web浏览器的功能.
You're able to load the files using the file:// URL because it's a feature of your web browser.
加载地址http://localhost:8080时，您不再利用浏览器提供文件的能力(您正在访问Node.js服务器).正在投放的HTML页面包含相对路径，这些路径与当前主机名结合使用以加载资产.
When loading the address http://localhost:8080 you're no longer leveraging the browser's ability to serve the files (you're accessing the Node.js server). The HTML page being served contains relative paths which work in conjunction with the current hostname to load the assets.
有多种服务资产的选择.
There is a multitude of options for serving the assets.
您可以使用Node.js来提供文件:
You could serve the files with Node.js:
- Express.js has a module for serving static assets
- Node-static is a module I found with a quick search on npm
或者，您可以使用Web服务器为您提供文件.这可能是性能最高的选项. 此处是使用nginx提供静态内容的示例.
Alternatively you could use a web server to serve the files for you. This is likely to be the most performant option. Here is an example of serving static content with nginx.
这篇关于如何通过Node.js在本地提供静态文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
