【本地部署→阿里云上线】Vue + SpringBoot + MySQL + Redis 全流程实战(附一键脚本)
历时三周,从PowerShell一键部署到阿里云公网可用,踩过12个坑,本文全部复盘
📌 本文适用对象:
-
正在学习SpringBoot/Vue全栈开发的同学
-
第一次接触云服务器部署的初学者
-
想从“代码能跑”进阶到“能上线交付”的人
📌 阅读收益:
-
✅ 掌握本地一键部署脚本的编写方法
-
✅ 掌握阿里云+宝塔面板的生产环境部署
-
✅ 避开10+个常见部署坑点
-
✅ 获得可直接复用的
deploy.ps1和Nginx配置
📑 目录
-
一、整体架构回顾
-
二、本地部署:从手动到自动化
-
2.1 手动部署的痛点
-
2.2 一键部署脚本(完整代码)
-
2.3 三个关键踩坑点
-
-
三、云端部署:阿里云 + 宝塔
-
3.1 环境准备与端口放行
-
3.2 Redis配置(JWT存储必改)
-
3.3 后端部署(nohup详解)
-
3.4 前端部署(Vue history模式)
-
-
四、完整踩坑清单与解决方案
-
五、运维命令速查表
-
六、总结与思考
-
附录:一键脚本完整代码
一、整体架构回顾
本项目采用主流的前后端分离架构:
text
用户浏览器
↓
Nginx (8081) → Vue静态页面
↓
SpringBoot (9763) → RESTful API
↓
MySQL (3306) + Redis (6379)
| 组件 | 版本 | 端口 | 作用 |
|---|---|---|---|
| Vue前端 | 2.x/3.x | 8081 | 用户界面 |
| SpringBoot | 2.7.6 | 9763 | 业务逻辑 |
| MySQL | 8.0 | 3306 | 持久化存储 |
| Redis | 6.2+ | 6379 | JWT令牌缓存 |
二、本地部署:从手动到自动化
2.1 手动部署的痛点
最初每次部署需要依次执行:
bash
# 1. 启动MySQL net start mysql80 # 2. 创建数据库并导入SQL mysql -uroot -p123456 -e "CREATE DATABASE ems" mysql -uroot -p123456 ems < init.sql # 这条经常中文乱码 # 3. 启动Redis cd redis && redis-server.exe # 4. Maven打包 mvn clean package -DskipTests # 5. 启动后端 java -jar target/xxx.jar # 6. 启动前端 npm install && npm run serve
问题:
-
10+条命令,顺序不能错
-
SQL导入经常报错或乱码
-
每次都要手动改密码、路径
-
出错了要逐条排查
2.2 一键部署脚本(完整代码)
创建 deploy.ps1:
powershell
# ===================== 配置区(只需改这里)===================== $BASE_PATH = "D:\LocalDeploy" $VUE_PATH = "$BASE_PATH\vue-frontend" $SPRING_PATH = "$BASE_PATH\springboot-backend" $REDIS_PATH = "$BASE_PATH\redis" $SQL_PATH = "$SPRING_PATH\sql\init.sql" $MYSQL_USER = "root" $MYSQL_PWD = "123456" $JAR_NAME = "ems-0.0.1-SNAPSHOT.jar" # ============================================================= Write-Host "`n=== 开始一键部署 ===`n" -ForegroundColor Cyan # 1. 启动MySQL Write-Host "[1/5] 启动MySQL..." -ForegroundColor Yellow net start mysql80 Start-Sleep -Seconds 2 # 2. 创建数据库 + 导入SQL(解决路径转义+中文乱码) Write-Host "[2/5] 初始化数据库..." -ForegroundColor Yellow mysql -u"$MYSQL_USER" -p"$MYSQL_PWD" -e "CREATE DATABASE IF NOT EXISTS ems DEFAULT CHARACTER SET utf8mb4;" $SQL_PATH_ESCAPED = $SQL_PATH -replace '\\', '/' mysql --default-character-set=utf8mb4 -u"$MYSQL_USER" -p"$MYSQL_PWD" ems -e "source $SQL_PATH_ESCAPED;" # 3. 启动Redis Write-Host "[3/5] 启动Redis..." -ForegroundColor Yellow Start-Process -FilePath "$REDIS_PATH\redis-server.exe" -WindowStyle Hidden # 4. 打包并启动后端 Write-Host "[4/5] 打包并启动SpringBoot..." -ForegroundColor Yellow Set-Location $SPRING_PATH mvn clean package -DskipTests Start-Process -FilePath "java" -ArgumentList "-jar","$SPRING_PATH\target\$JAR_NAME" -WindowStyle Hidden # 5. 启动前端 Write-Host "[5/5] 启动Vue前端..." -ForegroundColor Yellow Set-Location $VUE_PATH npm install Start-Process -FilePath "npm" -ArgumentList "run serve" -WindowStyle Hidden Write-Host "`n✅ 部署完成!" -ForegroundColor Green Write-Host "前端地址:http://localhost:8081" Write-Host "后端接口:http://localhost:9763"
2.3 三个关键踩坑点
坑1:SQL导入报错 \L 路径问题
-
原因:PowerShell传递反斜杠给mysql命令时被转义
-
解决:
$SQL_PATH -replace '\\', '/'
坑2:中文乱码
-
原因:客户端编码与服务端不一致
-
解决:
--default-character-set=utf8mb4
坑3:端口被占用
-
排查:
netstat -ano | findstr :8081 -
解决:
taskkill /f /pid xxx
三、云端部署:阿里云 + 宝塔
3.1 环境准备与端口放行
云服务器配置:
-
阿里云轻量应用服务器(CentOS 7.9)
-
2核2G(部署本项目完全够用)
必须开放的安全组端口:
| 端口 | 用途 | 是否必开 |
|---|---|---|
| 22 | SSH登录 | ✅ |
| 8888 | 宝塔面板 | ✅ |
| 8081 | Vue前端 | ✅ |
| 9763 | SpringBoot后端 | ✅ |
| 3306 | MySQL | 建议仅内网 |
| 6379 | Redis | 建议加密码 |
⚠️ 最容易忘的:阿里云控制台安全组 ≠ 宝塔系统防火墙,两层都要开!
3.2 Redis配置(JWT存储必改)
在宝塔中找到Redis配置文件,修改两处:
conf
# 原配置(只能本地访问) bind 127.0.0.1 # 修改为(允许外网访问) bind 0.0.0.0 # 设置密码(强烈建议) requirepass your_strong_password
📌 为什么Redis必须设密码?
-
本项目用Redis存储用户JWT令牌
-
如果不设密码,任何人都能操作你的Redis
-
轻则数据泄露,重则服务器被入侵
3.3 后端部署(nohup详解)
bash
# 1. 上传jar到服务器 # 路径:/www/wwwroot/backend/ems.jar # 2. 后台运行(关键命令) nohup java -jar ems.jar > server.log 2>&1 & # 3. 验证是否启动成功 ps -ef | grep java tail -f server.log
命令解析:
| 符号 | 含义 |
|---|---|
nohup |
忽略挂断信号,退出终端后继续运行 |
> server.log |
标准输出重定向到文件 |
2>&1 |
错误输出也重定向到标准输出 |
& |
后台运行 |
3.4 前端部署(Vue history模式)
打包:
bash
npm run build # 生成dist文件夹
Nginx配置(关键!解决刷新404):
nginx
server {
listen 8081;
server_name 你的服务器IP;
root /www/wwwroot/vue8081;
index index.html;
location / {
try_files $uri $uri/ /index.html; # 核心配置
}
}
四、完整踩坑清单与解决方案
| 序号 | 问题现象 | 根本原因 | 解决方案 |
|---|---|---|---|
| 1 | 前端访问404 | 端口未放行 | 检查安全组+宝塔防火墙 |
| 2 | 登录失败/无响应 | Redis连不上 | 检查bind改为0.0.0.0 |
| 3 | SQL导入中文乱码 | 编码不一致 | 加--default-character-set=utf8mb4 |
| 4 | jar包无法运行 | JDK版本不对 | java -version检查 |
| 5 | npm install失败 | 网络问题 | 换淘宝镜像 |
| 6 | 刷新页面404 | Vue history模式 | Nginx配置try_files |
| 7 | 端口被占用 | 上次进程未关闭 | netstat -ano查端口后kill |
| 8 | 后端返回500 | yaml配置错误 | 检查数据库连接信息 |
| 9 | Redis连接被拒绝 | bind只绑了127.0.0.1 | 改为0.0.0.0 |
| 10 | jar包很大但启动不了 | 打包时包含了源码 | 生产环境只传jar即可 |
五、运维命令速查表
Windows(本地)
powershell
# 查端口 netstat -ano | findstr :8081 # 杀进程 taskkill /f /pid 12345 # 查服务状态 net start | findstr MySQL # 停止服务 net stop mysql80
Linux(云服务器)
bash
# 查端口 netstat -tlnp | grep 9763 # 查进程 ps -ef | grep java # 杀进程 kill -9 PID # 看日志 tail -f server.log # 重启Nginx nginx -s reload
六、总结与思考
6.1 部署的本质是什么?
以前觉得部署就是“把代码放到服务器上”,现在理解:
部署 = 让代码在目标环境中稳定、持续、正确地运行
这要求我们:
-
理解环境差异(Windows vs Linux)
-
掌握基础运维命令
-
能够独立排查问题
6.2 自动化的价值
手动部署10次,每次30分钟,还要担心敲错命令。
写好一个脚本,每次只需要执行3秒钟。
自动化思维:任何重复超过3次的操作,都应该写成脚本。
6.3 给初学者的建议
-
不要怕报错,每个错误都是学习机会
-
先本地后云端,本地跑通了再上云
-
日志是最好的老师,90%的问题日志里都有答案
-
改配置要留记录,方便回溯
-
生产环境不要用默认密码
附录:一键脚本完整代码
完整版 deploy.ps1 已放在GitHub:链接
使用方式:
powershell
# 1. 管理员打开PowerShell # 2. 设置执行策略 Set-ExecutionPolicy RemoteSigned # 3. 执行脚本 cd D:\LocalDeploy .\deploy.ps1
📌 写在最后
从本地一键部署到阿里云上线,这三周的学习让我真正理解了什么是“可交付的软件”。
代码写出来只是第一步,能稳定运行在生产环境才是终点。
如果这篇文章帮到了你,欢迎点赞、收藏、评论三连~
有问题请在评论区留言,看到会第一时间回复。
📅 最后更新:2026年6月9日
📝 适用版本:SpringBoot 2.7.6 + Vue 2/3 + MySQL 8.0 + Redis 6.2
更多推荐
所有评论(0)