Node.js Express+；Nginx。Can'；不提供静态文件

这是我的项目文件夹

/
  public/
    index.html
    main.js
    adaptor.js
    main.css
  node_modules/
    socket.io/
  index.js

这是我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

  <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>

但是我在所有的脚本上都得到了404。另一件奇怪的事情是，这些文件上的mime类型被设置为

text/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>

---

如果您有此结构：

myApp
  app.js
  -public/
     -js/

在

app.js

中，您应该这样做：

self.app.use(express.static(path.join(__dirname, 'public')));
staticRoutes.forEach(route=> {
            self.app.use(BASEPATH+route,express.static(path.join(__dirname, 'public')));
        });

其中，

staticRoutes

是一个类似

staticRoutes=[
'services/'
'about/'
];

和在html中（开发）

而在生产中使用完整路径+协议更安全

app.use(express.static(path.join(__dirname, '/public')));
app.use(express.static(path.join(__dirname, '/node_modules')));

我认为这两行是它产生错误的原因。 你能删除第二个并试一试吗？也许您的express应用程序设置了主静态服务文件夹“node_modules”，这就是应用程序无法为您的主脚本文件提供服务的原因

另外，我不认为将node_modules目录作为静态文件夹提供是个好主意。我认为在您的设置中，“bower”似乎更适合作为javascript包管理器

---

谢谢

您不需要配置Nginx和Express来提供静态文件。两者都能独立完成这项工作，但这取决于你的选择

对于这些示例，我假设与您的问题中提供的文件结构相同

在这两种配置中，从/在HTML中加载文件：

<script src="/main.js"></script> <!-- loads from myapp/public/main.js -->

简要说明：不需要在

express.static（）

中使用

\u dirname

。在后台（实际上，它在第65行），Express使用原生Node.js。从文档中：

resolve（）方法将一系列路径或路径段解析为绝对路径

使用

path.resolve（\uu dirname，'public'）

实际上返回与

path.resolve（'public'）

相同的。我认为您的问题实际上是告诉Nginx提供静态文件并代理相同的请求来表示。好的，接下来是我的回答

Nginx配置 Nginx作为静态文件服务器，Express作为API服务器 Nginx配置 快速应用

---

希望这有帮助

从nginx配置文件中删除

try\u files

指令为我解决了这个问题。

我已经尝试过了，我不认为它应该是这样工作的，因为静态路径设置为

\uuu dirname/public

，所以

/

不适合它。你能发布浏览器请求的完整请求url吗？是的

\uu dirname

是

/home/ubuntu

并且nginx

root

设置为

/home/ubuntu

是否使用/public/myfile访问静态文件？另外，Nginx也不需要尝试提供index.html服务——您的节点应用程序正在处理这个问题。当我记得您正在传递代理时，我删除了关于Nginx

root

的评论——Nginx根本不应该尝试提供任何文件。您可以从配置中删除

try\u文件

和

root

。这将有助于确定问题是与Express还是nginx有关。如果您直接向Express服务器发出请求，您可以访问脚本文件吗？我很确定用户会说这没问题。将搜索第一个静态目录以查找文件。关于为节点_模块使用软件包管理器，有一点很好。+1建议不要为节点_模块提供服务器。这是一个巨大的目录，可以公开数以万计的文件。最好只在“公共”文件夹的某个地方包含您只需要的前端库。嘿，谢谢，这很有效。我使用了第一种配置。你能给我指一份文件或什么的吗？因为我想知道我做错了什么？例如，不使用

\u dirname

对解决方案有何影响？事实上，同样的配置也适用于我的个人项目，以及我为我工作的公司所做的许多项目。稍后回到这里，我认为您最初的问题是Nginx是从

/home/ubuntu

提供服务，而不是从public dir提供服务。当被问到

main.js

时，它会返回404并停在那里，从不代理任何要表达的内容。至于您的其他项目，我不能确定，但我想知道它们是否有效，因为您的index.html文件加载了带有

src=“/public/main.js”

的资产。不管怎样，很高兴它能起作用：）这是有史以来最好的答案！我被困了24小时，3个小时几乎没有睡觉。然后我找到了这个答案。谢谢@ContinuousLoad。我的所有路线都不可访问，只有主页/可访问。现在，一切正常。谢谢你。@bozzmob谢谢你，我很谦卑。听到久拖不决的问题正在得到解决，我感到高兴。肯定去过那里。另外，我在Chuan Ma的《try_files》中听到了关于使用命名块的提示。如果你（或任何人）对我的答案投了赞成票，请也对我的答案投赞成票。我尝试过的所有解决方案都成功了。谢谢，伙计。这也是我的问题。谢谢

app.use(express.static(path.join(__dirname, '/public')));
app.use(express.static(path.join(__dirname, '/node_modules')));

<script src="/main.js"></script> <!-- loads from myapp/public/main.js -->

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

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; 
  }
}

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;
  }
}

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);