EC2实例上React前端Docker容器无法连接Flask后端容器

核心问题 #

在AWS EC2实例通过docker-compose部署React前端和Flask后端容器，本地运行时交互流程正常，但部署到EC2后React容器未向后端发送请求，后端Docker日志无相关请求记录。

当前docker-compose配置：

version: "3.9"
services:
  frontend:
    image: omarsater/private-repo:react-v1.0
    ports:
      - "3000:3000"
    depends_on:
      - backend
  backend:
    image: omarsater/private-repo:flask-v1.0
    ports:
      - "5000:5000"

排查方向与解决步骤 #

1. 修正React前端的API请求地址 #

本地运行时，前端可能用http://localhost:5000访问后端，但部署到EC2后，这个地址指向React容器内部的localhost，而非Flask后端容器。

解决方式：

• 将前端代码中的API请求地址改为http://backend:5000（docker-compose会自动为同一网络内的服务创建DNS解析，服务名backend可直接映射到后端容器）。
• 更灵活的方式是用环境变量配置，在docker-compose的frontend服务中添加：

  environment:
    - REACT_APP_API_URL=http://backend:5000
  

  前端代码中通过process.env.REACT_APP_API_URL调用接口，便于后续调整。

2. 确认Flask后端的绑定地址 #

Flask默认绑定127.0.0.1，这会导致仅容器内部能访问后端，同一网络的React容器无法连接。

解决方式：

• 修改Flask启动命令，绑定0.0.0.0：
  • 使用flask命令：flask run --host=0.0.0.0 --port=5000
  • 使用gunicorn：gunicorn -b 0.0.0.0:5000 app:app
• 确保后端Dockerfile中已配置正确的启动命令，示例：

  CMD ["flask", "run", "--host=0.0.0.0", "--port=5000"]
  

3. 验证Docker网络连通性 #

docker-compose默认会为所有服务创建专属网络，两个容器应处于同一网络：

• 执行docker-compose exec frontend ping backend，能ping通则网络正常；若不通，检查是否自定义了网络但未将两个服务加入同一网络。

额外说明 #

EC2安全组的入站规则只需开放3000端口（供外部访问前端），后端5000端口无需对外暴露——因为前端与后端的交互在EC2内部的Docker网络中进行，不需要经过公网。

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