SpringBoot+Vue项目部署到Linux服务器

文章正文
发布时间:2025-05-12 01:30

SpringBoot+Vue项目部署到Linux服务器

Note:

1、Linux服务器选用的是CentOS7.7,其他类型也可以
2、需要在服务器配置jdk,服务SpringBoot项目
3、后端打包类型为jar包,war包需要自行修改后端配置
4、需要在服务器配置Nginx,服务Vue项目
5、暂未部署Docker,后续更新

目录

1、服务器配置 1.1 安装宝塔 1.2 安装并配置MySQL、Redis、Nginx

使用宝塔安装Mysql、Redis、Nginx,便于管理

在宝塔的软件商店中搜索Mysql、Redis、Nginx并快捷安装

1.3 创建数据库并导入数据

进入宝塔的数据库界面,添加数据库,填写数据库名、选择字符集、设置访问权限为所有人(这样才能使用其他终端访问),完成后提交,提示添加成功即为创建成功

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fkjp1sk8-1638865326066)(C:\Users\Q\AppData\Roaming\Typora\typora-user-images\image-20211206191659514.png)]

创建成功后,点击导入,把本地数据库的测试数据导入到服务器中的数据库。提示导入数据库成功即可。

在这里插入图片描述


在这里插入图片描述

在这里插入图片描述

1.4 安装并配置jdk 1.4.1 官网下载JDK并上传到服务器

从可用于Linux的jdk包,通过宝塔上传到服务器

建议上传到/www/server下

PS:/www/server是宝塔软件的默认安装目录,把软件都放到一起,方便查找

然后使用终端,进入jdk的上传目录,使用解压命令,把上传的jdk文件解压到当前目录,然后把解压后的文件夹重命名为jdk8

tar -zxvf jdk-8u311-linux-x64.tar.gz mv jdk1.8.0_311 jdk8

1.4.2 配置环境变量

1.打开 /etc/profile 文件

vim profile

2.在 profile 文件末尾,配置jdk环境

export JAVA_HOME=/www/server/jdk8 export CLASSPATH=$:CLASSPATH:$JAVA_HOME/lib/ export PATH=$JAVA_HOME/bin:$PATH export JRE_HOME=$JAVA_HOME/jre

3.使 profile 生效

source profile

4.查看jdk是否配置成功

java -version

显示版本号即为配置成功

1.5 安全组配置、放行端口配置 1.5.1 安全组配置

登录云服务器,在控制台处找到服务器,然后对安全组规则进行更改

以华为云为例,在入方向规则处添加前后端使用的端口(如8080和8081)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zB2nM8g3-1638865326069)(C:\Users\Q\AppData\Roaming\Typora\typora-user-images\image-20211207141808228.png)]

1.5.2 放行端口配置

在宝塔的安全功能中放行前后端项目需要使用的端口,如8080和8081

在这里插入图片描述

2、SpringBoot项目配置 2.1 配置修改

后端拆分application.yml配置文件,可拆分出本地dev和生产pro两个(也可以多拆出test)

在这里插入图片描述

application.yml文件中保留通用配置

在这里插入图片描述

application-dev.yml文件中配置本地运行项目所用的配置

在这里插入图片描述

application-pro.yml文件中配置服务器中运行项目所用的配置,其中服务器数据库名称,即为1.3节中添加的数据库名,密码从宝塔界面点击复制即可,注意不是使用root密码,而是使用刚创建的数据库的密码(下图有误,redis的host保持127.0.0.1即可)

在这里插入图片描述

在这里插入图片描述

dev和pro的不同之处主要是MySQL的配置。

pro中需要按照服务器的IP和数据库配置来填写,可在application.yml文件中修改active指向pro,来测试是否能够成功连接服务器中的数据库

2.2 打包

修改application.yml文件中的active:pro,然后执行maven clean,清除本地测试时生成的jar包

在这里插入图片描述

执行maven package,后端项目打包完成

在这里插入图片描述

2.3 上传到服务器

找到项目路径下打包出的文件 target,找到target下的打包文件,后缀名是 .jar,即可运行的jar包,然后使用宝塔将其从本地路径中上传到服务器,路径可以为 /www/wwwroot/project_name,末尾的project_name文件夹可按照自己需求新建

PS:/www/wwwroot路径是宝塔默认建站目录,放到此处便于查找

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lvcAnWm8-1638865326074)(C:\Users\Q\AppData\Roaming\Typora\typora-user-images\image-20211207142402694.png)]

2.4 后端项目服务器配置

只需确保jdk安装成功,且jar包上传成功即可

2.5 运行测试 2.5.1 运行后端jar包

在Linux系统下有多种运行jar包的方式。建议使用方法d,保留项目运行日志。日志文件会生成到项目同级路径下。

a.当前终端被锁定,可按CTRL + C打断程序运行,或关闭窗口退出程序

java -jar xxx.jar

b.当前终端不被锁定,但是当窗口关闭时,程序中止运行

java -jar xxx.jar &

c.不挂断运行命令,当账户退出或终端关闭时,程序仍然运行

nohup java -jar xxxx.jar &

d.指定输出日志文件,不挂断运行命令,退出或终端关闭时程序仍然运行

nohup java -jar xxx.jar > project.log

2.5.2 查看日志文件

建议使用动态查看命令,查看实时更新的日志,打开一个新的终端,输入如下命令:

tail -f project.log

2.5.2 停止运行后端jar包

若使用2.5.1种的方法a、b,直接关闭终端即可

若使用2.5.1种的方法c、d,需要查找后端使用端口(这个端口号是填写在SpringBoot项目的application.yml文件中server项中的)占用的进程号,然后关闭进程,即可停掉jar包的运行。命令如下:

netstat -tunlp | grep 端口号 // 得到进程号 kill -9 进程号

操作如图,8081是我的后端项目占用的端口号,13061是进程ID

在这里插入图片描述

3、Vue项目配置 3.1 配置修改

axios.js文件的URL配置为 服务器公网IP:端口号

axios.defaults.baseURL = "服务器公网IP:端口号" // axios.defaults.baseURL = ":端口号" 本地使用localhost

3.2 打包

打包命令

npm run build

打包后的文件名为dist,可在项目路径下查看

3.3 上传到服务器

通过宝塔可直接上传dist文件夹,如果没有宝塔,可以将dist文件夹压缩后上传到服务器

建议上传到与2.3节中提到的后端项目上传路径中,相同一个需求的前后端项目放到同一个文件夹中便于查找:/www/wwwroot/project_name

3.4 前端项目服务器配置

需要对服务器的Nginx进行配置,以满足前端项目的运行

通过宝塔安装Nginx,其默认的配置文件会被备份为 nginx.conf.default,且生成一份新的配置文件 nginx.conf。

如果是使用宝塔安装的Nginx,则文件存放路径为/www/server/nginx/conf

首先从 nginx.conf.default 中复制一份以 server 为标签的代码,如下图:

在这里插入图片描述

真正需要修改文件的是 nginx.conf,此文件可以通过宝塔界面的“软件商店”—“Nginx”—“设置”—“配置修改”来修改,在此处修改时如果修改的格式有误等错误会被提示无法保存

在这里插入图片描述

上一步复制的server代码段复制到文件中的 include 标签上方(配置文件中会有一个已经存在的server 标签,不需要覆盖,顺着它粘贴代码段A即可,不会冲突)

删除代码段中所有注释,保留四个未被注释的标签(listen、server_name、location / 、error_page)即可

修改上述四个标签

(1)listen标签后填写前端项目要使用的端口号

(2)server_name标签填写服务器公网IP

(3)location标签的root标签填写vue项目的打包文件dist的路径

(4)location标签的添加一行代码标签防止刷新出现404

try_files $uri $uri/ /index.html;

(5)error_page标签不需要变动

+ 修改后内容如图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N1RjvpYY-1638865326076)(C:\Users\Q\Desktop\屏幕截图 2021-12-07 152729.png)]

重载Nginx配置并重新启动即可,在宝塔的界面操作很方便

在这里插入图片描述

3.5 运行测试

确保已经重载Nginx配置并重新启动

在浏览器输入服务器公网IP:端口,查看是否能够进入vue项目首页

4、部署到服务器的前后端联调测试 4.1 运行后端项目

nohup java -jar xxx.jar > project.log

4.2 运行前端项目

启动Nginx

4.3 访问与功能测试

浏览器输入服务器公网IP:端口,测试能否进入项目

测试项目功能是否完整可用

测试是否有功能与本地测试效果不符

5、后续部署Docker(待完成) 6、可能存在的问题: 6.1、打包失败

保错:

Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.22.2:test (default-test) on project XXX: There are test failures.

Please refer to D:\IDEAWorkSpace\vueblog\target\surefire-reports for the individual test results.
Please refer to dump files (if any exist) [date].dump, [date]-jvmRun[N].dump and [date].dumpstream.

解决

使用命令,跳过测试打包

mvn clean package -Dmaven.test.skip=true

首页
评论
分享
Top