容器化React-Django应用Nginx配置问题：API请求失败排查

核心问题解析 #

React应用运行在浏览器端，前端发起的API请求是从用户浏览器发送的，而非前端容器内部。backend:8000是Docker Compose内部的服务域名，仅在容器私有网络内可解析，浏览器无法识别该地址，这是请求失败的根本原因。

具体排查与修复步骤 #

1. 调整Nginx配置，新增API请求代理 #

需要让Nginx同时处理前端页面和API请求转发，将浏览器发送的API请求导向后端容器。示例配置如下：

server {
    listen 80;
    server_name your-ec2-public-ip-or-domain; # 替换为你的EC2公网IP或域名

    # 代理前端页面请求
    location / {
        proxy_pass http://172.20.0.3:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 代理API请求，转发至后端容器
    location /api/ {
        proxy_pass http://172.20.0.2:8000/; # 替换为后端容器的实际内网IP
        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;
    }
}

• 后端容器内网IP可通过docker inspect backend-container | grep "IPAddress"命令获取；更稳妥的方式是将Nginx加入Docker Compose的共享网络，这样可直接使用服务名backend:8000作为proxy_pass目标，无需硬写IP。

2. 修改React应用的API请求路径 #

将React中的API请求地址改为相对路径，比如/api/demoapp/allBooks，浏览器会自动将请求发送到当前域名的/api路径，再由Nginx转发至后端。

若需区分开发/生产环境，可配置React环境变量：

• 开发环境：REACT_APP_API_URL=http://localhost:8000
• 生产环境：REACT_APP_API_URL=/api

代码中调用示例：

const API_BASE = process.env.REACT_APP_API_URL;
fetch(`${API_BASE}/demoapp/allBooks`)
  .then(res => res.json())
  .then(data => console.log(data));

3. 验证网络连通性 #

• 登录EC2宿主机，测试能否访问后端服务：curl http://[backend-container-ip]:8000/demoapp/allBooks
• 若Nginx是Docker容器部署，确保它与后端、前端容器处于同一Docker网络，可直接用服务名访问后端。

4. 检查防火墙与安全组 #

• 确认EC2安全组允许80（或443）端口的入站流量
• 检查EC2宿主机防火墙（如ufw）是否开放了相关端口

5. 查看日志定位问题 #

• Nginx日志：tail -f /var/log/nginx/access.log /var/log/nginx/error.log，检查请求是否到达Nginx及转发错误
• 后端容器日志：docker logs backend-container，确认请求是否到达后端服务
• 前端容器日志：docker logs frontend-container，排查前端代码层面的错误

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