企业官网建设流程全解析

SpringBoot+Vue 生产级容器化部署实战指南

1. 架构设计与环境准备

前后端分离架构已成为现代Web开发的主流模式，SpringBoot与Vue的组合更是其中的黄金搭档。但在实际部署时，许多团队都会遇到"最后一公里"的难题——如何将开发好的应用高效、稳定地部署到生产环境？

传统部署方式面临诸多挑战：

• 环境不一致导致"在我机器上能跑"的问题
• 依赖管理复杂，部署流程冗长
• 横向扩展困难，资源利用率低

容器化部署方案能完美解决这些问题：

• 环境一致性：Docker镜像确保开发、测试、生产环境完全一致
• 快速部署：一次构建，随处运行
• 资源隔离：避免应用间相互影响
• 弹性伸缩：配合编排工具实现自动扩缩容

1.1 基础环境要求

部署前需确保服务器满足以下条件：

提示：生产环境建议使用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 TZ=Asia/Shanghai RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone # 复制构建产物 COPY --from=builder /app/build/libs/*.jar /app/app.jar # 暴露端口 EXPOSE 8080 # 启动命令 ENTRYPOINT ["java", "-jar", "/app/app.jar"]

关键优化点：

1. 使用多阶段构建减小镜像体积
2. 固定时区避免容器内时间问题
3. 使用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/health

3. Vue前端容器化

3.1 优化前端构建

在部署前，需对Vue项目进行生产环境优化：

1. 修改vue.config.js：

module.exports = { publicPath: '/', outputDir: 'dist', assetsDir: 'static', productionSourceMap: false, // 关闭sourcemap减小体积 devServer: { proxy: { '/api': { target: 'http://backend:8080', // 注意这里使用服务名 changeOrigin: true } } } }

2. 添加.dockerignore文件：

node_modules .git *.md *.log

3.2 编写Dockerfile

在前端项目根目录创建Dockerfile：

# 构建阶段 FROM node:14-alpine as builder WORKDIR /app COPY package*.json ./ RUN npm install --registry=https://registry.npm.taobao.org COPY . . RUN npm run build # 生产镜像 FROM nginx:1.21-alpine COPY --from=builder /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80

3.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_ACTIVE=prod - TZ=Asia/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: bridge

4.2 部署与运维命令

启动所有服务：

docker-compose up -d

查看服务状态：

docker-compose ps

查看日志：

docker-compose logs -f

停止服务：

docker-compose down

5. 高级配置与优化

5.1 性能调优建议

1. JVM参数优化：

ENTRYPOINT ["java", "-server", "-Xms512m", "-Xmx1024m", "-XX:+UseG1GC", "-jar", "/app/app.jar"]

2. Nginx缓存配置：

location /static { expires 1y; add_header Cache-Control "public"; access_log off; }

3. 前端资源压缩：

RUN npm install -g compression-webpack-plugin # 然后在vue.config.js中配置压缩

5.2 安全加固措施

1. 使用非root用户运行容器：

RUN addgroup -S appgroup && adduser -S appuser -G appgroup USER appuser

2. 定期更新基础镜像：

FROM openjdk:11-jre-slim@sha256:最新校验码

3. 敏感信息管理：

# 使用Docker secrets或环境变量文件 docker-compose --env-file .env.prod up

6. 监控与日志方案

6.1 基础监控配置

1. Prometheus监控SpringBoot：

# application.yml management: endpoints: web: exposure: include: health,info,metrics,prometheus metrics: export: prometheus: enabled: true

2. Nginx监控：

location /nginx-status { stub_status on; access_log off; allow 127.0.0.1; deny all; }

6.2 日志收集方案

1. 统一日志格式：

services: backend: logging: driver: "json-file" options: max-size: "10m" max-file: "3"

2. ELK集成：

logstash: image: docker.elastic.co/logstash/logstash:7.14.0 volumes: - ./logstash.conf:/usr/share/logstash/pipeline/logstash.conf

7. 持续集成与部署

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 -d"

7.2 蓝绿部署策略

1. 修改docker-compose.yml：

services: backend: image: springboot-app:${TAG:-latest} # 其他配置...

2. 部署脚本：

# 部署新版本 TAG=v2.0.0 docker-compose up -d --scale backend=2 --no-recreate # 健康检查通过后下线旧版本 docker stop backend_old