springboot+vue前后端分离项目的服务器部署

准备工作：
1.购买了一台云服务器
2.云服务器上安装了宝塔面板
3.本地使用 springboot 构建后端，vue 构建前端
4.本地安装了 navicat 数据库管理软件

1.后端springboot部署

1.1 跨域和端口配置

1.在IDEA中打开用Springboot创建的后端项目，设置代理请求访问的源地址为购买云服务器的ip地址

2.在application.yml中设置端口号为8085（根据自己的需要设置即可）

1.2 打包项目

1.点击mvn的clean，清除原本已经生成的jar包

2.再点击package进行打包

3.打好的jar包会出现在target目录下

1.3 将jar包上传到服务器

1.打开宝塔面板，新建http目录

2.将打好的jar包上传到http文件夹

1.4 数据库配置

1.打开Navicat，右键单击想导出的数据库，选择转储SQL文件——结构和数据

2.将导出的sql文件保存到本地

3.在宝塔面板选择数据库，点击添加数据库，填写数据库名、用户名和密码，数据库名需要和springboot中设置的数据库名保持一致

4.点击刚刚创建的数据库中的导入

5.上传之前导出到本地的数据库文件

6.注意数据库root的密码和springboot中设置的需要保持一致

1.5 放行端口

1.在宝塔面板中选择安全，点击添加端口规则，开放8085端口

2.进入阿里云控制台，选择云服务DNS中的安全组

如果没有创建过安全组的话，选择创建安全组

如果之前已经创建过的话，选择实例下的安全组中的管理规则

3.手动添加放行端口8085（即springboot中设置的端口）

1.6 服务器安装jdk1.8

1.进入宝塔面板，点击安全，选择SSH管理，设置允许SSH密钥登录

2.点击文件，在http文件夹中选择终端

3.输入如下命令安装jdk8

yum install java-1.8.0-openjdk* -y

出现如下画面表示安装成功

1.7 启动后端服务

1.点击文件，在http文件夹中选择终端

2.输入如下命令启动后端服务，查看后端服务有无问题

java -jar springboot-0.0.1-SNAPSHOT.jar

3.如果测试没有问题，输入如下命令永久启动后端服务

nohup java -jar springboot-0.0.1-SNAPSHOT.jar &

4.如果测试有问题，先排查端口号

netstat -tunlp | grep 8085
kill -9 pid号

2.前端vue部署

2.1 前端项目打包

1.修改axios请求的基地址

2.在终端输入如下命令，将项目进行打包

set NODE_OPTIONS=--openssl-legacy-provider
npm run build

2.2 前端项目上传

1.进入宝塔面板，把dist文件夹传入http目录下

2.将dist文件夹下的所有文件剪切至http文件夹

3.在宝塔面板中添加网站

4.这样即可输入ip地址访问设计的前端页面