SpringBoot+Vue 前后端分离项目部署:Nginx+Docker 3步完成生产环境配置

📅 2026/7/6 22:59:22
SpringBoot+Vue 前后端分离项目部署:Nginx+Docker 3步完成生产环境配置
SpringBootVue 生产级容器化部署实战指南1. 架构设计与环境准备前后端分离架构已成为现代Web开发的主流模式SpringBoot与Vue的组合更是其中的黄金搭档。但在实际部署时许多团队都会遇到最后一公里的难题——如何将开发好的应用高效、稳定地部署到生产环境传统部署方式面临诸多挑战环境不一致导致在我机器上能跑的问题依赖管理复杂部署流程冗长横向扩展困难资源利用率低容器化部署方案能完美解决这些问题环境一致性Docker镜像确保开发、测试、生产环境完全一致快速部署一次构建随处运行资源隔离避免应用间相互影响弹性伸缩配合编排工具实现自动扩缩容1.1 基础环境要求部署前需确保服务器满足以下条件组件版本要求说明Docker20.10.0建议使用最新稳定版Docker Compose2.0.0容器编排工具Nginx1.18.0反向代理和静态资源服务JavaJDK11SpringBoot应用运行环境Node.js14.0Vue项目构建环境仅构建时需要提示生产环境建议使用Linux服务器本文以CentOS 7为例其他Linux发行版操作类似2. SpringBoot后端容器化2.1 编写Dockerfile在后端项目根目录创建Dockerfile文件# 基础镜像 FROM openjdk:11-jdk-slim as builder # 设置工作目录 WORKDIR /app # 复制构建文件 COPY gradlew . COPY build.gradle . COPY settings.gradle . COPY src ./src # 构建应用 RUN chmod x ./gradlew RUN ./gradlew bootJar # 生产镜像 FROM openjdk:11-jre-slim # 设置时区 ENV TZAsia/Shanghai RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime echo $TZ /etc/timezone # 复制构建产物 COPY --frombuilder /app/build/libs/*.jar /app/app.jar # 暴露端口 EXPOSE 8080 # 启动命令 ENTRYPOINT [java, -jar, /app/app.jar]关键优化点使用多阶段构建减小镜像体积固定时区避免容器内时间问题使用slim镜像减少安全风险2.2 构建与测试镜像执行构建命令docker build -t springboot-app:1.0.0 .运行测试容器docker run -d -p 8080:8080 --name springboot-app springboot-app:1.0.0验证服务curl http://localhost:8080/api/health3. Vue前端容器化3.1 优化前端构建在部署前需对Vue项目进行生产环境优化修改vue.config.jsmodule.exports { publicPath: /, outputDir: dist, assetsDir: static, productionSourceMap: false, // 关闭sourcemap减小体积 devServer: { proxy: { /api: { target: http://backend:8080, // 注意这里使用服务名 changeOrigin: true } } } }添加.dockerignore文件node_modules .git *.md *.log3.2 编写Dockerfile在前端项目根目录创建Dockerfile# 构建阶段 FROM node:14-alpine as builder WORKDIR /app COPY package*.json ./ RUN npm install --registryhttps://registry.npm.taobao.org COPY . . RUN npm run build # 生产镜像 FROM nginx:1.21-alpine COPY --frombuilder /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 803.3 Nginx配置创建nginx.conf文件server { listen 80; server_name localhost; 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; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }4. 使用Docker Compose编排服务4.1 编写docker-compose.yml创建docker-compose.yml文件version: 3.8 services: backend: image: springboot-app:1.0.0 container_name: backend restart: always environment: - SPRING_PROFILES_ACTIVEprod - TZAsia/Shanghai networks: - app-network healthcheck: test: [CMD, curl, -f, http://localhost:8080/api/health] interval: 30s timeout: 10s retries: 3 frontend: image: vue-app:1.0.0 container_name: frontend restart: always depends_on: backend: condition: service_healthy ports: - 80:80 networks: - app-network networks: app-network: driver: bridge4.2 部署与运维命令启动所有服务docker-compose up -d查看服务状态docker-compose ps查看日志docker-compose logs -f停止服务docker-compose down5. 高级配置与优化5.1 性能调优建议JVM参数优化ENTRYPOINT [java, -server, -Xms512m, -Xmx1024m, -XX:UseG1GC, -jar, /app/app.jar]Nginx缓存配置location /static { expires 1y; add_header Cache-Control public; access_log off; }前端资源压缩RUN npm install -g compression-webpack-plugin # 然后在vue.config.js中配置压缩5.2 安全加固措施使用非root用户运行容器RUN addgroup -S appgroup adduser -S appuser -G appgroup USER appuser定期更新基础镜像FROM openjdk:11-jre-slimsha256:最新校验码敏感信息管理# 使用Docker secrets或环境变量文件 docker-compose --env-file .env.prod up6. 监控与日志方案6.1 基础监控配置Prometheus监控SpringBoot# application.yml management: endpoints: web: exposure: include: health,info,metrics,prometheus metrics: export: prometheus: enabled: trueNginx监控location /nginx-status { stub_status on; access_log off; allow 127.0.0.1; deny all; }6.2 日志收集方案统一日志格式services: backend: logging: driver: json-file options: max-size: 10m max-file: 3ELK集成logstash: image: docker.elastic.co/logstash/logstash:7.14.0 volumes: - ./logstash.conf:/usr/share/logstash/pipeline/logstash.conf7. 持续集成与部署7.1 GitLab CI示例.gitlab-ci.yml配置示例stages: - build - test - deploy variables: DOCKER_HOST: tcp://docker:2375 DOCKER_DRIVER: overlay2 build-backend: stage: build script: - docker build -t registry.example.com/springboot-app:$CI_COMMIT_SHA -f Dockerfile . - docker push registry.example.com/springboot-app:$CI_COMMIT_SHA deploy-prod: stage: deploy environment: production only: - master script: - scp docker-compose.yml [email protected]:/app - ssh [email protected] docker-compose pull docker-compose up -d7.2 蓝绿部署策略修改docker-compose.ymlservices: backend: image: springboot-app:${TAG:-latest} # 其他配置...部署脚本# 部署新版本 TAGv2.0.0 docker-compose up -d --scale backend2 --no-recreate # 健康检查通过后下线旧版本 docker stop backend_old