如何通过Nginx反向代理访问Docker容器中的Angular应用

环境与现象 #

• 容器化服务包含：reverse-proxy（Nginx，端口3333）、main_client（Vue.js，占用根路径）、service_1（Flask应用）、angular-service（Angular+Nginx）
• Flask服务可通过localhost:3333/toy-flask-service正常访问，但Angular应用通过localhost:3333/angular-service访问时出错
• 直接运行Angular容器，localhost:4200可正常加载；通过反向代理访问时，浏览器控制台报错：

Loading module from “http://localhost:3333/runtime-es2017.b7ccab836de1e8b6cb8e.js” was blocked because of a disallowed MIME type (“text/html”).

• 直接访问http://localhost:3333/angular-service/runtime-es2017.b7ccab836de1e8b6cb8e.js能正常显示JS内容，说明Angular加载资源时未添加angular-service/前缀

现有配置 #

Angular+Nginx镜像Dockerfile #

#stage 1
FROM node:14.21-slim as node
WORKDIR /app
COPY . .
RUN npm install
RUN npm run ng -- build --prod

#stage 2
FROM nginx:alpine
COPY --from=node /app/dist/my-app /usr/share/nginx/html

• Angular容器使用默认Nginx配置

反向代理Nginx配置 #

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
  worker_connections 1024;
}

http {
  server {
    listen 3333;
    server_name localhost 127.0.0.1;

    location / {
        proxy_pass          http://main-client-app:80;
        proxy_set_header    X-Forwarded-For $remote_addr;
    }

    location /toy-flask-service {
        proxy_pass          http://toy-flask-service:5001/;
        proxy_set_header    X-Forwarded-For $remote_addr;
    }

    location /angular-service {
        proxy_pass          http://angular-service:80/;
        proxy_set_header    X-Forwarded-For $remote_addr;
        proxy_http_version 1.1;  
        proxy_set_header Upgrade $http_upgrade;  
        proxy_set_header Connection 'upgrade';  
        proxy_set_header Host $host;  
        proxy_cache_bypass $http_upgrade;
    }
  }
}

已尝试的无效操作 #

• 在反向代理http块添加include /etc/nginx/mime.types;，无效果
• 配置rewrite /?angular-service/(.*)$ /$1 break;规则
• 添加静态资源try_files规则：

location ~ ^/angular-service/.*\.(html|js|css|eot|svg|ttf|woff|woff2|png|gif|ico|jpg|jpeg)$ {    
    try_files $request_uri $request_uri/ =404;  
}

• 注：若将Angular服务的location改为根路径（替换main-client的配置），应用可正常加载，仅非根路径下存在问题

疑问 #

反向代理的nginx.conf中缺少哪些配置才能解决Angular的路径问题？

内容的提问来源于stack exchange，提问作者gmcc051