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

Question

我有两个 staging/test 服务器，每个服务器在 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）

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

Answer 1

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

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

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

Move sites to subdirectories without changing base href

nginx

nginx-location

angular