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

(责任编辑：)

搜索

热门标签:

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