1. 为什么需要Docker Compose编排前后端项目前后端分离架构已经成为现代Web开发的主流模式但随之而来的环境配置问题让很多开发者头疼。想象一下这样的场景你刚写完一个Vue前端项目和一个SpringBoot后端服务本地测试一切正常。但当你要把项目交给同事或部署到演示环境时对方可能需要安装Node.js环境运行前端配置Java环境和MySQL数据库运行后端处理端口冲突和网络连接问题记住复杂的启动顺序数据库→后端→前端我在第一次部署这种项目时花了整整两天时间处理环境问题。直到发现了Docker Compose这个神器——它就像个智能管家把所有这些麻烦事打包成一个简单的docker-compose up命令。2. 环境准备与工具安装2.1 Docker Desktop基础配置首先确保你的开发机已经安装Docker DesktopWindows/Mac通用。这里有个小技巧安装完成后一定要做这两步配置设置国内镜像加速否则拉取镜像会慢如蜗牛# 在Docker设置中找到Docker Engine添加以下配置 { registry-mirrors: [ https://registry.docker-cn.com, http://hub-mirror.c.163.com ] }分配足够资源建议至少4GB内存。我遇到过前端构建时因为内存不足导致容器崩溃的情况特别是Webpack项目需要较大内存。2.2 验证安装打开终端运行这几个命令确保一切就绪docker --version # 应显示Docker版本 docker-compose --version # 显示Compose版本 docker run hello-world # 测试基础功能注意Windows用户如果遇到WSL相关错误需要先安装WSL2内核更新包。这是微软官方文档中经常被忽略的步骤。3. 项目结构与Docker化改造3.1 典型项目目录结构这是我推荐的标准目录布局已经过多个项目验证my-project/ ├── backend/ # 后端项目 │ ├── src/ # 源代码 │ ├── Dockerfile # 后端Docker配置 │ └── pom.xml # Maven配置 ├── frontend/ # 前端项目 │ ├── public/ # 静态资源 │ ├── src/ # Vue/React代码 │ ├── Dockerfile # 前端Docker配置 │ └── nginx.conf # 前端Nginx配置 └── docker-compose.yml # 核心编排文件3.2 后端Dockerfile详解以SpringBoot项目为例这是经过优化的Dockerfile# 使用官方镜像比openjdk镜像更小 FROM eclipse-temurin:17-jdk-jammy # 设置工作目录避免路径问题 WORKDIR /app # 先单独复制pom文件利用缓存层加速构建 COPY pom.xml . # 下载依赖注意Maven镜像也需要配置国内源 RUN mvn dependency:go-offline # 复制源码并打包 COPY src ./src RUN mvn package -DskipTests # 使用分层构建减少镜像体积 FROM eclipse-temurin:17-jre-jammy COPY --from0 /app/target/*.jar app.jar # 健康检查关键 HEALTHCHECK --interval30s --timeout3s \ CMD curl -f http://localhost:8080/actuator/health || exit 1 EXPOSE 8080 ENTRYPOINT [java,-jar,/app.jar]3.3 前端Dockerfile配置Vue项目的Dockerfile需要特别注意静态资源路径# 使用官方Nginx镜像alpine版本体积最小 FROM nginx:1.23-alpine # 删除默认配置 RUN rm /etc/nginx/conf.d/default.conf # 复制自定义Nginx配置 COPY nginx.conf /etc/nginx/conf.d # 复制打包后的文件 COPY dist /usr/share/nginx/html # 设置时区解决日志时间错乱问题 RUN apk add --no-cache tzdata \ cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \ echo Asia/Shanghai /etc/timezone EXPOSE 80对应的nginx.conf配置要点server { listen 80; server_name localhost; # 开启gzip压缩 gzip on; gzip_types text/plain application/javascript application/x-javascript text/css; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } # 接口代理设置关键 location /api { proxy_pass http://backend:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }4. 编写docker-compose.yml核心配置4.1 基础服务定义version: 3.8 services: # 后端服务 backend: build: ./backend container_name: app-backend ports: - 8080:8080 environment: - SPRING_PROFILES_ACTIVEdev - DB_URLjdbc:mysql://db:3306/app_db depends_on: db: condition: service_healthy healthcheck: test: [CMD, curl, -f, http://localhost:8080/actuator/health] interval: 30s timeout: 5s retries: 3 # 前端服务 frontend: build: ./frontend container_name: app-frontend ports: - 80:80 depends_on: backend: condition: service_started # MySQL数据库 db: image: mysql:8.0 container_name: app-db environment: MYSQL_ROOT_PASSWORD: rootpass MYSQL_DATABASE: app_db MYSQL_USER: app_user MYSQL_PASSWORD: userpass volumes: - db_data:/var/lib/mysql ports: - 3306:3306 healthcheck: test: [CMD, mysqladmin, ping, -h, localhost] timeout: 20s retries: 10 volumes: db_data:4.2 关键配置解析网络互联默认情况下Compose会创建专用网络服务间可直接通过服务名访问如backend容器访问db容器只需用db:3306健康检查这是保证启动顺序的关键。我曾在没配置healthcheck时踩坑——前端已经启动但后端还没准备好导致页面报错。数据持久化通过volumes将MySQL数据保存在宿主机避免容器删除后数据丢失。环境变量敏感信息应该通过.env文件管理而不是硬编码在yml中# .env文件示例 DB_PASSWORDsecurepassword1235. 实战操作全流程5.1 一键启动项目# 构建镜像并启动所有服务-d表示后台运行 docker-compose up -d # 查看各容器状态 docker-compose ps # 查看实时日志调试时非常有用 docker-compose logs -f backend5.2 常见问题排查端口冲突如果80端口被占用可以修改前端服务的端口映射frontend: ports: - 8081:80 # 宿主机8081映射到容器80构建缓存问题有时候Docker缓存会导致构建异常可以添加--no-cache参数docker-compose build --no-cache容器无法连接检查网络配置可以用这个命令进入容器测试docker exec -it app-backend ping db5.3 生产环境优化建议镜像瘦身多阶段构建alpine基础镜像可以将Java镜像从300MB降到100MB以内资源限制防止某个服务耗尽所有资源services: backend: deploy: resources: limits: cpus: 0.5 memory: 512M日志管理配置日志轮转避免磁盘爆满services: backend: logging: driver: json-file options: max-size: 10m max-file: 36. 进阶技巧与扩展场景6.1 多环境配置通过多个compose文件实现环境差异化# 基础配置共用 docker-compose.yml # 开发环境扩展 docker-compose.override.yml # 生产环境配置 docker-compose.prod.yml生产环境配置示例# docker-compose.prod.yml services: backend: environment: - SPRING_PROFILES_ACTIVEprod deploy: replicas: 3 restart_policy: condition: on-failure frontend: deploy: resources: limits: memory: 256M启动时指定文件docker-compose -f docker-compose.yml -f docker-compose.prod.yml up6.2 添加监控服务集成PrometheusGrafana监控services: prometheus: image: prom/prometheus ports: - 9090:9090 volumes: - ./monitoring/prometheus.yml:/etc/prometheus/prometheus.yml grafana: image: grafana/grafana ports: - 3000:3000 depends_on: - prometheus6.3 CI/CD集成示例GitLab CI配置片段deploy: stage: deploy script: - docker-compose down - docker-compose pull - docker-compose up -d only: - master这套方案已经在我们的多个项目中稳定运行从开发到演示环境部署时间从原来的小时级缩短到分钟级。最让我惊喜的是新同事 onboarding 时再也不用陪着他装各种环境只需一个git clone加docker-compose up就能让项目跑起来。