Docker化Nginx反向代理容器化Angular应用返回502错误如何解决

问题根因 #

502错误的核心是Docker容器间通信的端口使用错误：

• angular_app容器内部的Nginx实际监听的是80端口，Dockerfile中明确标注EXPOSE 80，你配置的ports: 5001:80是宿主机端口到容器内部端口的映射规则，仅对从宿主机发起的访问生效。
• 同Docker网络内的Nginx反向代理与其他容器通信时直接走内部网络，不使用宿主机的端口映射规则。你配置的proxy_pass http://agular_app:5001是尝试访问angular_app容器的5001端口，该端口在容器内部没有服务监听，所以触发日志中Connection refused的111错误，返回502。

localhost:5001可以正常访问是因为该请求从宿主机发起，走了端口映射规则，将请求转发到了容器内的80端口。

解决方案 #

• 修改反向代理Nginx的配置，将proxy_pass的端口替换为angular_app容器内部实际监听的80端口：

location / {
   proxy_pass http://agular_app:80;
}

• 确认反向代理Nginx服务和angular_app服务在同一个Docker网络下：如果两个服务写在同一个docker-compose.yml中，默认会加入同一网络无需额外配置；如果是分开部署，需要手动配置共享网络保证容器可互相通信。
• 重启反向代理Nginx容器即可生效。

额外说明：你之前将端口映射改为5001:5001无效的原因是angular_app容器内部的Nginx依然监听80端口，容器内5001端口没有服务响应，就算改了端口映射也无法正常通信。如果你需要容器内部也使用5001端口，可以修改angular_app自带的Nginx配置（即Dockerfile中复制的/etc/nginx/conf.d/default.conf），将监听端口改为5001，同步修改Dockerfile的EXPOSE值为5001即可。

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