Express + Nginx.无法提供静态文件 [英] Express + Nginx. Can't serve static files
问题描述
这是我的项目文件夹
/
public/
index.html
main.js
adaptor.js
main.css
node_modules/
socket.io/
index.js
这是我的index.js中的静态文件配置
and this is static file configuration in my index.js
app.use(express.static(path.join(__dirname, '/public')));
app.use(express.static(path.join(__dirname, '/node_modules')));
app.get('/', (req, res)=>{
res.sendFile(path.join(__dirname, 'public', '/index.html'));
})
这是我的index.html
and this is my index.html
<script src="/socket.io/socket.io.js" charset="utf-8"></script>
<script src="/adapter.js" charset="utf-8"></script>
<script src="/main.js" charset="utf-8"></script>
这是我的nginx配置
and this is my nginx configuration
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ /index.html =404;
proxy_pass http://localhost:8080;
}
但是我在所有脚本上都得到404.另一个奇怪的是，这些文件上的mime-type设置为text/HTML
But I am getting 404 on all the scripts. And an another strange thing is that mime-type on those files is set to text/HTML
我在做什么错了?
我有一个项目，该项目具有相同的项目结构，并且具有相同的配置，但是可以正常使用，在这种情况下不起作用.
I have a project, with an identical project structure, and it has the same configuration, but it works for it, and it isn't working in this case.
推荐答案
您无需配置Nginx 和 Express即可提供静态文件.两者都有能力独立完成这项工作，但这取决于您选择.
You don't need to configure Nginx and Express to serve static files. Both are capable of doing the job independently, but it is up to you to choose.
对于这些示例，我假设您的问题中提供的文件结构相同.
For these examples I am assuming the same file structure provided in your question.
在两种配置中，都从/加载HTML文件:
In both configurations, load files from / in HTML:
<script src="/main.js"></script> <!-- loads from myapp/public/main.js -->
表达为静态文件服务器，Nginx为反向代理
快速应用
const express = require('express');
const app = express();
app.use(express.static('public')); // notice the absence of `__dirname`, explained later on
// if the request URL doesn't match anything in the 'public' folder,
// it will start searching here next.
app.use(express.static('some_other_folder'));
// from my testing, express will automatically locate index.html if
// it is in a static folder. Declaring a route is not required.
/*
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'index.html'));
});
*/
app.listen(8080);
// GET / => index.html
// GET /main.js => main.js
快速注释:不需要在express.static()中使用__dirname.实际情况下(实际上，它在第65行的此处)， Express使用本机Node.js path.resolve().从文档中:
Quick side note: the use of __dirname in express.static() is not required. Under the hood (actually, it's here on line 65) , Express uses the native Node.js path.resolve(). From the docs:
path.resolve()方法将一系列路径或路径段解析为绝对路径.
The path.resolve() method resolves a sequence of paths or path segments into an absolute path.
使用path.resolve(__dirname, 'public')实际上返回与path.resolve('public')相同的.我认为您的问题确实是在告诉Nginx提供静态文件并将相同的请求代理到Express.好，请继续我的回答.
Using path.resolve(__dirname, 'public') actually returns the same as path.resolve('public'). I am thinking that your problem was really telling Nginx to serve static files AND proxy the same requests to Express. OK, on to the rest of my answer.
server {
listen 8081; # must be different port from Express
server_name example.com;
location / {
# hand ALL requests back to express
proxy_pass http://localhost:8080;
}
}
Nginx作为静态文件服务器，Express作为API服务器
Nginx配置
server {
listen 8081;
server_name example.com;
location / {
root /path/to/website/public;
index index.html;
try_files $uri $uri/ @express; # instead of 404, proxy back to express using a named location block;
# source: https://stackoverflow.com/a/15467555/8436941
}
location @express {
proxy_pass http://localhost:8080;
}
}
Express应用
const express = require('express');
const app = express();
// actually, Nginx has already taken care of static files. You can still define other routes for API functions for example.
app.get('/my/api', (req, res) => {/* query database, etc. */});
app.listen(8080);
希望这会有所帮助！
这篇关于Express + Nginx.无法提供静态文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
