侧边栏壁纸
博主头像
landery博主等级

行李箱里装不下我想去的远方

  • 累计撰写 45 篇文章
  • 累计创建 26 个标签
  • 累计收到 6 条评论

目 录CONTENT

文章目录

devops_jenkins_06_spring boot + vue项目前后端项目持续部署(2)

landery
2022-05-04 / 0 评论 / 0 点赞 / 85 阅读 / 4,320 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-05-05,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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.Js
image.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,请参考参考文献中的。

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

参考文献

0
博主关闭了当前页面的评论