node.js - Express js 提供静态文件，不适用于 nginx

Question

我很困惑为什么我最新的网络应用程序无法获取我包含的任何 css 或 js 文件。在我的本地计算机上，文件传输正常，但是当我将其托管在我的 nginx 前端服务器上时，我收到 404。这是我的 html 包含内容。

<!-- ANGULAR -->
<script src="/bower_components/angular/angular.js"></script>

<!-- ANGULAR BOOTSTRAP UI -->
<script src="/bower_components/angular-bootstrap/ui-bootstrap.js"></script>

<!-- ANGULAR ROUTE-->
<script src="/bower_components/angular-route/angular-route.js"></script>

<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="./bower_components/bootstrap-css-only/css/bootstrap.css">

<!-- ANGULAR APP SETUP -->
<script src="/js/app.js"></script>
<script src="/js/controllers.js"></script>

<!-- Custom styles -->
<link rel="stylesheet" type="text/css" href="/css/styles.css">

这是 Node express服务器代码

// set up ========================
var express  = require('express');
var app      = express();                        // create our app w/ express
var morgan = require('morgan');                  // log requests to the console (express4)
var bodyParser = require('body-parser');         // pull information from HTML POST (express4)
var methodOverride = require('method-override'); // simulate DELETE and PUT (express4)
var path = require('path');

// configuration =================

// set the static files location /public/img will be /img for users
app.use(express.static(path.join(__dirname, '/public')));
console.log("DIRECTORY= "+path.join(__dirname, '/public'));

app.use(morgan('dev'));                                         // log every request to the console
app.use(bodyParser.urlencoded({'extended':'true'}));            // parse application/x-www-form-urlencoded
app.use(bodyParser.json());                                     // parse application/json

// application -------------------------------------------------------------
app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, '/public/index.html')); // load the single view file (angular will handle the page changes on the front-end)
});

app.get('/DI_Uploader/', function(req, res) {
    res.sendFile(path.join(__dirname, '/public/index.html')); // load the single view file (angular will handle the page changes on the front-end)
});

//decides between what heroku would give it or our own chosen port for a locally hosted solution
app.set('port', (process.env.PORT || 8002));

app.listen(app.get('port'), function() {
  console.log('Node app is running on port', app.get('port'));
});

我的所有 js/css/bower_components 都在 public 目录下。我唯一能想到的问题是 nginx，我有这个......

location /DI_Uploader/ {

    proxy_ignore_client_abort on;
    proxy_pass http://webserverName:8002;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
}

托管版本与本地版本的唯一不同之处是，要访问托管版本，我将 http://website.com/DI_Uploader/而不是根 website.com。任何方向都有帮助，因为我对 Express 还很陌生。

编辑:删除了 html 前面的句点，包括

不知道如何将其放入评论中，但这是网络服务器上的文件夹结构。

- DI_Uploader
    - node_modules
    - public
        - bower_components
        - css
        - js
        index.html
    server.js
    package.json

Answer 1

感谢@jfriend00，我能够看到我无法加载静态内容的原因是因为当我在嵌套的/DI_Uploader/文件夹中真正需要静态内容时，我在网站的根目录上设置了静态内容。要解决此问题，您可以使用虚拟路径来欺骗它。

参见http://expressjs.com/en/starter/static-files.html .

代码改为

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