更改从单个 nginx 服务器提供的多个 Angular 应用程序的顶级路由？

Question

我当前的配置如下：我在不同的 Docker 容器上运行了两个独立的 Angular 应用程序，在不同的端口上运行，例如 4200 和 4201。我直接通过它们的端口访问它们：www.myserver.com:4200 和 www .myserver.com:4201。它们是使用以下 docker-compose 配置文件创建的：

version: '3.6'
services:
    app1:
         build:
             context: ../app1
             dockerfile: Dockerfile
         command: bash -c "ng serve --host 0.0.0.0 --port 4200"
         ports:
             - "4200:4200"

    app2:
         build:
             context: ../app2
             dockerfile: Dockerfile
         command: bash -c "ng serve --host 0.0.0.0 --port 4201"
         ports:
             - "4201:4201"

现在，我想设置一个 nginx 服务器以在同一个端口上为两个应用程序提供服务，例如80. 更改两个应用程序以便在不同的路线上提供服务的推荐方法是什么，例如www.myserver.com/app1 和 www.myserver.com/app2 分别？到目前为止，我已经更改了我的 docker-compose 配置文件和 nginx 的 dev.conf：

docker-compose.yml

    nginx:
         build:
             context: ../nginx
             dockerfile: Dockerfile
         restart: always
         ports:
             - "80:80"

nginx/dev.conf

server {
    listen 80;

    location /app1 {
        proxy_pass          http://app1:4200;
        proxy_redirect      default;
        proxy_set_header    Host $host;
        proxy_set_header    X-Real-IP $remote_addr;
        proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header    X-Forwarded-Host $server_name;
    }

    location /app2 {
        proxy_pass          http://app2:4201;
        proxy_redirect      default;
        proxy_set_header    Host $host;
        proxy_set_header    X-Real-IP $remote_addr;
        proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header    X-Forwarded-Host $server_name;
    }
}

是否可以按照我的要求进行操作？在内部合并 Angular 应用和路由会更好吗？

提前致谢。

更新：我最终将内容从 app2 复制到 app1 并在内部路由。如果有人想提出不同的方法，我会保留这个问题。

Answer 1

如果您在生产环境中使用 ng serve 以这种方式部署 Angular 应用程序，我建议您更改它。使用 ng serve 只能在 dev 中使用，因为 bundle 很大并且会减慢网页的初始加载速度。

推荐的部署到生产的方式是使用

ng build --prod

这会构建您的应用程序并将所有需要的文件放在 /dist 文件夹中，可能位于子目录下，具体取决于您的 Angular 版本和设置。您应该将 /dist 文件夹的内容复制到您的 nginx 容器中，并将 nginx 配置为指向您设置的路由的 index.html 文件。

例如，如果您将 app1 复制到 /usr/share/nginx/html/app1 并将 app2 复制到 /usr/share/nginx/html/app2 您的 nginx 配置可能是（假设 index.html 文件位于/app1 和 /app2 文件夹的根目录）：

location /app1 {
  try_files $uri /app1/index.html
}
location /app2 {
  try_files $uri /app2/index.html
}

这只是一个粗略的示例，理论上应该可以工作，但您很可能需要对其进行一些调整才能使其在您的设置中正常工作。

如果你想指向两个开发容器，例如 nginx 配置：

http {
  upstream app1 {
    server app1:4200;
  }
  upstream app2 {
    server app2:4201;
  }
  server {
    ...
    location /app1/ {
      proxy_pass http://app1;
      ...
    }
    location /app2/ {
      proxy_pass http://app2;
      ...
    }
  }
}