在同一台服务器上使用nginx服务多个angular docker容器

eqfvzcg8  于 5个月前  发布在  Docker
关注(0)|答案(1)|浏览(59)

我有一个虚拟机运行三个docker容器(2个angular应用程序),每个容器都有自己的nginx配置。虚拟机本身也有一个nginx配置,用于处理SSL并将流量转发到每个docker容器,以下是配置文件:
主机nginx:

server {
    listen 443 ssl http2;
    server_name example.net;

    ssl_certificate /etc/nginx/ssl/cert_net_combined.crt;
    ssl_certificate_key /etc/nginx/ssl/example.net.key;

    location / {
        proxy_pass http://localhost:8000;  # Docker container is on the same server
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location /example-backoffice {
        proxy_pass http://localhost:8001;  # backoffice app docker container     
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location ~ /myapi/api/(.*) {
        proxy_pass http://xxx.xxx.xx.x:8080/myapi/api/v1/$1$is_args$args;
        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_pass_request_headers      on;
    }
}

字符串
nginx for angular app docker container 1(port 8000):

server {
    listen 8000;
    listen [::]:8000;

    server_name localhost;

    root /usr/share/nginx/html/;

    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    location /example/ {
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    location / {
        port_in_redirect off;
        rewrite ^/$ /example/ redirect;
    }

    error_page 404 /404.html;
    location = /404.html {
        internal;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        internal;
    }

    proxy_connect_timeout 300;
    proxy_send_timeout 300;
    proxy_read_timeout 300;
    send_timeout 300;
    keepalive_timeout 300;
}


nginx for angular app docker container 2(port 8001):

server {
    listen 8001;
    listen [::]:8001;

    server_name localhost;

    root /usr/share/nginx/html/;

    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    location /example-backoffice/ {
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    location / {
        port_in_redirect off;
        rewrite ^/$ /example-backoffice/ redirect;
    }

    error_page 404 /404.html;
    location = /404.html {
        internal;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        internal;
    }

    proxy_connect_timeout 300;
    proxy_send_timeout 300;
    proxy_read_timeout 300;
    send_timeout 300;
    keepalive_timeout 300;
}


正如你所看到的,两个angular应用程序的nginx配置几乎相同,唯一的区别是它们监听的端口(8000和8001)和特定的url。
我想实现的是:

现在,如果我导航到https://example.net/,它运行良好,并显示正确的容器内容,但如果我导航到https://example.net/example-backoffice,我得到一个空白页面,http调用本身是成功的,并接缝获得index.html文件,但以下https调用容器中的应用程序内容失败:

我假设它失败了,因为当试图在/usr/share/nginx/html/的端口8001上获取docker容器内的angular应用程序的内容时,它失败了,因为它调用了https://example.net/而不是https://example.net/example-backoffice,后者将尝试从8000获取8001的内容。
所以现在的配置几乎完全工作,除了这个最后的重定向,但我不能找出我错过了什么,任何帮助将不胜感激。
注:如果需要更多的细节,让我知道
在VM中运行的容器:(docker ps)-所有在同一个docker网络上运行的容器

  • 80/tcp,0.0.0.0:8001->8001/tcp,:8001->8001/tcp双向前端
  • 80/tcp,0.0.0.0:8000->8000/tcp,:8000->8000/tcp前端
  • 0.0.0.0:8080->8080/tcp,:8080->8080/tcp后端

Angular app baseHrefs:

  • 端口8000容器:<base href="/example">
  • 端口8001容器:<base href="/example-backoffice">
ddrv8njm

ddrv8njm1#

所以我最终找到了一个解决方案,我将把它留在这里,以防它对其他人也有用。
基本上问题是在angular apps docker容器中nginx的配置中,特别是在这个块中:

location /example-backoffice/ {
    index index.html;
    try_files $uri $uri/ /index.html;
}

字符串
这个配置试图提供/usr/share/nginx/html/下的文件。然而,应用程序的实际配置试图从/usr/share/nginx/html/example-backoffice/获取文件,因此需要别名,这是最终结果:

location /example-backoffice/ {
    alias /usr/share/nginx/html/;
    index index.html;
    try_files $uri $uri/ /index.html;
}


alias指令允许通过指定alias /usr/share/nginx/html/来调整文件系统路径以定位文件,它在查找文件时有效地忽略了位置块路径(/example-backoffice/),并使用/usr/share/nginx/html/作为基本路径。
解决方案的另一部分是将index.html文件中的angular apps base href从:<base href="/example-backoffice">更新为<base href="/example-backoffice/">,以及angular.json文件:

"projects": {
    "example": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            "outputPath": "dist/example/",
            "baseHref": "/example/",
          }
        }
      }
   }
}

相关问题