前言本文完整记录赛克能源管理系统从本地开发环境到阿里云生产环境的全流程部署。针对 Java 初学者常见的 本地能跑服务器就崩 痛点提供可直接复制的命令和配置一步一步带你完成部署。通过本文你将学会✅ 阿里云轻量服务器选购与安全配置✅ 宝塔面板一键搭建 Java Web 运行环境✅ SpringBoot 后端 jar 包部署与开机自启✅ Vue 前端打包与 Nginx 反向代理配置✅ MySQLRedis 数据服务部署与调优✅ 部署过程中 90% 常见问题的解决方案最终效果公网可访问的能源管理系统支持周度能耗统计、月度占比分析、设备能耗排名三大核心功能。 一、前期准备工作1.1 服务器选型与购买推荐配置学生党首选满足课程项目需求云厂商阿里云轻量应用服务器系统镜像CentOS 7.9 64 位兼容性最好配置规格2 核 4G 40G SSD 3M 带宽购买时长1 个月课程实训足够注意购买后立即重置服务器密码并保存好公网 IP 地址。1.2 防火墙端口全开必须做登录阿里云控制台 → 轻量应用服务器 → 你的服务器 → 防火墙 → 添加规则表格端口范围协议用途8888TCP宝塔面板管理端口8081TCPVue 前端访问端口9763TCPSpringBoot 后端接口端口3306TCPMySQL 数据库端口6379TCPRedis 缓存端口80/443TCPHTTP/HTTPS 基础端口1.3 安装宝塔面板点击阿里云控制台的「远程连接」进入服务器终端执行官方一键安装命令bash运行yum install -y wget wget -O install.sh http://download.bt.cn/install/install_6.0.sh sh install.sh ed8484bec安装过程中输入y确认等待 5-10 分钟安装完成后终端会输出以下信息plaintext 外网面板地址: http://你的服务器IP:8888/随机字符串 内网面板地址: http://172.xx.xx.xx:8888/随机字符串 username: 随机用户名 password: 随机密码 务必保存好这三个信息后续登录宝塔需要用到。️ 二、宝塔面板环境搭建2.1 登录宝塔面板浏览器访问上面的外网面板地址输入用户名和密码登录。首次登录会弹出推荐安装套件选择LNMP一键安装只需要勾选 NginxMySQL 和 Redis 我们后面单独安装指定版本。2.2 安装指定版本软件进入宝塔面板 → 软件商店 → 搜索并安装以下软件表格软件名称版本用途Nginx1.20.2前端部署与反向代理MySQL8.0.32关系型数据库存储Redis6.2.13JWT 令牌缓存存储Java 项目管理器1.10SpringBoot 服务管理安装顺序先安装 Nginx再安装 MySQL 和 Redis最后安装 Java 项目管理器。2.3 软件配置优化1MySQL 8.0 配置软件商店 → MySQL → 设置 → 配置修改修改以下参数ini[mysqld] # 允许最大连接数 max_connections1000 # 默认字符集 character-set-serverutf8mb4 collation-serverutf8mb4_unicode_ci # 时区设置 default-time_zone8:00点击「保存」并重启 MySQL 服务2Redis 6.2 配置软件商店 → Redis → 设置 → 配置修改修改以下关键参数ini# 允许所有IP访问生产环境建议限制为服务器内网IP bind 0.0.0.0 # 设置Redis密码必须设置否则会被挖矿 requirepass 123456 # 禁用危险命令 rename-command FLUSHDB rename-command FLUSHALL 点击「保存」并重启 Redis 服务️ 三、数据库部署与初始化3.1 创建数据库与用户宝塔面板 → 数据库 → 添加数据库填写以下信息数据库名ems用户名ems_user密码Ems20260608建议使用强密码权限仅允许本地服务器访问安全第一点击「提交」创建数据库3.2 导入初始化 SQL 文件点击数据库右侧的「管理」按钮进入 phpMyAdmin左侧选择ems数据库 → 点击顶部「导入」选择本地项目中的数据库执行sql.sql文件编码选择utf-8点击「执行」导入成功后左侧会出现 20 张数据表说明数据库初始化完成⚙️ 四、SpringBoot 后端部署4.1 修改后端配置文件本地 IDEA 中打开后端项目修改src/main/resources/application.ymlyamlserver: port: 9763 # 后端端口和阿里云防火墙开放的一致 servlet: context-path: /home spring: # 数据库配置 datasource: url: jdbc:mysql://localhost:3306/ems?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: ems_user password: Ems20260608 driver-class-name: com.mysql.cj.jdbc.Driver # Redis配置 redis: host: localhost port: 6379 password: 123456 # 和上面Redis配置的密码一致 database: 0 # MyBatis-Plus配置 mybatis-plus: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.lzpu.ems.entity configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl4.2 后端项目打包打开 IDEA 右侧的 Maven 面板展开Lifecycle→ 双击clean双击package跳过测试打包成功后在target目录下生成ems-0.0.1-SNAPSHOT.jar文件4.3 上传并启动后端服务宝塔面板 → 文件 → 进入/www/wwwroot目录新建文件夹backend→ 进入该文件夹点击「上传」按钮将本地的ems-0.0.1-SNAPSHOT.jar上传到这里宝塔面板 → 终端 → 执行以下命令启动后端bash运行# 进入后端目录 cd /www/wwwroot/backend # 后台启动服务关闭终端不停止运行 nohup java -jar ems-0.0.1-SNAPSHOT.jar app.log 21 4.4 验证后端启动成功查看后端日志bash运行tail -f /www/wwwroot/backend/app.log如果看到以下输出说明后端启动成功plaintext2026-06-08 12:55:37.913 INFO 167245 --- [ main] com.lzpu.ems.EmsApplication : Started EmsApplication in 9.187 seconds (JVM running for 9.859) 《能源系统》API服务 成功上线 服务器IP:8.160.182.231 服务端口:9763浏览器访问http://你的服务器IP:9763/home/api/testString如果返回 Hello SpringBoot说明后端接口正常。4.5 设置后端开机自启宝塔面板 → 软件商店 → Java 项目管理器 → 添加项目填写项目信息项目名称ems-backend项目路径/www/wwwroot/backend/ems-0.0.1-SNAPSHOT.jar运行端口9763运行命令java -jar $JAR_FILE勾选「开机自动启动」→ 点击「提交」点击「启动」按钮等待项目启动 五、Vue 前端部署5.1 修改前端配置本地 VS Code 中打开前端项目修改vue.config.jsjavascript运行module.exports { devServer: { port: 8081, proxy: { /api: { target: http://你的服务器IP:9763/home, changeOrigin: true, pathRewrite: { ^/api: } } } }, productionSourceMap: false, // 关闭生产环境源码映射减小打包体积 publicPath: / }5.2 前端项目打包打开 VS Code 终端执行打包命令bash运行npm run build打包完成后项目根目录会生成dist文件夹里面就是编译后的静态资源5.3 宝塔部署前端宝塔面板 → 网站 → 添加站点填写站点信息域名填写你的服务器公网 IP端口8081根目录/www/wwwroot/vue8081PHP 版本选择「纯静态」点击「提交」创建站点进入站点根目录删除默认生成的index.html和404.html将本地dist文件夹内的所有文件上传到站点根目录5.4 配置 Nginx 支持 Vue 路由宝塔面板 → 网站 → 点击你的站点 → 设置 → 配置文件找到location /配置块替换为以下内容nginxlocation / { # 支持Vue Router history模式解决刷新404问题 try_files $uri $uri/ /index.html; # 跨域配置可选 add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET, POST, OPTIONS, PUT, DELETE; add_header Access-Control-Allow-Headers DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization; }点击「保存」并重启 Nginx 服务✅ 六、系统全功能验证现在打开浏览器访问http://你的服务器IP:8081开始验证系统功能6.1 登录功能验证用户名3密码123456点击「登录」按钮成功跳转到周度能耗页面6.2 三大核心页面验证周度能耗页面显示近一周能耗堆叠柱状图支持选择日期范围查询图例清晰显示各个车间能耗占比月度能耗页面显示月度能耗占比环形饼图支持选择月份查询鼠标悬停显示具体能耗数值和百分比能耗排名页面扩展功能显示设备月度能耗排名横向柱状图支持选择月份查询自动按能耗从高到低排序默认显示前 10 名6.3 页面跳转验证点击顶部三个标签周度、月度、能耗排名验证页面可以无缝切换地址栏 URL 同步变化。❌ 七、常见问题与解决方案问题 1登录提示 登录失败后端报错 Redis 连接异常原因Redis 服务未启动或密码配置错误解决宝塔面板 → 软件商店 → Redis → 确认状态为「运行中」检查后端application.yml中的 Redis 密码是否和宝塔配置的一致重启后端 SpringBoot 服务问题 2前端页面空白控制台报错静态资源 404原因Nginx 配置错误或前端打包路径不对解决确认vue.config.js中的publicPath设置为/确认 Nginx 配置中的root路径指向正确的前端目录重启 Nginx 服务问题 3关闭终端后后端服务停止原因使用java -jar前台运行服务解决使用nohup命令后台运行或者使用宝塔 Java 项目管理器管理服务推荐问题 4页面跳转无反应地址栏变化但内容不变原因App.vue 中直接写死了组件没有监听路由变化解决 修改 App.vue通过currentView变量控制组件切换并添加 hashchange 事件监听javascript运行created() { this.isAuthed !!localStorage.getItem(token) this.syncViewWithHash() // 监听浏览器hash变化 window.addEventListener(hashchange, this.syncViewWithHash) }, methods: { syncViewWithHash() { const hash window.location.hash.replace(#/, ) if (hash month) { this.currentView month } else if (hash rank) { this.currentView rank } else { this.currentView week } } } 八、技术总结本次部署实践完整覆盖了 SpringBootVue 前后端分离项目的云端部署全流程。从服务器环境搭建到数据库、后端、前端的依次部署再到问题排查与优化每一步都体现了 Web 应用从开发到上线的完整生命周期。在部署过程中我发现很多问题都源于对底层运行机制的理解不足。比如 Redis 连接失败导致登录异常、Nginx 路由配置错误导致页面 404 等。通过解决这些实际问题我对 Java Web 应用的运行原理有了更深入的理解。对于初学者来说使用宝塔面板可以大大降低部署的门槛让我们能够专注于业务逻辑的开发。但同时也应该了解背后的原理这样才能在出现问题时快速定位和解决。
从0到1：阿里云宝塔面板部署SpringBoot+Vue能源管理系统保姆级教程
发布时间：2026/6/10 12:36:21
前言本文完整记录赛克能源管理系统从本地开发环境到阿里云生产环境的全流程部署。针对 Java 初学者常见的 本地能跑服务器就崩 痛点提供可直接复制的命令和配置一步一步带你完成部署。通过本文你将学会✅ 阿里云轻量服务器选购与安全配置✅ 宝塔面板一键搭建 Java Web 运行环境✅ SpringBoot 后端 jar 包部署与开机自启✅ Vue 前端打包与 Nginx 反向代理配置✅ MySQLRedis 数据服务部署与调优✅ 部署过程中 90% 常见问题的解决方案最终效果公网可访问的能源管理系统支持周度能耗统计、月度占比分析、设备能耗排名三大核心功能。 一、前期准备工作1.1 服务器选型与购买推荐配置学生党首选满足课程项目需求云厂商阿里云轻量应用服务器系统镜像CentOS 7.9 64 位兼容性最好配置规格2 核 4G 40G SSD 3M 带宽购买时长1 个月课程实训足够注意购买后立即重置服务器密码并保存好公网 IP 地址。1.2 防火墙端口全开必须做登录阿里云控制台 → 轻量应用服务器 → 你的服务器 → 防火墙 → 添加规则表格端口范围协议用途8888TCP宝塔面板管理端口8081TCPVue 前端访问端口9763TCPSpringBoot 后端接口端口3306TCPMySQL 数据库端口6379TCPRedis 缓存端口80/443TCPHTTP/HTTPS 基础端口1.3 安装宝塔面板点击阿里云控制台的「远程连接」进入服务器终端执行官方一键安装命令bash运行yum install -y wget wget -O install.sh http://download.bt.cn/install/install_6.0.sh sh install.sh ed8484bec安装过程中输入y确认等待 5-10 分钟安装完成后终端会输出以下信息plaintext 外网面板地址: http://你的服务器IP:8888/随机字符串 内网面板地址: http://172.xx.xx.xx:8888/随机字符串 username: 随机用户名 password: 随机密码 务必保存好这三个信息后续登录宝塔需要用到。️ 二、宝塔面板环境搭建2.1 登录宝塔面板浏览器访问上面的外网面板地址输入用户名和密码登录。首次登录会弹出推荐安装套件选择LNMP一键安装只需要勾选 NginxMySQL 和 Redis 我们后面单独安装指定版本。2.2 安装指定版本软件进入宝塔面板 → 软件商店 → 搜索并安装以下软件表格软件名称版本用途Nginx1.20.2前端部署与反向代理MySQL8.0.32关系型数据库存储Redis6.2.13JWT 令牌缓存存储Java 项目管理器1.10SpringBoot 服务管理安装顺序先安装 Nginx再安装 MySQL 和 Redis最后安装 Java 项目管理器。2.3 软件配置优化1MySQL 8.0 配置软件商店 → MySQL → 设置 → 配置修改修改以下参数ini[mysqld] # 允许最大连接数 max_connections1000 # 默认字符集 character-set-serverutf8mb4 collation-serverutf8mb4_unicode_ci # 时区设置 default-time_zone8:00点击「保存」并重启 MySQL 服务2Redis 6.2 配置软件商店 → Redis → 设置 → 配置修改修改以下关键参数ini# 允许所有IP访问生产环境建议限制为服务器内网IP bind 0.0.0.0 # 设置Redis密码必须设置否则会被挖矿 requirepass 123456 # 禁用危险命令 rename-command FLUSHDB rename-command FLUSHALL 点击「保存」并重启 Redis 服务️ 三、数据库部署与初始化3.1 创建数据库与用户宝塔面板 → 数据库 → 添加数据库填写以下信息数据库名ems用户名ems_user密码Ems20260608建议使用强密码权限仅允许本地服务器访问安全第一点击「提交」创建数据库3.2 导入初始化 SQL 文件点击数据库右侧的「管理」按钮进入 phpMyAdmin左侧选择ems数据库 → 点击顶部「导入」选择本地项目中的数据库执行sql.sql文件编码选择utf-8点击「执行」导入成功后左侧会出现 20 张数据表说明数据库初始化完成⚙️ 四、SpringBoot 后端部署4.1 修改后端配置文件本地 IDEA 中打开后端项目修改src/main/resources/application.ymlyamlserver: port: 9763 # 后端端口和阿里云防火墙开放的一致 servlet: context-path: /home spring: # 数据库配置 datasource: url: jdbc:mysql://localhost:3306/ems?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: ems_user password: Ems20260608 driver-class-name: com.mysql.cj.jdbc.Driver # Redis配置 redis: host: localhost port: 6379 password: 123456 # 和上面Redis配置的密码一致 database: 0 # MyBatis-Plus配置 mybatis-plus: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.lzpu.ems.entity configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl4.2 后端项目打包打开 IDEA 右侧的 Maven 面板展开Lifecycle→ 双击clean双击package跳过测试打包成功后在target目录下生成ems-0.0.1-SNAPSHOT.jar文件4.3 上传并启动后端服务宝塔面板 → 文件 → 进入/www/wwwroot目录新建文件夹backend→ 进入该文件夹点击「上传」按钮将本地的ems-0.0.1-SNAPSHOT.jar上传到这里宝塔面板 → 终端 → 执行以下命令启动后端bash运行# 进入后端目录 cd /www/wwwroot/backend # 后台启动服务关闭终端不停止运行 nohup java -jar ems-0.0.1-SNAPSHOT.jar app.log 21 4.4 验证后端启动成功查看后端日志bash运行tail -f /www/wwwroot/backend/app.log如果看到以下输出说明后端启动成功plaintext2026-06-08 12:55:37.913 INFO 167245 --- [ main] com.lzpu.ems.EmsApplication : Started EmsApplication in 9.187 seconds (JVM running for 9.859) 《能源系统》API服务 成功上线 服务器IP:8.160.182.231 服务端口:9763浏览器访问http://你的服务器IP:9763/home/api/testString如果返回 Hello SpringBoot说明后端接口正常。4.5 设置后端开机自启宝塔面板 → 软件商店 → Java 项目管理器 → 添加项目填写项目信息项目名称ems-backend项目路径/www/wwwroot/backend/ems-0.0.1-SNAPSHOT.jar运行端口9763运行命令java -jar $JAR_FILE勾选「开机自动启动」→ 点击「提交」点击「启动」按钮等待项目启动 五、Vue 前端部署5.1 修改前端配置本地 VS Code 中打开前端项目修改vue.config.jsjavascript运行module.exports { devServer: { port: 8081, proxy: { /api: { target: http://你的服务器IP:9763/home, changeOrigin: true, pathRewrite: { ^/api: } } } }, productionSourceMap: false, // 关闭生产环境源码映射减小打包体积 publicPath: / }5.2 前端项目打包打开 VS Code 终端执行打包命令bash运行npm run build打包完成后项目根目录会生成dist文件夹里面就是编译后的静态资源5.3 宝塔部署前端宝塔面板 → 网站 → 添加站点填写站点信息域名填写你的服务器公网 IP端口8081根目录/www/wwwroot/vue8081PHP 版本选择「纯静态」点击「提交」创建站点进入站点根目录删除默认生成的index.html和404.html将本地dist文件夹内的所有文件上传到站点根目录5.4 配置 Nginx 支持 Vue 路由宝塔面板 → 网站 → 点击你的站点 → 设置 → 配置文件找到location /配置块替换为以下内容nginxlocation / { # 支持Vue Router history模式解决刷新404问题 try_files $uri $uri/ /index.html; # 跨域配置可选 add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET, POST, OPTIONS, PUT, DELETE; add_header Access-Control-Allow-Headers DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization; }点击「保存」并重启 Nginx 服务✅ 六、系统全功能验证现在打开浏览器访问http://你的服务器IP:8081开始验证系统功能6.1 登录功能验证用户名3密码123456点击「登录」按钮成功跳转到周度能耗页面6.2 三大核心页面验证周度能耗页面显示近一周能耗堆叠柱状图支持选择日期范围查询图例清晰显示各个车间能耗占比月度能耗页面显示月度能耗占比环形饼图支持选择月份查询鼠标悬停显示具体能耗数值和百分比能耗排名页面扩展功能显示设备月度能耗排名横向柱状图支持选择月份查询自动按能耗从高到低排序默认显示前 10 名6.3 页面跳转验证点击顶部三个标签周度、月度、能耗排名验证页面可以无缝切换地址栏 URL 同步变化。❌ 七、常见问题与解决方案问题 1登录提示 登录失败后端报错 Redis 连接异常原因Redis 服务未启动或密码配置错误解决宝塔面板 → 软件商店 → Redis → 确认状态为「运行中」检查后端application.yml中的 Redis 密码是否和宝塔配置的一致重启后端 SpringBoot 服务问题 2前端页面空白控制台报错静态资源 404原因Nginx 配置错误或前端打包路径不对解决确认vue.config.js中的publicPath设置为/确认 Nginx 配置中的root路径指向正确的前端目录重启 Nginx 服务问题 3关闭终端后后端服务停止原因使用java -jar前台运行服务解决使用nohup命令后台运行或者使用宝塔 Java 项目管理器管理服务推荐问题 4页面跳转无反应地址栏变化但内容不变原因App.vue 中直接写死了组件没有监听路由变化解决 修改 App.vue通过currentView变量控制组件切换并添加 hashchange 事件监听javascript运行created() { this.isAuthed !!localStorage.getItem(token) this.syncViewWithHash() // 监听浏览器hash变化 window.addEventListener(hashchange, this.syncViewWithHash) }, methods: { syncViewWithHash() { const hash window.location.hash.replace(#/, ) if (hash month) { this.currentView month } else if (hash rank) { this.currentView rank } else { this.currentView week } } } 八、技术总结本次部署实践完整覆盖了 SpringBootVue 前后端分离项目的云端部署全流程。从服务器环境搭建到数据库、后端、前端的依次部署再到问题排查与优化每一步都体现了 Web 应用从开发到上线的完整生命周期。在部署过程中我发现很多问题都源于对底层运行机制的理解不足。比如 Redis 连接失败导致登录异常、Nginx 路由配置错误导致页面 404 等。通过解决这些实际问题我对 Java Web 应用的运行原理有了更深入的理解。对于初学者来说使用宝塔面板可以大大降低部署的门槛让我们能够专注于业务逻辑的开发。但同时也应该了解背后的原理这样才能在出现问题时快速定位和解决。
