title: devops_jenkins_06_spring boot + vue项目前后端项目持续部署（2） date: 2022-05-04 14:28:17.0 updated: 2022-05-05 22:34:41.069 url: /archives/jenkins06 categories:

  • devops tags:

  • jenkins

  • devops

  • 持续部署

jenkins中进行项目部署

在部署真正的项目之前，我们进行一下jenkins的项目部署，了解相关配置。

1 jenkins工作空间

如何查看工作目录：系统管理-》系统配置

image.png

可以看到工作目录是 /var/lib/jenkins

image.png

进入工作目录，可以看到该文件夹下，目前还没有名为 workspace 的文件夹image.png

接下来我们新建项目并build后，该目录下会新增一个workspace文件夹，第3步末尾会查看该目录变化

2 配置前工作

2.1 SSH Server

因为我们的目的是Jenkins构建完成之后能在在其它设备上部署应用，所以在配置此项之前，我们还需要配置 SSH Server ; SSH Server使得jenkins通过SSH协议与远程设备连接，进行操作，比如执行远程服务器上的脚本。

这里我们需要用到一个插件，Publish over SSH，前面已经安装过了。同样是“系统管理”-》系统配置

image.png

新增 SSH server。

image.png

连接SSH我们知道要么使用密码登录，要么使用公私钥。同一页面，点击高级设置。

image.png

这里我们使用密码登录，高级设置中还可以该端口等，服务器端端口没变就不改了。输入密码后测试是否通过，success，通过。

image.png

保存后，重复上面的操作，再新建一个前端server，但是我们前后端都部署再同一台服务器上，其实这部要看你具体的服务器搭配了。

2.2 使用简单shell脚本

jenkins使用前后端项目的服务器上的shell脚本进行代码部署，我们先使用简单的shell脚本进行配置测试，通过后，再正式项目配置。

cd /usr/local/bd-system/

1）前后端服务器上，新建脚本spring-boot-demo.sh vim spring-boot-demo.sh

脚本内容：

echo "spring boot demo 脚本运行"
# exit 0

2） 运行脚本 . spring-boot-demo.sh。

image.png

3）前端测试脚本部署，同样新建一个脚本 vim vue-demo.sh 脚本内容： echo "vue -demo 脚本执行"

image.png

3 使用jenkins部署后端spring-boot项目

主页新建任务：image.png

输入任务名称和选择 构建一个maven项目 ，点击确定。image.png

3.1 General 配日志

跳转到编辑项目页面，勾选 丢弃旧的构建 ，选择定时丢弃旧的构建

image.png

3.2 源码管理

添加Git源码管理image.png

1）GitLab、Gitee一样 我们以Gitee为例，找到自己的后端代码仓库，复制仓库链接，这里使用HTTPS的，暂且先不用SSH方式。

image.png

将链接复制过去后，因为没有凭证，会报错。

image.png

点击新增之后，填写下表，填入gitee用户名、密码

image.png

添加之后，在Credentials选择你的凭证，发现就不报错了。

image.png

我们这里只有一个master分支，就不用更改了。它默认就是master。

2） Github GitHub我没有尝试，具体可参考CentOS7/8系统下，使用Jenkins实现SpringBoot+Vue前后端分离项目持续集成，一键编译打包跨设备部署，完整详细教学演示_MurrayLaw的博客-CSDN博客

3.3 构建触发器

在这我们可以设置何时构建，这里我们就全部取消，当要构建的时候，手动构建就行。

image.png

3.4 构建环境

这里非必要我们就不要动它，默认全空。

image.png

3.5 Build

1）Root POM：😋输入框填你要编译打包的pom路径；

  • 情景一：我想使用Maven编译打包整个项目所有的子Module，就需要获取父级pom在Git仓库的路径。从上上图得知父级pom在Git仓库的根目录下，则输入框填入“./pom.xml”或"pom.xml"就是对整个项目进行构建。

  • 情景二：我想使用Maven编译打包项目的一个子Module：sunline-mmp-admin，就需要获取该Module的pom在Git仓库的路径；从上图得知该Module的pom在Git仓库根目录下的文件夹 sunline-mmp-admin 下，则输入框填入“./sunline-mmp-admin/pom.xml”或"sunline-mmp-admin/pom.xml"就是对该单个Module进行构建。

我所用的是第一种情况，直接默认的pom.xml就行image.png

2）Goals and options：输入框填指定要执行的目标，例如 “clean install” 或 “deploy” ；此处还可以接受Maven的任何其他命令行选项，例如"-e"或"-Djava.net.preferIPv4Stack=true"

image.png

3.6 Post step & 构建设置

Post Step设置如下：

image.png

添加构建后操作：选择如下图所示image.png

  1. Source files： 因为我们这里是Spring Boot项目，所以源文件只需要Jar包。

  2. Remove prefix： 去除上面源文件路径前缀，避免生成多余文件夹。

  3. Remote directory： 之前我们配置SSH Server时，就有配置一个操作目录，如果此处再填写一个路径的话，会从SSH Server配置内的操作目录进入到此处填写的目录；如果SSH Server操作的机器上没有此处填写的文件夹，则会自动创建文件夹。

  4. Exec command： 在这里填我们之前编辑的脚本路径，最好填绝对路径；当源文件被上传到远程设备的文件夹后，SSH Server会运行该脚本。你也可以直接在这里写shell代码，但是调试不大方便，故这里使用脚本路径。

注：在配置此项时，要在部署项目的机器上提前创建下面 Remote directory 、Exec command 对应的目录或脚本文件 1） 单module配置image.png

更正一下，后面出现错误。image.png

2）多个module配置（这里我们没有用到，参考这个大佬的）在这里插入图片描述

点击保存

4 构建Build

4.1 查看项目详情

此时我们已经建立了第一个项目，回到主页之之后，点击项目名查看项目详情image.png

点击立即构建并查看构建记录详情

image.png

可以看到构建失败了查看控制台输出，

image.png

解决方法：Jenkins部署spring boot项目时，构建 报xxxxx.RELEASE.pom.part.lock (No such file or directory) and ‘parent.relativePath’ points at wrong local POM的错误 - 言易解道 - 博客园 (cnblogs.com)

再次构建：image.png

正在下载maven依赖，说明前面的问题已经解决。

等待后，依然构建失败，毕竟第一次，失败很正常，尝试解决。image.png

应该是jdk的配置问题，经过搜索，发现时使用yum安装openjdk8的问题，后续考虑更换版本。于是我们点击配置更换jdk。centos7 用yum安装java8 - 程序员大本营 (pianshen.com)image.png再次构建，

报错：image.png

经过验证后发现，我上传jdk版本是windows版的，找不到里面的都是java.exe，之类的所以报错，于是需要重新配置java jdk。 去官网下载后，按照之前的方法重新配置上传。并在系统配置-》工具配置中修改jdk版本以及对应的目录。

可以看到构建成功：image.png

可以日志中还是存在问题：image.png

文件并没有传输过去，应该是配置存在问题。更正配置image.png

重新构建，更新成功

image.png

查看项目服务器上的文件是否更新：image.png

更新成功

4.2 查看jenkins工作目录

之前我们说过Jenkins会在工作目录下生成一个workspace文件用来存放git拉下来的项目，我们查看一下。image.png

image.png进入工作台，可以看到有两个文件夹，一个是我们的项目名加 @tmp，这个 @tmp 后缀的文件夹是空的，咱们不管；另一个是文件夹名称是我们的项目名，进入后从内容可以看到，这其实就是一个git仓库了image.png

4.3 完善shell脚本

之前我们使用的时项目服务器上的存放在 cd /usr/local/bd-system 目录下的spring-boot-demo.sh，只是简单的输出，现在我们将其修改为项目运行。

echo "开始执行脚本"
cd /usr/local/bd-system/back/                           #进入jar包存放路径
kill -9 `lsof -ti:8052`         #关闭8052端口的程序，取消占用
nohup java  -jar bdxm-2.1.1-SNAPSHOT.jar --spring.profiles.active=prod  >/dev/null 2>&1 &                       #设置参数启动项目
echo "脚本执行完成"
exit 0

随便访问一个接口，可以看到后台项目已经成功启动了。

image.png

5 配置前端vue项目

主页-新建任务-输入项目名称 freestyle project，确定image.png

5.1 General

同上spring boot项目

5.2 源码管理

选择Git

image.png

5.3 构建触发器

同spring boot项目，默认即可

5.4 构建环境

第一步勾选 Provide Node & npm bin/ folder to PATH 第二步下拉选择我们之前配好的Node.Js，一般会默认选择配置存在的Node.Jsimage.png

5.4 构建

增加构建步骤 =>执行 shell

image.png

image.png

npm install  #编译
npm run build #打包
tar -zcvf dist.tar.gz dist # 打成压缩包方便传输

5.5 构建后操作

增加构建后操作步骤 => Send build artifacts over SSH

image.png

image.png

这时我们就需要更换重新写下，前端脚本：vim /usr/local/bd-system/vue-demo.sh

echo "前端脚本执行！"
cd /usr/local/bd-system/front/
tar -zxvf dist.tar.gz
echo "前端脚本执行完毕！"

构建后，检查是否成功：前端部署成功，前后端联调也成功！！yes！！image.png

注：以上前后端之前就曾经使用过nginx，于是就省去了nginx配置的繁琐过程。如果想要使用nginx，请参考参考文献中的。

再次感谢各位大佬的博客。

参考文献