AWS EC2上Docker容器：React前端无法访问Node后端API咨询

我太懂这种本地跑的好好的，一上云就掉链子的痛苦了！咱们一步步拆解问题，搞定它：

核心问题根源 #

本地环境下你用http://localhost:3000/someendpoint能访问，是因为Docker Compose默认会把所有服务放到同一个bridge网络里，而且你的电脑浏览器/前端容器的localhost指向的是主机，刚好能转发到后端容器。但到了EC2上，前端容器里的localhost指的是容器自己，不是EC2主机或者后端容器，而且如果是浏览器端发起请求，还得考虑EC2安全组的限制。

具体配置修复步骤 #

1. 修正Docker Compose的网络与环境变量 #

首先确保两个服务在同一个Docker网络里，并且前端用后端服务名（不是localhost）来访问API。修改你的docker-compose.yml：

version: '3.8'
services:
  # 前端React服务
  react-frontend:
    build: ./your-react-folder
    ports:
      - "80:3000" # 把前端映射到EC2的80端口，方便公网访问
    networks:
      - app-shared-network
    # 给前端设置API地址的环境变量，用后端的服务名
    environment:
      - REACT_APP_API_BASE_URL=http://node-backend:5000

  # 后端Node API服务
  node-backend:
    build: ./your-node-folder
    ports:
      - "5000:5000" # 如果是浏览器端请求，需要映射端口；容器内部通信可以不用
    networks:
      - app-shared-network
    environment:
      - NODE_ENV=production

# 显式定义共享网络，确保两个服务在同一网络
networks:
  app-shared-network:
    driver: bridge

注意：React应用里要使用这个环境变量来拼接API地址，比如${process.env.REACT_APP_API_BASE_URL}/someendpoint，别再硬编码localhost了！

2. 确保Node API监听正确的地址 #

很多人踩坑在这里：Node服务如果只监听localhost，那只能在容器内部访问，同网络的其他容器连不上。修改你的Node启动代码：

// 把监听地址改成0.0.0.0，允许所有网卡访问
app.listen(5000, '0.0.0.0', () => {
  console.log('Node API running on port 5000');
});

3. 配置EC2安全组（针对浏览器端请求场景） #

如果你的用户是通过浏览器访问EC2公网IP的前端，然后前端从浏览器发起API请求，那得给EC2安全组加一条入站规则：

• 类型：自定义TCP
• 端口范围：5000（你的Node API端口）
• 源：可以选0.0.0.0/0（允许所有公网访问，适合测试），或者限制成特定IP段（生产环境更安全）

如果只是前端容器内部发起请求（比如服务端渲染、容器内脚本调用API），那不需要开放这个端口，因为容器间通信是在Docker内部网络，不会走EC2的公网安全组。

验证方法 #

改完配置后，咱们验证一下：

1. 重新启动容器：docker-compose down && docker-compose up -d
2. 进入前端容器内部测试连通性：

   # 替换成你的前端容器名称
   docker exec -it react-frontend ping node-backend
   

   能ping通说明网络没问题。
3. 测试API请求：

   docker exec -it react-frontend curl http://node-backend:5000/someendpoint
   

   能拿到正常响应的话，容器间通信就没问题了。
4. 如果是浏览器端请求，打开浏览器开发者工具的网络面板，看API请求的状态——如果是200就搞定了，要是超时就检查安全组，404就检查地址有没有写错。

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