企业官网建设流程全解析

📖 前言

本文完整记录赛克能源管理系统从本地开发环境到阿里云生产环境的全流程部署。针对 Java 初学者常见的 "本地能跑，服务器就崩" 痛点，提供可直接复制的命令和配置，一步一步带你完成部署。

通过本文你将学会：

• ✅ 阿里云轻量服务器选购与安全配置
• ✅ 宝塔面板一键搭建 Java Web 运行环境
• ✅ SpringBoot 后端 jar 包部署与开机自启
• ✅ Vue 前端打包与 Nginx 反向代理配置
• ✅ MySQL+Redis 数据服务部署与调优
• ✅ 部署过程中 90% 常见问题的解决方案

最终效果：公网可访问的能源管理系统，支持周度能耗统计、月度占比分析、设备能耗排名三大核心功能。

🚀 一、前期准备工作

1.1 服务器选型与购买

推荐配置（学生党首选，满足课程项目需求）：

• 云厂商：阿里云轻量应用服务器
• 系统镜像：CentOS 7.9 64 位（兼容性最好）
• 配置规格：2 核 4G 40G SSD 3M 带宽
• 购买时长：1 个月（课程实训足够）

注意：购买后立即重置服务器密码，并保存好公网 IP 地址。

1.2 防火墙端口全开（必须做！）

登录阿里云控制台 → 轻量应用服务器 → 你的服务器 → 防火墙 → 添加规则：

表格

1.3 安装宝塔面板

1. 点击阿里云控制台的「远程连接」，进入服务器终端
2. 执行官方一键安装命令：

bash

运行

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

1. 安装过程中输入y确认，等待 5-10 分钟
2. 安装完成后，终端会输出以下信息：

plaintext

================================================================== 外网面板地址: http://你的服务器IP:8888/随机字符串 内网面板地址: http://172.xx.xx.xx:8888/随机字符串 username: 随机用户名 password: 随机密码 ==================================================================

务必保存好这三个信息！后续登录宝塔需要用到。

🛠️ 二、宝塔面板环境搭建

2.1 登录宝塔面板

浏览器访问上面的外网面板地址，输入用户名和密码登录。首次登录会弹出推荐安装套件，选择LNMP一键安装（只需要勾选 Nginx，MySQL 和 Redis 我们后面单独安装指定版本）。

2.2 安装指定版本软件

进入宝塔面板 → 软件商店 → 搜索并安装以下软件：

表格

安装顺序：先安装 Nginx，再安装 MySQL 和 Redis，最后安装 Java 项目管理器。

2.3 软件配置优化

（1）MySQL 8.0 配置

1. 软件商店 → MySQL → 设置 → 配置修改
2. 修改以下参数：

ini

[mysqld] # 允许最大连接数 max_connections=1000 # 默认字符集 character-set-server=utf8mb4 collation-server=utf8mb4_unicode_ci # 时区设置 default-time_zone='+8:00'

1. 点击「保存」并重启 MySQL 服务

（2）Redis 6.2 配置

1. 软件商店 → Redis → 设置 → 配置修改
2. 修改以下关键参数：

ini

# 允许所有IP访问（生产环境建议限制为服务器内网IP） bind 0.0.0.0 # 设置Redis密码（必须设置！否则会被挖矿） requirepass 123456 # 禁用危险命令 rename-command FLUSHDB "" rename-command FLUSHALL ""

1. 点击「保存」并重启 Redis 服务

🗄️ 三、数据库部署与初始化

3.1 创建数据库与用户

1. 宝塔面板 → 数据库 → 添加数据库
2. 填写以下信息：
   • 数据库名：ems
   • 用户名：ems_user
   • 密码：Ems@20260608（建议使用强密码）
   • 权限：仅允许本地服务器访问（安全第一）
3. 点击「提交」创建数据库

3.2 导入初始化 SQL 文件

1. 点击数据库右侧的「管理」按钮，进入 phpMyAdmin
2. 左侧选择ems数据库 → 点击顶部「导入」
3. 选择本地项目中的数据库执行sql.sql文件
4. 编码选择utf-8，点击「执行」
5. 导入成功后，左侧会出现 20 + 张数据表，说明数据库初始化完成

⚙️ 四、SpringBoot 后端部署

4.1 修改后端配置文件

本地 IDEA 中打开后端项目，修改src/main/resources/application.yml：

yaml

server: port: 9763 # 后端端口，和阿里云防火墙开放的一致 servlet: context-path: /home spring: # 数据库配置 datasource: url: jdbc:mysql://localhost:3306/ems?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai username: ems_user password: Ems@20260608 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.StdOutImpl

4.2 后端项目打包

1. 打开 IDEA 右侧的 Maven 面板
2. 展开Lifecycle→ 双击clean
3. 双击package（跳过测试）
4. 打包成功后，在target目录下生成ems-0.0.1-SNAPSHOT.jar文件

4.3 上传并启动后端服务

1. 宝塔面板 → 文件 → 进入/www/wwwroot目录
2. 新建文件夹backend→ 进入该文件夹
3. 点击「上传」按钮，将本地的ems-0.0.1-SNAPSHOT.jar上传到这里
4. 宝塔面板 → 终端 → 执行以下命令启动后端：

bash

运行

# 进入后端目录 cd /www/wwwroot/backend # 后台启动服务（关闭终端不停止运行） nohup java -jar ems-0.0.1-SNAPSHOT.jar > app.log 2>&1 &

4.4 验证后端启动成功

1. 查看后端日志：

bash

运行

tail -f /www/wwwroot/backend/app.log

1. 如果看到以下输出，说明后端启动成功：

plaintext

2026-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

1. 浏览器访问：http://你的服务器IP:9763/home/api/testString，如果返回 "Hello SpringBoot"，说明后端接口正常。

4.5 设置后端开机自启

1. 宝塔面板 → 软件商店 → Java 项目管理器 → 添加项目
2. 填写项目信息：
   • 项目名称：ems-backend
   • 项目路径：/www/wwwroot/backend/ems-0.0.1-SNAPSHOT.jar
   • 运行端口：9763
   • 运行命令：java -jar $JAR_FILE
3. 勾选「开机自动启动」→ 点击「提交」
4. 点击「启动」按钮，等待项目启动

🎨 五、Vue 前端部署

5.1 修改前端配置

本地 VS Code 中打开前端项目，修改vue.config.js：

javascript

运行

module.exports = { devServer: { port: 8081, proxy: { '/api': { target: 'http://你的服务器IP:9763/home', changeOrigin: true, pathRewrite: { '^/api': '' } } } }, productionSourceMap: false, // 关闭生产环境源码映射，减小打包体积 publicPath: '/' }

5.2 前端项目打包

1. 打开 VS Code 终端，执行打包命令：

bash

运行

npm run build

1. 打包完成后，项目根目录会生成dist文件夹，里面就是编译后的静态资源

5.3 宝塔部署前端

1. 宝塔面板 → 网站 → 添加站点
2. 填写站点信息：
   • 域名：填写你的服务器公网 IP
   • 端口：8081
   • 根目录：/www/wwwroot/vue8081
   • PHP 版本：选择「纯静态」
3. 点击「提交」创建站点
4. 进入站点根目录，删除默认生成的index.html和404.html
5. 将本地dist文件夹内的所有文件上传到站点根目录

5.4 配置 Nginx 支持 Vue 路由

1. 宝塔面板 → 网站 → 点击你的站点 → 设置 → 配置文件
2. 找到location /配置块，替换为以下内容：

nginx

location / { # 支持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'; }

1. 点击「保存」并重启 Nginx 服务

✅ 六、系统全功能验证

现在打开浏览器，访问：http://你的服务器IP:8081，开始验证系统功能：

6.1 登录功能验证

• 用户名：3
• 密码：123456
• 点击「登录」按钮，成功跳转到周度能耗页面

6.2 三大核心页面验证

1. 周度能耗页面：

   • 显示近一周能耗堆叠柱状图
   • 支持选择日期范围查询
   • 图例清晰显示各个车间能耗占比

2. 月度能耗页面：

   • 显示月度能耗占比环形饼图
   • 支持选择月份查询
   • 鼠标悬停显示具体能耗数值和百分比

3. 能耗排名页面（扩展功能）：

   • 显示设备月度能耗排名横向柱状图
   • 支持选择月份查询
   • 自动按能耗从高到低排序，默认显示前 10 名

6.3 页面跳转验证

点击顶部三个标签（周度、月度、能耗排名），验证页面可以无缝切换，地址栏 URL 同步变化。

❌ 七、常见问题与解决方案

问题 1：登录提示 "登录失败"，后端报错 Redis 连接异常

原因：Redis 服务未启动或密码配置错误解决：

1. 宝塔面板 → 软件商店 → Redis → 确认状态为「运行中」
2. 检查后端application.yml中的 Redis 密码是否和宝塔配置的一致
3. 重启后端 SpringBoot 服务

问题 2：前端页面空白，控制台报错静态资源 404

原因：Nginx 配置错误或前端打包路径不对解决：

1. 确认vue.config.js中的publicPath设置为'/'
2. 确认 Nginx 配置中的root路径指向正确的前端目录
3. 重启 Nginx 服务

问题 3：关闭终端后后端服务停止

原因：使用java -jar前台运行服务解决：

1. 使用nohup命令后台运行
2. 或者使用宝塔 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' } } }

📝 八、技术总结

本次部署实践完整覆盖了 SpringBoot+Vue 前后端分离项目的云端部署全流程。从服务器环境搭建到数据库、后端、前端的依次部署，再到问题排查与优化，每一步都体现了 Web 应用从开发到上线的完整生命周期。

在部署过程中，我发现很多问题都源于对底层运行机制的理解不足。比如 Redis 连接失败导致登录异常、Nginx 路由配置错误导致页面 404 等。通过解决这些实际问题，我对 Java Web 应用的运行原理有了更深入的理解。

对于初学者来说，使用宝塔面板可以大大降低部署的门槛，让我们能够专注于业务逻辑的开发。但同时也应该了解背后的原理，这样才能在出现问题时快速定位和解决。