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

问题描述

我当前的配置如下:我在不同的 Docker 容器上有两个单独的 Angular 应用程序，运行在不同的端口上，例如 4200 和 4201.我直接通过它们的端口访问它们: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 文件夹中，根据您的 Angular 版本和设置，它可能位于子目录下.您应该将/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屋！