2025-10-21 20:02:09 2010世界杯进球

前后端分离项目部署到云服务器(超详细) SpringBoot+Vue+mysql+redis

自己做了个项目用阿里云部署上线,整合了一些自己遇到的问题,供各位参考。

一、概述

技术栈选择:SpringBoot、Vue、MySQL、Redis服务器:阿里云服务器系统:CentOS 8服务器管理软件:宝塔面板

参考博客:如何用阿里云服务器搭建属于自己的个人网页_阿里云服务器个人-CSDN博客

前后端分离项目部署到云服务器、宝塔(前端vue、后端springboot)详细教程_宝塔部署前后端分离项目-CSDN博客

二、免费服务器获取

这个很多文章都有介绍,学生免费的有阿里云、github等等,这里主要讲部署就不赘述了,本篇实已阿里云为基础的教程。

三、环境准备

1. 阿里云配置

打开阿里云控制台->云服务器ECS

认识一下基本信息

然后认识安全组,点击安全组->管理规则

这里时用来配置入战规则的,我们以配置mysql端口为例

然后依次设置好mysql、redis、前端、后端、宝塔

2. 宝塔面板

实例页面点远程连接->立即登录

进入后用如下命令安装

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

有几个选项一路y过去,安装完了会显示初始账号密码,一定要保存下来!比如我这里由于已经安装就不显示密码了

不记得账号或地址可以通过如下命令获取,结果就是上图

/etc/init.d/bt default

输入给你的外网地址进入面板,进不去就看看前面阿里云安全组有没有放行!

也可以自行去官网下载,宝塔官网

点下载安装

点击后就是脚本安装,就是我一开始演示的,这个我没试过,但我一开始演示的阿里云的workbeach肯定能装上

还可以在线安装,直接下载到服务器,可以自行探索一下,不放心按我第一个方法即可

第一次进入会提示安装套件,nginx和mysql必选,其他看情况选,急速安装即可。错过了也没关系,后续可以直接在软件商店下载。图因为我不是第一次了就搬的别的博客的图,作者我已经写在参考博客了哦。

然后可以可以按如下步骤改密码。

软件商店可以搜索要下载的插件,搜索下载jdk管理器、redis、mysql

这里mysql如果系统不是CentOS、ubantu等主流操作系统会出错,因为宝塔主要支持这些主流操作系统,如你要是Anolis OS就是出错,这个时候可以软链接来下载,在宝塔终端输入如下命令

sudo ln -s /etc/anolis-release /etc/redhat-release

和阿里云安全组一样,宝塔也可以设置入站规则,和阿里云设置的一样即可

四、jdk下载配置

在软件商店->已安装 找到JDK管理器

打开管理器,选择需要的JDK下载,兼容你springboot项目即可,自定义JDK可以下载到你指定位置

下载好了配置环境变量,在终端输入 nano /etc/profile 编辑配置文件,滑到文件最底部,加上如下

export JAVA_HOME=/www/server/java/jdk-17.0.8 #替换你的jdk更目录

export PATH=$JAVA_HOME/bin:$PATH #替换你的bin目录,java文件不做更改的话,根目录替换成你的后这个和下一条命令直接复制即可

export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar

ctrl+x退出保存配置文件,然后输入 source /etc/profile 让配置生效。

用java --version看是否配置成功,显示版本号就配置好了

五、前端上传

上传前端很简单,先打包,切换到前端目录,运行npm run build即可打包

打包完了是这样,

报错的话大概率时你代码出错了,可以运行一下改错。

有些时候如果你代码写的不和EList规范,你的代码当然能正常运行,但打包会失败,这个时候你可以编辑你前端的vue-config.js文件

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

lintOnSave: false, //禁用ESList

transpileDependencies: true,

devServer: {

client: {

overlay: {

warnings: false,

errors: false

}

}

},

parallel: false, // 关闭多线程,试试解决 thread-loader 相关错误

configureWebpack: {

ignoreWarnings: [

warning => true // 忽略所有警告(不过语法错误还是会报错)

]

}

})

但这只是临时解决方案,写代码还是要符合规范的好,这样后期也好维护。这种方法仅用于你不想改了时用的,比如作者我。

打包好了在前端根目录会出现一个dist文件夹,这就是你打包好的文件。

然后就可以上传了,打开宝塔文件->上传/下载。

将打包好的dist文件上传即可

六、后端上传

打开idea,后端springboot项目需要先将pom.xml的打包类型改成jar

com.example

PersonalBlog

0.0.1-SNAPSHOT

jar

PersonalBlog

PersonalBlog

然后注意,你以前是在本地运行的,现在部署到云服务器上,所以要将所以接口、mysql地址、redis地址(端口和前面安全组的要一致)改成云服务器ip地址(外网)

按下Ctrl+Shift+R全局搜索,将localhost或127.0.0.1改成你的云服务器IP

可以检查一下,接口太多不好检查可以检查一下yml的数据库链接配置是否替换成功

让后就可以打包了,点开右侧边栏的maven->pacage开始打包

没有报错就打包好了

这里打包会测试一次项目能否正常运行,否则报错,除开你代码写错了,还可能出现数据库连接错误。redis作为缓存数据库一般不会出错,而mysql安全级别很高,会出现权限问题导致连接失败(因为你已经将mysql地址从本地改成一个陌生IP了,mysql没有这个用户),但这个要先部署好数据库才能检测是否成功,我们放到后面说。

打包好了target会出现一个jar包

按前面上传步骤上传即可

七、数据库部署

1. redis部署

点击宝塔数据库->redis->带暂停图标的redis开始配置

性能调整可以快速配置

但如果这是显示连接超时或配置失败等错误可以直接在配置文件配置

Ctrl+F打开搜素,直接搜索性能调整的关键词修改即可

配置文件还可以关闭保护模式,有时候可能因为这个连不上。

然后重启redis就部署好

但这是虽然阿里云安全组和宝塔安全都放下行了,但可能还是不行,这是我能可以在宝塔终端输入如下命令来让云服务器防火墙对你的redis端口开放

sudo firewall-cmd --permanent --add-port=6379/tcp #记得替换你的redis端口

sudo firewall-cmd --reload #重启让配置生效

sudo firewall-cmd --list-ports# 这个命令可以查看防火墙所有放行的端口看看有没有生效

下面演示随便开放一个端口

如果加错了删除即可

sudo firewall-cmd --permanent --remove-port=3360/tcp

2. mysql部署

先将所需数据库以SQL转储文件导出(我这里用的sqlyog,其他操作大差不差就是导出sql文件即可)

点击宝塔添加数据库

然后导入你的sql文件

上传好了可以在工具查看,里面有内容就成功了

同理除阿里云安全组和宝塔安全还可以让云服务器防火墙对mysql端口开放

sudo firewall-cmd --permanent --add-port=3306/tcp #记得替换你的mysql端口

sudo firewall-cmd --reload #重启让配置生效

sudo firewall-cmd --list-ports# 这个命令可以查看防火墙所有放行的端口看看有没有生效

可以在sqlyog或其他工具测试一下是否连通,这个测试得开放访问权限为所有人,连上了就说明服务器可以正常访问数据库

但mysql内部也有一个权限,前面得后端打包就报的这个错误,这个时候我们要给其加上一个用户,我们先要确定是哪个用户,在IDEA报错的最上面就能找到

然后再宝塔面板终端登录mysql创建该用户

mysql -u root -p --登录mysql,后续要输入你的密码

CREATE USER 'root'@'183.95.36.213' IDENTIFIED BY '设置密码'; --创建一个用户,记得改成你的用户名

GRANT ALL PRIVILEGES ON *.* TO 'root'@'183.95.36.213' WITH GRANT OPTION; --授予root权限

FLUSH PRIVILEGES; --让配置生效

SELECT User, Host FROM mysql.user WHERE User = 'root' --设置好了可以用这个看看有没有判断设置成功没有

然后再打包就行了

八、创建网站并运行

最后就可以创建网站了,点击网站->html项目->添加html项目

创建好了点击设置配置前端

点配置文件,先设置基本信息,listen是监听端口,server_name是你的服务器外网地址,和之前安全组设置一致即可,另外两个不改dist不需要改

然后还有一个重要的,你的vue项目打包后是成了html的,这时候路由也被写到了index.html,那么你再非index.html页面刷新或跳转路由都会显示404,所以你要再配置文件加上如下让跳转行为有index.html处理

其他配置配置文件都有注释,根据项目配置即可。

配置好了重启nginx就可以访问前端了,导航栏输入 你的外网地址:你绑点的端口 就可以访问

然后在启动后端,打开宝塔终端cd到你存放上传jar包的目录(可以和dist放在一起方便管理),输入如下命令启动

nohup java -jar PersonalBlog-0.0.1-SNAPSHOT.jar & #jar包换成你的jar包的名字

这时控制台日志就在nohup.out下,就在你的后端同一目录下,可以看是否启动成功,这里还是可能不成功,原因就是mysql没有这个用户连不上,为什么,因为之前打包实在本机加的是本机用户,现在在云服务器自然换了一个用户,同样的流程再建一个用户授予权限即可,就不演示了

mysql -u root -p --登录mysql,后续要输入你的密码

CREATE USER 'root'@'183.95.36.213' IDENTIFIED BY '设置密码'; --创建一个用户,记得改成你的云服务器的用户名

GRANT ALL PRIVILEGES ON *.* TO 'root'@'183.95.36.213' WITH GRANT OPTION; --授予root权限

FLUSH PRIVILEGES; --让配置生效

SELECT User, Host FROM mysql.user WHERE User = 'root' --设置好了可以用这个看看有没有判断设置成功没有

此时再去看你的网站,就会发现后端可用了,至此你的项目就部署成功了!

最后说说怎么关闭,再宝塔终端找到前后端端口的PID,根据PID直接kill就行了

ss -tulpn | grep :8081 #注意替换你的端口

kill -15 找到的pid

# 或

kill -9 pid

# 这里-15是温和关闭,-9是强制关闭

ss -tulpn | grep :8081 #再次搜索没输出就代表关闭了

到这教程就结束了,这是博主的第一篇博客,有不对的地方或有问题可以和博主交流。最好,点点赞关注一下博主哦,