我有一个虚拟机运行三个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/ =>显示在端口8000上暴露的容器的内容
- https://example.net/example-backoffice =>显示在端口8001上暴露的容器的内容
现在,如果我导航到https://example.net/
,它运行良好,并显示正确的容器内容,但如果我导航到https://example.net/example-backoffice
,我得到一个空白页面,http调用本身是成功的,并接缝获得index.html
文件,但以下https调用容器中的应用程序内容失败:
- https://example.net/example-backoffice/(304未修改-绿色)
- 404 Not Found Not Found
- 404 Not Found Not Found
- 404 Not Found Not Found
- 404 Not Found Not Found
我假设它失败了,因为当试图在/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">
1条答案
按热度按时间ddrv8njm1#
所以我最终找到了一个解决方案,我将把它留在这里,以防它对其他人也有用。
基本上问题是在angular apps docker容器中nginx的配置中,特别是在这个块中:
字符串
这个配置试图提供/usr/share/nginx/html/下的文件。然而,应用程序的实际配置试图从
/usr/share/nginx/html/example-backoffice/
获取文件,因此需要别名,这是最终结果:型
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文件:型