一、项目部署背景与架构设计

在现代化软件开发中，前后端分离架构已成为主流选择。本方案针对SpringBoot3（后端）与Vue3（前端）的技术组合，设计了一套完整的云部署方案。该架构具备以下核心优势：

技术栈统一性：采用SpringBoot3作为后端框架，提供RESTful API接口；Vue3作为前端框架，通过Axios实现异步通信
模块化设计：前后端代码完全解耦，支持独立开发、测试与部署
自动化构建：集成CI/CD流水线，实现代码提交后自动构建、测试与部署

典型部署架构包含三个核心层：

应用层：SpringBoot服务（JAR包）与Vue静态资源
中间件层：Nginx（反向代理）、Redis（缓存）、MySQL（数据库）
基础设施层：云服务器、对象存储、监控告警系统

二、云环境准备与配置

2.1 服务器环境要求

推荐使用主流云服务商的2核4G配置实例，操作系统建议选择Linux（CentOS 8或Ubuntu 22.04）。关键环境组件包括：

JDK 17+（SpringBoot3最低要求）
Node.js 18+（Vue3开发环境）
Nginx 1.20+（静态资源服务与负载均衡）
MySQL 8.0+（数据库服务）

2.2 自动化部署工具链

采用行业常见的部署方案实现全流程自动化：

代码管理：Git仓库（建议使用自托管GitLab或主流代码托管平台）
构建工具：Maven（后端） + npm/yarn（前端）
部署脚本：Shell脚本实现环境检测、依赖安装、服务启动等操作

示例部署脚本核心逻辑：

#!/bin/bash
# 环境检测
if ! command -v java &> /dev/null; then
    echo "JDK未安装，正在安装..."
    # 安装JDK逻辑
fi
# 后端部署
cd backend
mvn clean package -DskipTests
nohup java -jar target/*.jar --spring.profiles.active=prod &
# 前端部署
cd ../frontend
npm install && npm run build
cp -r dist/* /var/www/html/

三、核心组件部署方案

3.1 SpringBoot服务部署

JAR包构建：在pom.xml中配置生产环境profile

<profiles>
 <profile>
     <id>prod</id>
     <properties>
         <spring.profiles.active>prod</spring.profiles.active>
     </properties>
 </profile>
</profiles>

服务启动优化：

使用systemd管理服务进程
配置JVM参数：-Xms512m -Xmx1024m
启用G1垃圾收集器：-XX:+UseG1GC

健康检查接口：

@RestController
@RequestMapping("/api/health")
public class HealthController {
 @GetMapping
 public ResponseEntity<Map<String, String>> check() {
     Map<String, String> health = new HashMap<>();
     health.put("status", "UP");
     health.put("version", "1.0.0");
     return ResponseEntity.ok(health);
 }
}

3.2 Vue3前端部署

静态资源优化：

启用生产模式构建：npm run build -- --mode production

配置路由history模式时的Nginx重写规则

location / {
  try_files $uri $uri/ /index.html;
}

CDN加速方案：

将静态资源上传至对象存储服务
配置CNAME域名加速

修改Vue配置中的publicPath

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
      ? 'https://cdn.example.com/assets/'
      : '/'
}

3.3 数据库配置要点

MySQL优化配置：

[mysqld]
innodb_buffer_pool_size = 1G
max_connections = 200
query_cache_size = 0

连接池配置（SpringBoot应用）：

spring:
datasource:
 hikari:
   maximum-pool-size: 10
   connection-timeout: 30000
   idle-timeout: 600000

四、高级部署方案

4.1 容器化部署

采用Docker实现环境标准化：

Dockerfile示例：
```dockerfile

后端镜像

FROM eclipse-temurin:17-jdk-jammy
WORKDIR /app
COPY target/*.jar app.jar
ENTRYPOINT [“java”,”-jar”,”app.jar”]

前端镜像

FROM nginx:alpine
COPY dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/conf.d/default.conf


2. **编排文件示例**：
```yaml
version: '3.8'
services:
  backend:
    image: my-springboot-app:latest
    ports:
      - "8080:8080"
    environment:
      - SPRING_PROFILES_ACTIVE=prod
  frontend:
    image: my-vue-app:latest
    ports:
      - "80:80"

4.2 监控告警体系

基础监控指标：

CPU使用率 > 80%
内存使用率 > 90%
磁盘空间 < 10%
接口响应时间 > 500ms

告警规则配置：
```yaml

示例告警规则

groups:

name: app-alerts
rules:
- alert: HighCPUUsage
  expr: 100 - (avg by (instance) (irate(node_cpu_seconds_total{mode=”idle”}[5m])) * 100) > 80
  for: 5m
  labels:
  severity: warning
  annotations:
  summary: “CPU使用率过高 {{ $labels.instance }}”
```

五、部署后验证与优化

5.1 功能验证清单

核心流程测试：

用户注册/登录流程
主要业务功能操作
支付接口连通性（如适用）

性能测试指标：

QPS（每秒查询数）
平均响应时间
错误率

5.2 常见问题处理

跨域问题解决方案：

// SpringBoot配置
@Configuration
public class CorsConfig implements WebMvcConfigurer {
 @Override
 public void addCorsMappings(CorsRegistry registry) {
     registry.addMapping("/**")
             .allowedOrigins("*")
             .allowedMethods("GET", "POST", "PUT", "DELETE")
             .maxAge(3600);
 }
}

静态资源404问题：

检查Nginx配置中的root路径
确认Vue的publicPath配置
检查文件上传权限

六、持续交付实践

CI/CD流水线设计：

graph TD
 A[代码提交] --> B[单元测试]
 B --> C{测试通过?}
 C -->|是| D[构建镜像]
 C -->|否| E[通知开发者]
 D --> F[部署到测试环境]
 F --> G[自动化测试]
 G --> H{测试通过?}
 H -->|是| I[部署到生产环境]
 H -->|否| E

回滚策略：

保留最近3个成功部署的版本
实现10分钟内快速回滚
记录完整的部署日志

本方案通过系统化的技术架构设计和详细的实施步骤，为SpringBoot3+Vue3项目的云部署提供了完整解决方案。开发者可根据实际需求选择基础部署或容器化部署方案，结合监控体系实现稳定运行。建议定期进行性能调优和安全加固，确保系统长期稳定运行。

SpringBoot3+Vue3项目云部署全流程指南