React前端与Flask后端Docker部署后无法连接的问题排查求助

你的前端请求后端出现连接错误，核心是Docker配置存在多处关键问题，以下是具体修正方案：

1. 核心问题梳理 #

• Docker Compose中API与前端的构建路径完全重复，导致服务构建逻辑错误
• Flask默认仅绑定127.0.0.1，容器内服务无法被其他容器访问
• 前端请求地址可能误用localhost，容器内的localhost指向自身而非API服务
• Dockerfile环境变量写法存在空格，导致配置不生效

2. 修正后的配置文件 #

假设项目目录结构 #

项目根目录/
├── backend/          # Flask后端代码
│   ├── app.py
│   ├── requirements.txt
│   └── Dockerfile
├── frontend/         # React前端代码
│   ├── package.json
│   ├── src/
│   └── Dockerfile
└── docker-compose.yml

修正Flask后端Dockerfile

FROM python:3.9.0

WORKDIR /ProyectoTitulo

# 环境变量去掉多余空格，确保生效
ENV FLASK_APP=app.py
ENV FLASK_ENV=development

COPY ./requirements.txt .
RUN pip install -r requirements.txt

COPY . .

RUN python -m nltk.downloader all

# 强制Flask绑定0.0.0.0，允许容器外部/其他容器访问
CMD ["flask", "run", "--host=0.0.0.0"]
# 若直接运行app.py，需在代码中添加：if __name__ == '__main__': app.run(host='0.0.0.0')

修正React前端Dockerfile

FROM node:16-alpine

WORKDIR /app

# 同步复制package-lock.json提升构建缓存效率
COPY ./package.json ./package-lock.json* ./
RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "start"]

修正docker-compose.yml

services:
  api:
    build:
      context: ./backend  # 明确指向后端代码目录
      dockerfile: Dockerfile
    image: python-docker
    networks:
      - app-network

  client:
    build:
      context: ./frontend  # 明确指向前端代码目录
      dockerfile: Dockerfile
    image: react-front
    ports:
      - "3000:3000"
    networks:
      - app-network
    # 传递API地址环境变量给前端
    environment:
      - REACT_APP_API_URL=http://api:5000

# 显式定义容器网络，确保服务间可通过服务名通信
networks:
  app-network:
    driver: bridge

3. 前端代码适配 #

前端请求需使用环境变量指定API地址，避免硬编码localhost：

// 示例：Axios配置
import axios from 'axios';

const apiClient = axios.create({
  baseURL: process.env.REACT_APP_API_URL || 'http://localhost:5000',
});

4. 关键修改说明 #

• 构建路径修正：确保API和前端服务分别从各自代码目录构建，避免服务混淆
• Flask网络绑定：0.0.0.0让容器监听所有网卡，允许同一Docker网络内的前端服务访问
• 容器网络通信：通过服务名api可直接访问后端，Docker Compose会自动解析服务IP
• 环境变量传递：前端通过REACT_APP_API_URL获取正确的API地址，避免跨容器访问失败

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