Angular 构建用作静态文件：路由问题答案

【问题标题】：Angular build served as a static file: problems with routesAngular 构建用作静态文件：路由问题
【发布时间】：2020-01-16 19:13:45
【问题描述】：

我有一个服务器，它拥有一个 Express 实例，以及一个构建在它上面的 Parse Server。我将该服务器用作 API 和静态文件服务器（至少现在是这样；将来我可能会将其拆分为两个 Node 实例）。服务器尚未启用 HTTPS，但它确实有一个指向它的域。

此服务器在 VPS（虚拟专用服务器）中工作，并通过 Nginx 提供给 Internet。 Nginx 配置文件的工作方式如下（出于安全原因，我用域名替换）：

server {
  listen 80;  server_name mydomain.com;  location / {
    proxy_pass http://localhost:5555;       <--- this is where the node instance is working
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
   }
}

以及为静态文件提供服务的 Node 代码：

app.get('/', function(req, res) {
  res.status(200).sendFile(path.join(__dirname, '/public/app/index.html'));
});

这里的想法是，当用户访问我的域时，在没有向 URL 添加额外部分的情况下，服务器应该检索 public/app 文件夹中的文件。

为了完成这项工作，我不得不将www/index.html 文件的默认<base href="/" /> 更改为<base href="/public/app/" />。如果我访问该域，它可以正常工作并正确提供 Web 应用程序文件。

问题是，如果我尝试访问 Angular 中定义的特定路由，它将失败。 例如，如果我访问像 www.mydomain.com 这样的域，我会到达主页，我可以与应用程序中的所有功能和路线完美交互。但是，如果我选择访问应用程序的特定路由（即：www.mydomain.com/user-stats），它将不起作用，而是给我这样的错误：

Cannot GET /public/app/user-stats

如您所见，服务器显示了不应出现的 URL 中不必要的 /public/app 部分。我想我在这里理解了一些关于静态文件服务或 Nginx 配置的错误，甚至可能是 Angular 路由本身的问题，但希望你能在这里帮助我！

非常感谢。

【问题讨论】：

标签： node.js angular express nginx

【解决方案1】：

只需将app.get('/', function...) 替换为app.get(function...) 并将其放在文件末尾即可。之前定义的所有不匹配的路由都将回退到这个

【讨论】：

感谢您的回答，但是...您能再扩展一点吗？实际上，我的 Express 服务器定义了更多路由，因此我不能对静态文件使用全局处理程序。我想我需要一个不同的解决方案。
@Zerok 这是一个建立在您当前堆栈之上的解决方案。您可能应该让 nginx 来处理您的静态文件（因为有缓存、gzip 和其他适合静态文件的功能），并让节点单独使用仅处理您的 api 调用的 Parse 服务器。在这种情况下，您不需要处理路由冲突，路由解析也不会有问题。