Question

我当前的配置如下：我在不同端口（例如4200和4201）上运行的不同Docker容器上有两个单独的Angular应用程序。我直接通过它们的端口访问它们：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在生产中以这种方式部署角度应用程序，建议您进行更改。只能在开发人员中使用ng serve，因为捆绑包的容量很大，而且会降低网页的初始加载速度。

推荐使用的生产部署方式

ng build --prod

这将构建您的应用程序，并将所有需要的文件放在/ dist文件夹中，该文件可能位于子目录下，具体取决于您的角度版本和设置。您应该将/ 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;
      ...
    }
  }
}

更改单个Nginx服务器提供的多个Angular应用的顶级路由？

1 个答案: