Docker Compose 实现前后端分离项目单机一键 CI 的核心是通过 docker-compose.yml 编排构建、测试、打包、启动全链路，配合 ci.sh 脚本触发；前端用多阶段构建（Node 构建 + Nginx 托管），后端用 slim 基础镜像运行 JAR 或 Node 服务，MySQL/Redis 复用官方镜像并持久化，各服务通过 depends_on 和环境变量解耦，支持本地调试与健康检查。

用 Docker Compose 实现前后端分离项目的单机一键 CI，核心是把构建、测试、打包、启动全链路容器化，靠 docker-compose.yml 编排串联，再配合简单脚本触发。不依赖 Jenkins 或 GitLab CI 等外部服务，适合开发自测、预发验证或小团队轻量交付。

明确各服务职责与镜像来源

前后端通常独立构建和运行：

• 前端（如 Vue/React）：用 Node.js 构建静态资源，产出 dist/ 目录；再用 Nginx 镜像托管，无需自建 Web 服务器
• 后端（如 Spring Boot/Express）：Java 项目可直接构建 JAR 并用 OpenJDK 基础镜像运行；Node 后端可用官方 node:alpine 镜像，通过 npm install && npm start 启动
• 数据库/缓存（如 MySQL/Redis）：直接复用官方镜像，用 volumes 持久化数据，depends_on 控制启动顺序

用多阶段构建减少镜像体积

避免在最终镜像里塞编译环境。以 Vue 前端为例：

• 第一阶段：用 node:18-alpine 安装依赖、执行 npm run build
• 第二阶段：用 nginx:alpine，只复制第一阶段生成的 dist/ 到 /usr/share/nginx/html
• 最终镜像不到 20MB，且不含 Node.js 和源码

后端同理，Spring Boot 可用 maven:3.9-openjdk-17-slim 构建，再 COPY JAR 到 eclipse-jetty:11-jre17-slim 或直接用 openjdk:17-jre-slim 运行。

Compose 文件统一管理生命周期

docker-compose.yml 不只定义运行时，还要支持构建和本地调试：

• 每个服务用 build: 指向对应 Dockerfile，而非固定镜像名
• 前端加 environment: 支持不同 API 地址（如 VUE_APP_API_BASE_URL=http://backend:8080），避免硬编码
• 后端暴露 8080 给前端容器访问，同时映射 localhost:8080 方便浏览器调试
• 加 restart: unless-stopped 和健康检查（healthcheck）提升稳定性

一键触发脚本封装关键动作

写一个 ci.sh（或 Makefile）整合常用操作：

• ./ci.sh build：执行 docker compose build --no-cache，强制重建所有服务
• ./ci.sh up：执行 docker compose up -d --remove-orphans，后台启动并清理旧容器
• ./ci.sh logs -f frontend：快速查看前端日志
• 可选加入单元测试：在构建阶段运行 npm test 或 ./mvnw test，失败则中断构建

这样开发者只需拉代码 → 执行 ./ci.sh build && ./ci.sh up → 浏览器打开 http://localhost，全程无需手动启停或查端口冲突。