AWS ECS同一任务内容器通信问题：React客户端无法访问Flask后端

你的核心问题出在前端请求的执行环境误解：

• React代码是在用户的浏览器中运行的，并非在ECS的Nginx容器内部。所以你用http://localhost:5000时，这个localhost指向的是用户自己的本地机器，而非ECS任务中的Flask容器。
• 用容器名http://ABC-server:5000也不行，因为容器名仅能在ECS任务的内部网络中被解析，而浏览器处于外部网络，无法识别这个域名。

推荐使用Nginx反向代理的方案，这是容器化前后端同任务部署的标准做法：

步骤1：修改前端请求路径 #

将React代码中所有向后端发起的请求，改为相对路径或基于当前域名的路径。比如：

• 原请求：http://localhost:5000/api/user
• 修改为：/api/user

步骤2：配置Nginx反向代理 #

在React项目中新增Nginx配置文件（比如nginx.conf），添加反向代理规则，将前端的/api路径转发到同一任务内的Flask容器：

server {
    listen 80;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html index.htm;

    # 处理前端SPA路由
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 反向代理后端请求
    location /api {
        proxy_pass http://ABC-server:5000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

步骤3：修改React的Dockerfile #

将自定义的Nginx配置文件打包到镜像中，替换默认配置：

# 构建React项目
FROM node:18-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 部署到Nginx
FROM nginx:alpine
# 复制自定义Nginx配置
COPY nginx.conf /etc/nginx/conf.d/default.conf
# 复制构建好的React静态文件
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

额外检查点 #

1. 确认Flask绑定地址：确保Flask代码中监听的是0.0.0.0而非127.0.0.1，否则容器内部无法访问：

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

2. 验证容器网络连通性：可以进入Nginx容器内部，执行curl ABC-server:5000，确认能正常访问Flask接口，排查网络连通问题。

如果仅需快速验证，可直接使用ECS任务的公网IP+5000端口作为前端请求地址，比如http://<ECS公网IP>:5000/api/user。但这种方式会将后端直接暴露在公网，存在安全风险，仅用于测试。

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