Docker Compose下Nginx反向代理Angular报502连接拒绝问题

日志报111: Connection refused说明Nginx容器已经成功解析到angularboite容器的IP，但无法建立4200端口的TCP连接，核心问题集中在3点：

• Angular默认npm start启动的开发服务仅绑定容器内的127.0.0.1回环地址，同Docker网络下的其他容器（包括反向代理Nginx）无法访问这个回环端口，是该场景下90%以上502错误的直接诱因。
• 服务依赖顺序逻辑颠倒：现有配置中数据库、Angular服务都依赖反向代理，实际应该是反向代理依赖后端业务服务，且depends_on仅保证容器启动顺序，不等待服务真正就绪，Angular服务执行npm install、启动编译需要数十秒，启动初期Nginx发起连接时服务还未监听端口也会报拒绝。
• 配置存在额外瑕疵：Flowable的数据库连接使用host.docker.internal在Linux环境默认不生效、Nginx路径转发规则不匹配、非必要端口对外映射存在安全隐患。

1. 修复Angular服务监听地址 #

修改Angular应用的Dockerfile，启动时指定绑定所有网卡地址，允许同网络容器访问：

FROM node:latest as node 
WORKDIR /app
COPY . .
RUN npm install -f
EXPOSE 4200
# 关键修改：传入--host 0.0.0.0参数，让服务监听所有网卡而非仅本地回环
ENTRYPOINT ["npm","start","--","--host","0.0.0.0"]

如果项目根目录有angular.json配置，也可以直接在serve配置块中固定默认监听地址：

"serve": {
  "options": {
    "host": "0.0.0.0",
    "port": 4200
  }
}

2. 修正docker-compose配置逻辑 #

调整依赖顺序，移除不必要的端口映射（同Docker网络内服务互访不需要映射端口到宿主机，可避免服务被绕过反向代理直接访问），修正数据库连接地址：

services:
  reverseproxy:
    build:
      context: .
      dockerfile: nginx.Dockerfile
    ports:
      - "443:443" 
      - "80:80" 
    restart: always
    # 反向代理依赖两个后端服务，等业务容器启动后再启动代理
    depends_on:
      - flowableui
      - angularboite
    volumes:
      - ./nginx/conf/:/etc/nginx/conf.d/:ro

  postgres:
    build:
      context: .
      dockerfile: postgres.Dockerfile
    environment:
      - POSTGRES_USER=flowable
      - POSTGRES_PASSWORD=flowable
      - POSTGRES_DB=flowable
      - POSTGRES_HOST_AUTH_METHOD=password  
    restart: always

  flowableui:
    depends_on:
      - postgres
    build:
      context: .
      dockerfile: flowable.Dockerfile
    environment:
      - SPRING_DATASOURCE_DRIVER-CLASS-NAME=org.postgresql.Driver
      # 直接使用同网络下的服务名+容器内端口连接数据库，兼容所有系统环境
      - SPRING_DATASOURCE_URL=jdbc:postgresql://postgres:5432/flowable
      - SPRING_DATASOURCE_USERNAME=flowable 
      - SPRING_DATASOURCE_PASSWORD=flowable 
    restart: always

  angularboite:
    depends_on:
      - flowableui
    build:
      context: ./BoiteATacheTemplate
      dockerfile: Dockerfile
    restart: always

若启动初期偶发502，可搭配wait-for-it脚本检测Angular、Flowable的端口存活，确认服务就绪后再启动Nginx。

3. 修正Nginx转发规则 #

调整upstream重试配置，修复路径转发逻辑，增加超时参数适配服务启动阶段的等待需求：
首先修改upstream块，增加失败重试配置：

upstream service2 {
    server angularboite:4200 max_fails=3 fail_timeout=30s;
}

替换原有/boite路径的location配置，修正路径转发规则：

# 处理不带斜杠的路径访问，自动补全后缀避免路径匹配错误
location = /boite {
    return 301 /boite/;
}
location /boite/ {
    proxy_pass         http://service2/;
    proxy_redirect     off;
    proxy_http_version 1.1;
    proxy_cache_bypass $http_upgrade;
    proxy_set_header   Upgrade $http_upgrade;
    proxy_set_header   Connection keep-alive;
    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-Proto $scheme;
    proxy_set_header   X-Forwarded-Host $server_name;
    proxy_buffer_size           128k;
    proxy_buffers               4 256k;
    proxy_busy_buffers_size     256k;
    # 增加超时时间，适配服务启动阶段的连接等待
    proxy_connect_timeout 30s;
    proxy_send_timeout 30s;
    proxy_read_timeout 30s;
    log_not_found off;
}

4. 验证流程 #

所有配置修改完成后，执行命令重新构建启动集群：

docker-compose down
docker-compose build --no-cache angularboite reverseproxy
docker-compose up -d

启动后等待1分钟左右（等待Angular开发服务完成编译启动），进入Nginx容器验证内部连通性：

docker-compose exec reverseproxy curl http://angularboite:4200

如果命令返回Angular应用的HTML内容，说明内部网络连通正常，此时通过域名访问/boite路径即可正常加载页面，不会再出现502错误。

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