从本地到云端:Web项目部署实战心得
【本地部署→阿里云上线】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. 启动MySQLnet start mysql80# 2. 创建数据库并导入SQLmysql -uroot -p123456 -e CREATE DATABASE emsmysql -uroot -p123456 ems init.sql # 这条经常中文乱码# 3. 启动Rediscd 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.ps1powershell# 配置区只需改这里$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. 启动MySQLWrite-Host [1/5] 启动MySQL... -ForegroundColor Yellownet start mysql80Start-Sleep -Seconds 2# 2. 创建数据库 导入SQL解决路径转义中文乱码Write-Host [2/5] 初始化数据库... -ForegroundColor Yellowmysql -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-setutf8mb4 -u$MYSQL_USER -p$MYSQL_PWD ems -e source $SQL_PATH_ESCAPED;# 3. 启动RedisWrite-Host [3/5] 启动Redis... -ForegroundColor YellowStart-Process -FilePath $REDIS_PATH\redis-server.exe -WindowStyle Hidden# 4. 打包并启动后端Write-Host [4/5] 打包并启动SpringBoot... -ForegroundColor YellowSet-Location $SPRING_PATHmvn clean package -DskipTestsStart-Process -FilePath java -ArgumentList -jar,$SPRING_PATH\target\$JAR_NAME -WindowStyle Hidden# 5. 启动前端Write-Host [5/5] 启动Vue前端... -ForegroundColor YellowSet-Location $VUE_PATHnpm installStart-Process -FilePath npm -ArgumentList run serve -WindowStyle HiddenWrite-Host n✅ 部署完成 -ForegroundColor GreenWrite-Host 前端地址http://localhost:8081Write-Host 后端接口http://localhost:97632.3 三个关键踩坑点坑1SQL导入报错 \L 路径问题原因PowerShell传递反斜杠给mysql命令时被转义解决$SQL_PATH -replace \\, /坑2中文乱码原因客户端编码与服务端不一致解决--default-character-setutf8mb4坑3端口被占用排查netstat -ano | findstr :8081解决taskkill /f /pid xxx三、云端部署阿里云 宝塔3.1 环境准备与端口放行云服务器配置阿里云轻量应用服务器CentOS 7.92核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 21 # 3. 验证是否启动成功ps -ef | grep javatail -f server.log命令解析符号 含义nohup 忽略挂断信号退出终端后继续运行 server.log 标准输出重定向到文件21 错误输出也重定向到标准输出 后台运行3.4 前端部署Vue history模式打包bashnpm run build # 生成dist文件夹Nginx配置关键解决刷新404nginxserver {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.03 SQL导入中文乱码 编码不一致 加--default-character-setutf8mb44 jar包无法运行 JDK版本不对 java -version检查5 npm install失败 网络问题 换淘宝镜像6 刷新页面404 Vue history模式 Nginx配置try_files7 端口被占用 上次进程未关闭 netstat -ano查端口后kill8 后端返回500 yaml配置错误 检查数据库连接信息9 Redis连接被拒绝 bind只绑了127.0.0.1 改为0.0.0.010 jar包很大但启动不了 打包时包含了源码 生产环境只传jar即可五、运维命令速查表Windows本地powershell# 查端口netstat -ano | findstr :8081# 杀进程taskkill /f /pid 12345# 查服务状态net start | findstr MySQL# 停止服务net stop mysql80Linux云服务器bash# 查端口netstat -tlnp | grep 9763# 查进程ps -ef | grep java# 杀进程kill -9 PID# 看日志tail -f server.log# 重启Nginxnginx -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