Question

在当前设置中，如何正确加载资产存在问题。我们使用NGINX，节点8.11，角度6

在一个坚果壳中，我不得不对进入节点server.js的请求进行一些解析，以使文件能够正确地加载角度。

这是一个典型的应用程序，称为英雄：

Nginx

location /heroes/ {
    proxy_pass 
    http://unix:///myapps/tmp/node.sock;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    add_header X-UA-Compatible "IE=edge";
}

Node Server.js

...

//==============================================================
// Point static path to dist
//=================================================================
app.use(express.static(__dirname + '/dist/')); 
// set the static files location for the angular build
...

Node Server.js-创建允许的扩展列表

...

// Allowed extensions list can be extended depending on your own needs
const allowedExt = [
    '.js',
    '.ico',
    '.css',
    '.png',
    '.jpg',
    '.woff2',
    '.woff',
    '.ttf',
    '.svg',
    '.map',
    '.otf',
    '.eot',
    '.gif'
];
...

Node Server.js-将文件路由到角度dist

...    
// Redirect all the other requests
// TODO: This part is a hack. 
//The main issue is express not serving up the static assets
app.get('*', (req, res) => {
  if (allowedExt.filter(ext => req.url.indexOf(ext) > 0).length > 0) {
       var iFileStart=req.url.lastIndexOf("/");
       var sFile=req.url.substring(iFileStart+1);
       res.sendFile(path.resolve('dist/'+sFile));
    } else {
      res.sendFile(path.resolve('dist/index.html'));
    }
  });

...

角度index.html

...    
<base href="/heroes/">
...

使用此设置-我的应用大部分都能正常工作。对于其他一些问题，我不得不添加一些麻烦。

问题是-Express或我的Nginx设置在此hack之前没有正确路由资产请求。我很确定我不必检查文件扩展名并以不同的方式进行路由。

如果我将Node Server.js文件更改为此：

app.get('*', (req, res) => {
             res.sendFile(path.resolve('dist/index.html'));

  });

然后我在浏览器中收到此错误： JS files being served as html?

似乎可以找到文件，但未将它们作为JS文件处理。

有什么建议吗？

Answer 1

好的，我想出自己的问题。

必须编辑以下内容：

NGINX：

location /heroes/ {
    root /app/mydir/heroes/dist <--- added this
    proxy_pass http://unix:///myapps/tmp/node.sock;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    add_header X-UA-Compatible "IE=edge";
}

Server.js

...
//======================================================================
// Point static path to dist - false will cause a 404 if not found
//========================================================================
app.use(function (req, res, next) {
    next();
  }, express.static(__dirname+'/dist',{fallthrough:true})); 
...

....
app.get('*', (req, res) => {
      res.sendFile(path.resolve('dist/heores/index.html'));

  });
...

angular.json

 "outputPath": "dist/heroes",

现在一切正常。希望其他人会发现这很有用。

资产无法使用NGNIX，节点8.11和Angular 6正确路由

1 个答案: