单Docker容器运行React+Flask应用多阶段构建失败求助

我尝试用多阶段构建在Docker容器中运行React+Flask应用，但构建运行失败，寻求技术协助！

本地项目结构 #

projDir/
|-- my-app/
| |---- (React文件)
|-- Backend/
| |---- (Flask文件)
|-- docker-compose.yml
|-- Dockerfile

当前Dockerfile内容 #

# 阶段1：后端构建
FROM python:3.6-alpine as backend
WORKDIR /app/Backend
COPY Backend/ .
COPY Backend/requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

# 阶段2：前端构建
FROM node:16-alpine as frontend
WORKDIR /app/my-app
COPY my-app/package*.json ./
RUN npm install
COPY my-app/ .
COPY my-app/build my-app/build

# 阶段3：合并后端与前端
FROM python:3.6-alpine
WORKDIR /app
COPY --from=backend /app/Backend /app/Backend
COPY --from=backend /usr/local/lib/python3.6/site-packages /usr/local/lib/python3.6/site-packages
COPY --from=frontend /app/my-app /app/my-app

# 暴露端口5000供外部访问
EXPOSE 5000

# 定义环境变量
ENV NAME World

# 容器启动时运行后端服务
CMD ["python", "/app/Backend/server.py"]

问题分析与修复方案 #

核心问题点 #

• 前端未执行打包命令：前端构建阶段没有运行npm run build生成静态文件，且COPY my-app/build my-app/build属于无效操作——此时build目录根本不存在。
• 重复复制文件：后端阶段中COPY Backend/ .已经包含了requirements.txt，后续单独复制该文件完全多余。
• Flask未配置静态文件路径：最终镜像中，Flask需要明确指向React打包后的静态资源目录，否则无法访问前端页面。

修复后的Dockerfile #

# 阶段1：后端构建
FROM python:3.6-alpine as backend
WORKDIR /app/Backend
# 一次性复制后端所有文件，无需单独复制requirements.txt
COPY Backend/ .
# Alpine镜像安装依赖时可能需要gcc等编译工具，添加临时依赖后清理
RUN apk add --no-cache gcc musl-dev && \
    pip install --no-cache-dir -r requirements.txt && \
    apk del gcc musl-dev

# 阶段2：前端构建
FROM node:16-alpine as frontend
WORKDIR /app/my-app
COPY my-app/package*.json ./
RUN npm install
COPY my-app/ .
# 执行React打包命令，生成build目录
RUN npm run build

# 阶段3：合并后端与前端
FROM python:3.6-alpine
WORKDIR /app
# 复制后端代码和已安装的依赖包
COPY --from=backend /app/Backend /app/Backend
COPY --from=backend /usr/local/lib/python3.6/site-packages /usr/local/lib/python3.6/site-packages
# 只复制前端打包后的build目录，无需复制整个my-app（节省镜像体积）
COPY --from=frontend /app/my-app/build /app/Backend/static

# 暴露端口5000
EXPOSE 5000

ENV NAME World

# 启动后端服务
CMD ["python", "/app/Backend/server.py"]

额外配置说明 #

需要在Flask的server.py中添加静态文件路由配置，确保能访问React的静态资源：

from flask import Flask, send_from_directory
import os

app = Flask(__name__, static_folder='static', static_url_path='')

# API路由示例
@app.route('/api/hello')
def hello():
    return {'message': f'Hello {os.getenv("NAME", "World")}'}

# 匹配所有非API路径，返回React首页
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def serve_react(path):
    if path != "" and os.path.exists(os.path.join(app.static_folder, path)):
        return send_from_directory(app.static_folder, path)
    else:
        return send_from_directory(app.static_folder, 'index.html')

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

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