将站点移动到子目录而不更改基本 href答案

【问题标题】：Move sites to subdirectories without changing base href将站点移动到子目录而不更改基本 href
【发布时间】：2021-03-08 18:41:53
【问题描述】：

我有两台登台/测试服务器，每台服务器在 nginx 上托管一个 Angular 应用程序，比如 app1 和 app2。一切都那么简单：

http://<ip for app1 server>/   => app1
http://<ip for app2 server>/   => app2

现在我想将这两个应用程序都托管在一个服务器上。比如：

http://<ip for single server>/app1/   => app1
http://<ip for single server>/app2/   => app2

我想在不更改我的 Angular 应用程序的基础 href 的情况下实现这一点（我知道我可以通过使用 --baseHref=... option 更改它来做到这一点。但因为我不知道我的应用程序何时托管进入生产阶段，我想成为baseHref 不可知论者......

所以我写了一些可能很幼稚的东西：

location /app1/ {
    root /opt/myapps/;
}
location /app2/ {
    root /opt/myapps/;
}

在服务器上，我将我的网站放入文件系统上的/opt/myapps/app1 和/opt/myapps/app2。

但是，例如，当我尝试打开 app1 时，没有任何效果，因为我只获得了 index.html（来自 http://\<ip for single server>/app1/）。资产不会被加载，因为它们是从服务器根目录而不是从 app1 子目录获取的（例如 http://\<ip for single server>/favicon.ico 而不是 http://\<ip for single server>/app1/favicon.ico）

这可能吗？我怎样才能做到这一点？

【问题讨论】：

标签： angular nginx nginx-location

【解决方案1】：

如果您不知道 Angular 应用程序的托管路径，您可以在适当的 index.html 中放置一个相对 href

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title> Dashboard</title>
    <!-- relative href -->
    <base href="./" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
      <!-- Render angular app -->
    <app-root></app-root>
  </body>
</html>

【讨论】：

我什至没有想到这一点，但它做得很好！谢谢！