AWS部署Docker前后端应用Nginx配置502错误排查求助

一、/admin路径502问题修复 #

尽管/api和/docs可正常访问，但/admin路径的转发配置存在细节问题，导致后端无法正确处理请求：

当前Nginx配置中location /admin/的proxy_pass未添加尾部斜杠，会引发请求路径拼接异常。修改Nginx配置如下：

location /admin/ {
    proxy_pass http://backend/;  # 末尾添加斜杠
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_redirect off;
}

说明：添加尾部斜杠后，Nginx会将/admin/xxx转发为http://backend/xxx，而非http://backend/admin/xxx，完美匹配Django admin的路由规则。

二、根路径/502问题修复 #

根路径对应前端服务，可从以下维度排查修复：

1. 确认前端服务监听端口 #

检查前端项目配置文件（如React的.env、Vue的vue.config.js），确保服务启动时监听3002端口。例如React项目需在.env中添加：

PORT=3002

2. 验证前端容器服务状态 #

进入前端容器，检查服务是否正常运行：

docker exec -it frontend sh
# 查看端口监听情况
netstat -tulpn | grep 3002

若无监听记录，说明前端启动命令或配置有误，需确认npm run start是否正确将服务绑定到3002端口。

3. 优化Nginx与前端的转发配置 #

调整根路径的proxy_pass，确保路径转发逻辑正确：

location / {
    proxy_pass http://frontend/;  # 末尾添加斜杠
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_redirect off;
    
    client_max_body_size 100M;

    proxy_connect_timeout 600;
    proxy_send_timeout 600;
    proxy_read_timeout 600;
    send_timeout 600;
}

4. 解决容器启动顺序问题 #

depends_on仅保证容器启动顺序，无法确保服务就绪。可在Nginx容器中添加健康检查，等待前后端服务就绪后再对外提供服务：
修改docker-compose.yml的nginx服务配置：

nginx:
    build: ./nginx
    ports:
      - 80:80
    depends_on:
      - backend
      - frontend
    healthcheck:
      test: ["CMD", "curl", "-f", "http://backend:8000/api/health"] # 替换为实际后端健康检查接口
      interval: 10s
      timeout: 5s
      retries: 5

三、通用排查步骤 #

1. 查看Nginx日志定位具体错误：

docker logs nginx

日志会显示连接后端/前端失败的具体原因，比如端口不可达、连接超时等。

2. 检查容器间网络连通性：
   进入Nginx容器，测试与后端、前端的连通性：

docker exec -it nginx sh
# 测试后端连接
curl http://backend:8000/api/
# 测试前端连接
curl http://frontend:3002/

若curl请求失败，说明容器间网络存在问题，需检查Docker网络配置。

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