更改单个Nginx服务器提供的多个Angular应用程序的顶级路由? [英] Changing top level routes for multiple Angular apps served from single nginx server?

问题描述

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

My current configuration is as follows: I have two separate Angular apps on different Docker containers running on different ports, for example, 4200 and 4201. I access them both directly through their ports: www.myserver.com:4200 and www.myserver.com:4201. They are created using the following docker-compose config file:

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:

Now, I want to set up an nginx server to serve both apps on the same port, e.g. 80. What is the recommended way to change both apps so that they're served on different routes, e.g. www.myserver.com/app1 and www.myserver.com/app2, respectively? So far I have changed my docker-compose config file and nginx's dev.conf:

docker-compose.yml

docker-compose.yml

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

nginx/dev.conf

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应用并在内部进行路由会更好吗?

Is it possible to do what I'm asking for? Would it be better to merge both Angular apps and route internally?

谢谢.

更新:我最终将内容从app2复制到app1并在内部进行路由.如果有人想提出另一种方法，我将保留这个问题.

Update: I ended up copying the contents from app2 into app1 and routing internally. I'll leave the question open in case anyone wants to suggest a different approach.

推荐答案

如果使用ng serve在生产环境中以这种方式部署angular应用，建议您进行更改.只能在开发人员中使用ng serve，因为捆绑包的容量很大，而且会降低网页的初始加载速度.

If you are deploying your angular apps this way in production using ng serve, I recommend you change that. Using ng serve should only be used in dev because the bundle size is huge and slows down initial load of the webpage.

推荐使用的生产部署方式

Recommended way to deploy to production is using

ng build --prod

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

This builds your app and puts all needed files in the /dist folder, possibly under a subdirectory depending on your angular version and settings. You should copy the contents of the /dist folder to your nginx container and configure nginx to point to the index.html file for the routes you set up.

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

For example, if you copy app1 to /usr/share/nginx/html/app1 and app2 to /usr/share/nginx/html/app2 your nginx config could be (given that the index.html files are in the root of /app1 and /app2 folders):

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

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

This is just a rough example, should work in theory but you most likely need to tweak it a little for it to work correctly in your setup.

如果要指向两个开发容器，请使用示例nginx配置:

Example nginx config if you want to point to the two dev containers:

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应用程序的顶级路由?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！