【部署】Spring Boot + Vue框架项目生产环境部署完整方案

文章目录

- 前言
- [🌐 一、项目结构概览](#🌐 一、项目结构概览)
- [🔧 二、部署流程总览](#🔧 二、部署流程总览)
- [💾 三、详细部署步骤](#💾 三、详细部署步骤)
- - [✅ 第一步：安装并配置 Redis](#✅ 第一步：安装并配置 Redis)
  - [🗄️ 第二步：初始化数据库（MySQL）](#🗄️ 第二步：初始化数据库（MySQL）)
  - [🚀 第三步：启动 Spring Boot 后端服务](#🚀 第三步：启动 Spring Boot 后端服务)
  - [🖼️ 第四步：配置 Nginx 与部署前端](#🖼️ 第四步：配置 Nginx 与部署前端)
  - [🧪 第五步：验证部署结果](#🧪 第五步：验证部署结果)
- [🔐 六、安全与优化建议](#🔐 六、安全与优化建议)
- [📁 七、最终部署结构示例](#📁 七、最终部署结构示例)
- [📌 总结](#📌 总结)

前言

介绍 Spring Boot + Vue 项目结构（包含 dist、nginx、Redis、SQL 文件和 xxx-admin.jar）的 完整 Windows 环境部署方案。本方案适用于将前后端分离的 Java + Vue 项目在 Windows 系统上进行生产环境部署，涵盖 Redis 安装配置、Nginx 配置、后端服务启动、前端静态资源部署以及数据库初始化等关键步骤。

🌐 一、项目结构概览

复制代码

项目根目录
├── dist/                    # Vue 前端打包后的静态文件
├── nginx/                   # Nginx 配置文件及可执行程序
├── Redis/                   # Redis 安装包或配置文件
├── xxx.sql                  # 数据库初始化脚本
└── xxx-admin.jar            # Spring Boot 后端应用（Java jar 包）

✅ 所有组件均已准备就绪，只需按顺序部署即可。

🔧 二、部署流程总览

步骤	操作内容
1	安装并配置 Redis
2	初始化数据库（MySQL）
3	启动 Spring Boot 后端服务
4	配置 Nginx 并部署前端静态资源
5	启动 Nginx 实现反向代理与静态资源服务
6	测试访问系统

💾 三、详细部署步骤

✅ 第一步：安装并配置 Redis

🔗 参考文章：https://blog.csdn.net/qq_38628970/article/details/155820028?spm=1001.2014.3001.5502

将 Redis 文件夹解压至合适路径（如 D:\Redis）。
进入 Redis 目录，运行以下命令启动服务：
bash 复制代码
```
redis-server.exe redis.windows.conf
```
若需开机自启，可使用 NSSM 工具注册为 Windows 服务（推荐）。
确保 Redis 默认端口 6379 可用，并且允许远程连接（修改 redis.windows.conf 中 bind 127.0.0.1 改为 bind 0.0.0.0 或注释掉）。

⚠️ 注意：若后端应用需要连接 Redis，请确保防火墙开放端口或关闭防火墙测试。

🗄️ 第二步：初始化数据库（MySQL）

使用 MySQL 客户端连接本地数据库。

创建对应数据库（如 xxx_db）：

sql 复制代码

CREATE DATABASE IF NOT EXISTS cess_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

导入 SQL 脚本：
bash 复制代码
```
mysql -u root -p cess_db < xxx.sql
```

修改 Spring Boot 应用中的 application.yml 或 application.properties 中数据库连接信息，例如：

yaml 复制代码

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/cess_db?useSSL=false&serverTimezone=UTC
    username: root
    password: yourpassword

🚀 第三步：启动 Spring Boot 后端服务

🔗 参考文章：https://blog.csdn.net/qq_38628970/article/details/154938738?spm=1001.2014.3001.5502

打开命令行窗口，进入项目根目录。
启动 JAR 包（建议使用 nohup 或 Windows 任务计划保持后台运行）：
bash 复制代码
```
java -jar xxx-admin.jar --server.port=8080
```
推荐方式：使用 PowerShell 或 cmd 结合 start 命令启动并隐藏窗口：
powershell 复制代码
```
Start-Process java -ArgumentList "-jar","xxx-admin.jar","--server.port=8080" -WindowStyle Hidden
```
或者使用第三方工具如 Apache Tomcat 或 JDK 自带的 jsvc 将其注册为 Windows 服务。

✅ 启动成功后，可通过浏览器访问 http://localhost:8080 查看接口是否正常响应。

🖼️ 第四步：配置 Nginx 与部署前端

🔗 参考文章：https://blog.csdn.net/qq_38628970/article/details/154938738?spm=1001.2014.3001.5502

将 dist 文件夹复制到 Nginx 的 html 目录下（默认路径：nginx/html/dist）。
编辑 Nginx 配置文件 nginx/conf/nginx.conf，添加如下配置：

nginx 复制代码

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        # 前端静态资源服务
        location / {
            root   html/dist;
            index  index.html;
        }

        # 反向代理后端 API 请求
        location /api/ {
            proxy_pass http://localhost: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;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
}

🔍 解释：

/ 请求直接返回前端 dist 目录下的 HTML 页面；

/api/ 开头的请求被代理到后端 Spring Boot 服务（8080 端口）；

测试配置语法是否正确：
bash 复制代码
```
nginx.exe -t
```
启动 Nginx：
bash 复制代码
```
nginx.exe
```

🧪 第五步：验证部署结果

打开浏览器，访问：
复制代码
```
http://localhost
```
页面应正常加载前端界面。
登录或操作时，API 请求会自动通过 Nginx 转发至后端服务。
查看控制台日志确认无 404、500 错误。

🔐 六、安全与优化建议

建议	说明
🔒 关闭调试模式	生产环境禁用 Spring Boot 的 `debug=true` 和 `logging.level` 调试输出
🛠️ 使用 HTTPS	可配置 Nginx 支持 SSL（需申请证书）
📦 服务监控	使用 `Prometheus + Grafana` 或 `Spring Boot Actuator` 监控服务状态
🔁 自动重启机制	使用 `supervisor`（Windows 版）或任务计划实现服务崩溃自动恢复
🔄 备份策略	定期备份数据库、jar 包、配置文件

📁 七、最终部署结构示例

复制代码

D:\project-root\
│
├── dist/                        # Vue 静态资源（已拷贝至 nginx/html/dist）
├── nginx/
│   ├── conf/
│   │   └── nginx.conf           # Nginx 主配置文件
│   └── html/
│       └── dist/                # 前端静态文件
├── Redis/
│   └── redis-server.exe         # Redis 服务
├── cess.sql                     # 数据库脚本
└── xxx-admin.jar                # Spring Boot 后端应用

📌 总结

你已经准备好了一个完整的 Spring Boot + Vue 项目部署包，仅需按照以下顺序执行：

安装 Redis → 2. 初始化数据库 → 3. 启动后端服务 → 4. 配置 Nginx → 5. 启动 Nginx → 6. 测试访问

✅ 整个过程无需额外开发环境，适合快速上线中小型项目。