如何通过Docker自动构建Flask与Angular应用？无需手动预构建前端

直接修改你的Dockerfile为多阶段构建，就能在执行docker compose up --build时自动完成Angular前端构建，并将产物传递给Flask后端，无需手动预构建或额外脚本。

1. 修改后端Dockerfile #

替换原Dockerfile内容为以下多阶段构建版本：

# 第一阶段：构建Angular前端
FROM node:latest as builder
WORKDIR /frontend
# 复制前端项目文件到容器内
COPY frontend/ .
# 安装依赖并构建前端
RUN npm install
RUN ng build  # 若使用Angular旧版本，可添加--prod参数

# 第二阶段：构建Flask后端
FROM python:latest
WORKDIR /backend
# 从前端构建阶段复制dist产物到后端目录
# 注意：替换[你的Angular项目名]为实际项目名称（ng build生成的dist下的子目录名）
COPY --from=builder /frontend/dist/[你的Angular项目名] /backend/dist
# 复制后端依赖文件和源码
COPY backend/requirements.txt .
COPY backend/src /backend/src/
# 安装Python依赖
RUN pip install -r requirements.txt
# 启动Flask应用
CMD ["python", "./src/app.py"]

2. 确保docker-compose.yml配置正确 #

你的docker-compose.yml只需指定使用该Dockerfile构建后端服务即可，示例配置：

version: '3.8'
services:
  backend:
    build: .
    ports:
      - "5000:5000"  # 根据你的Flask端口调整
    volumes:
      # 开发阶段可挂载源码目录方便调试，生产环境可移除
      - ./backend/src:/backend/src

关键说明 #

• 多阶段构建会先启动Node容器完成前端构建，再将产物复制到Python容器，整个流程完全在Docker内部执行，无需本地安装Node.js或Angular CLI。
• 若你的Angular项目构建后dist目录下没有子目录（比如新版本Angular默认输出到dist/），则将COPY命令中的/frontend/dist/[你的Angular项目名]改为/frontend/dist。

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