快递+ Nginx。无法提供静态文件

Question

这是我的项目文件夹

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

这是我的 nginx 配置

    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

我在这里做错了什么？

我有一个项目，具有相同的项目结构，并且具有相同的配置，但它适用于它，但在这种情况下它不起作用。

Answer 1

在/ 前添加. 表示相对路径：

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

Answer 2

如果你有这个结构：

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中（开发）

<script type="text/javascript" src="js/util.js"></script>
<a href="/about">About Us</a>

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

Answer 3

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

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

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

谢谢

Answer 4

您不需要配置 Nginx 和 Express 来提供静态文件。两者都能够独立完成工作，但您可以选择。

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

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

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

Express 为静态文件服务器，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 行的 here），Express 使用原生 Node.js path.resolve()。来自文档：

path.resolve() 方法将一系列路径或路径段解析为绝对路径。

使用path.resolve(__dirname, 'public') 实际上返回与path.resolve('public') 相同的。我认为您的问题实际上是告诉 Nginx 提供静态文件并将相同的请求代理到 Express。好的，继续我的回答。

Nginx 配置

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

快递应用

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

希望这会有所帮助！

Answer 5

从 nginx 配置文件中删除 try_files 指令为我解决了这个问题。