项目主要技术栈

Spring Boot 、Vue、MySQL、Redis、MyBatis、vue-cli、Node.js

准备工作

在开始部署之前，需要准备好以下前置工作：

1. 一台云服务器（阿里云、腾讯云等），我这里使用的是阿里云的服务器（2核+2G）

注意：如果你需要绑定域名的话，云服务器不能是按量计费的服务，否则无法进行ICP备案
操作系统我用的是CentOS 7.9
阿里云官网: https://www.aliyun.com/

2. 已安装宝塔面板

Linux面板使用最新版的即可
宝塔官网:https://www.bt.cn/new/index.html

3. 已开发完成的SpringBoot后端项目和Vue前端项目，且在本地运行无误

一、宝塔面板安装必要组件

登录宝塔面板 → 软件商店

安装以下服务：（需要不低于你项目所使用的版本）
MySQL
PHP、phpMyAdmin（用于可视化管理数据库，类似于Navicat）
Pure-Ftpd（FTP服务）
Redis
Node.js
Nginx（可选，如果你的项目使用到该技术的话）

二、数据库配置

1.创建新数据库：点击 数据库 → MySQL → 添加数据库


注意用户名不要设置为root、test等特殊名称，否则会创建失败
访问权限设置为所有人（你需要其他人访问你的网站）

2.导出数据库文件：从你的项目中找到sql文件，或者从navicat中导出sql文件

3.配置sql文件：localhost需要设置为你的云服务器地址（例如116.211.123.45）

4.导入SQL文件（通过phpMyAdmin操作）
点击 管理，会自动跳转到phpMyAdmin管理页面

点击你新建的数据库 → 导入 → 选择文件 → 执行

如果执行出现错误，请检查数据库文件配置信息或者尝试重新导入

数据库配置完成

三、SpringBoot后端部署

1. 项目打包

IDEA内点击 Maven → package

随后在target文件夹下会生成项目的 jar包

2. 项目文件上传

在宝塔面板内新建文件夹来存放你的项目文件，分别存放前端和后端文件（建议路径：/www/wwwroot/）

将生成的 jar包 和项目的 yml文件 上传至服务器目录

上传项目静态资源文件（如file、upload等），这样前端可以正常加载出图片等静态资源

点击 更多 → 权限，将写入的权限打开（如果你的项目需要用户上传文件的话）

3. 配置yml文件

打开yml文件，需要配置的信息如下
端口号port：后端的端口号，我这里设置为9000
url：将localhost替换为你的云服务器ip地址，我这里为116.211.123.45
数据库名：之前配置的数据库名sql_test
username、password：设置为之前配置的数据库用户名和密码

（注：本地idea里的yml文件可不修改，上传到宝塔服务器的yml文件会覆盖原先的yml文件）

4. 部署Java项目

点击 网站 → Java项目 → 添加Java项目

项目路径选择刚刚上传的 jar包路径

项目端口：这里设置为9000，即前端需要监听到的后端端口，点击 放行端口

项目JDK：
点击 添加JDK信息

选择你的项目所使用到的JDK版本，我这里使用的是jdk17

项目启动命令：无需操作，命令自动生成

5. 开放后端端口

由于宝塔面板和阿里云服务器内置了防火墙功能，所以需要开放项目使用到的端口号使服务正常运行。
宝塔面板：点击 安全 → 添加端口规则（之前配置选项选择了开放9000端口，所以这里就不需要再添加了）


阿里云：云服务器ECS → 安全组 → 管理规则 → 手动添加
https://ecs.console.aliyun.com/securityGroup/region/

这样就可以正常访问啦

后端Java项目部署完成后，如果配置正确的话可以看到下方显示项目正在运行中，则表示后端项目运行成功

如果项目运行状态为未启动，可点击设置 → 日志管理检查项目报错信息，正确修改配置后再点击重启项目

四、 Vue前端部署

1. 前端文件上传

本项目前端使用node.js构建，只需将前端文件上传到宝塔前端目录下即可，存储安装包或依赖的目录node_modules暂不需要上传，可等待构建项目时重新下载（当然也可将node_modules同时上传，但这样比较慢）

注：本项目采用Node.js 动态运行而非纯静态部署，所以需要上传整个 Vue 项目（node_modules 除外）到服务器，不需要上传编译后的 dist 静态文件。

2. 添加Node项目

点击 网站 → Node项目 → 添加Node项目


项目目录选择刚刚上传的vue项目路径

Node版本：选择之前下载好的版本，不低于原项目的版本（vscode终端输入命令node -v 查看node版本）
包管理器：默认即可，如果之前上传了node_module文件，这里可以选择不安装node_module
项目端口：前端项目访问的端口，我这里是9001，选择放行端口

3. 配置vue前端文件

为了能使前端正确运行且能访问到后端端口，需要正确配置以下2个文件
①.env.production文件（存储生产环境中需要的特定配置和变量）
VUE_APP_BASE_API_URL：用于存储 API 的基础路径，使用url的命名方式。需要将localhost修改为你的云服务器公网IP地址，以确保前端能够正确访问生产环境中的 API 服务器。端口号修改为后端端口号，我这里为116.211.123.45:9000

注意CTRL+S保存文件

②vue.config,js文件（ Vue CLI 项目中的一个配置文件，用于对项目的构建和开发环境进行自定义配置，配置项devServer 用于配置开发环境下的本地开发服务器)
设置devServer 中的主机和端口：
host 设置为 “0.0.0.0”，表示监听所有网络接口（包括本地和外部网络）。
port 修改为之前设置的前端项目所访问的端口号，我这里为9001

4. 开放前端端口

同Java项目一样，我们需要开放项目使用到的端口号使服务正常运行。
宝塔面板：点击安全 → 添加端口规则（之前配置选项选择了开放9001端口，所以这里就不需要再添加了）

阿里云：云服务器ECS → 安全组 → 手动添加

这样就可以正常访问啦

前端Vue项目部署完成后，如果配置正确的话可以看到下方显示项目正在运行中，且项目日志无报错信息，则前端项目运行成功

5. 通过IP+端口号访问项目

点击回车，页面会自动跳转至index页面

如果页面正常显示且没有任何报错信息，说明项目运行成功，可通过IP + 端口号的方式访问项目

五、通过域名进行访问

如果你需要使用域名的方式访问网站，还需要进行域名绑定

1. 注册域名

阿里云域名注册：https://dc.console.aliyun.com/next/index#/overview（注册后的域名需要进行ICP备案，否则无法通过互联网进行访问，具体步骤这里不再赘述）

阿里云ICP备案：https://beian.aliyun.com/?spm=a2c1d.8251892.console-base_top-nav.dicp.bb0e5b76enheJF

2. 域名解析

在域名服务商（阿里云、腾讯云等）添加 A 记录：
主机记录：www 或 @ 或 *
记录值：填写云服务器 IP 地址
TTL：默认即可

3. 宝塔添加站点

进入宝塔面板 → 网站 → Node项目 → 设置 → 域名管理

域名管理：填写你的申请的域名 + 端口号（如 www.bttest.com:9001）

打开外网映射

4. 测试访问

浏览器访问你的项目完整域名（如： www.bttest.com:9001），检查是否自动跳转 HTTPS页面、资源是否加载正常（无 404 错误）、路由跳转是否生效（如 login 页面），这样网站就可以可以正常访问和使用啦。

注：如果想直接使用域名来访问网站（如：www.bttest.com），需要将配置文件中的端口号修改为80或443端口（HTTP默认端口80，HTTPS默认端口443）。

六、常见问题排查

📌Q1: 后端或前端项目运行失败，显示“未启动”

✅ 检查步骤：
1.检查项目所设置端口（后端和前端）是否与其配置文件正确对应

2.检查项目所使用端口是否正常开放（宝塔面板和阿里云）

注：项目端口配置正确，而宝塔内端口显示“未使用”

解决方案：有时是宝塔面板内的显示bug，尝试删除端口重新添加，若不影响项目正常使用则无需关心

3.检查项目配置文件（application.yml、vue.config.js、.env.production、package.json等）信息是否正确，包括修改内容的格式、拼写等

📌Q2: 数据库连接失败

✅解决方案：
1.检查yml配置文件中数据库名。用户名、密码是否正确

2.检查MySQL用户远程访问权限

📌Q3: 前端页面显示500错误信息（服务器发生错误）

✅ 解决方案：查看后端项目是否已启动、查看后端项目日志报错信息，检查后端及数据库配置（IP、数据库名密码等）是否正确，然后重新启动后端项目

📌Q4：网站内图片加载失败（ 静态资源加载异常）

✅ 解决方案：打开调试工具（F12），查看图片是否是404错误（图片未找到），检查图片文件名是否与数据库内存储的图片文件名一致，若不一致请修改数据库信息或重新上传图片

📌Q5：网站无法访问，提示 “Invalid Host header”

当访问网站时提示 “Invalid Host header” 错误，通常是因为前端开发服务器（例如 Vue 或 React 的开发环境）或者某些后端框架（如 Spring Boot）对请求的 Host 头进行了严格校验。
✅ 解决方案：打开 vue.config.js 文件，添加以下配置：

module.exports = {devServer: {allowedHosts: 'all', // 允许所有主机访问},
};

修改配置文件后需要重新启动项目。

📌Q6：网站配置端口号80，运行时变成了1024或其他高端口号

端口号 80 是特权端口（小于 1024 的端口），只有以 root 权限运行才能绑定到这个端口。

✅ 解决方案：修改运行用户为 root 用户，保存配置后重新启动项目。

注：如果想使用80端口访问项目，建议使用 Nginx 反向代理服务，将80端口的流量转发到后端服务的非特权端口。