Jenkins实现前端项目自动化构建

一、基础环境准备

前端代码是通过Gitlab管理、通过npm编译,因此必须先安装Git以及搭建nodejs环境。

1.Git安装及Gitlab账号配置

① 安装Git
 
  

bash

复制代码

yum install git -y # 安装git git --veriosn # 验证是否安装成功

安装完成后测试git是否安装成功,若安装成功会返回版本号,如:git version 1.8.3.1。不同于Java或一些其他插件,Git安装完成后,可以不用在Jenkins-全局工具配置中特殊指定路径,Jenkins在运行项目的时候会自动检测系统是否存在Git。

② Jenkins添加Gitlab账号

系统管理-凭据-系统-全局凭据-添加凭据,输入gitlab的账号密码,保存。当然这一步我们是提前添加好账号,也可以在配置项目的时候添加。

Jenkins实现前端项目自动化构建_第1张图片

2.安装Gitlab插件

系统管理-插件管理-可用插件,搜索gitlab插件安装。如果安装插件遇到“”报错,可以参考第二篇《CI&CD夺命十三剑2-Jenkins环境搭建&常见使用技巧》---“Jenkins使用技巧及常见问题解决”中的解决办法。

Jenkins实现前端项目自动化构建_第2张图片

此处我在安装Gitlab插件的时候报错了,提示我必须将“JavaBeans Activation Framwork”插件升级到1.2.0-6版本或以上才能才行(当前是1.2.0-5的版本)

Jenkins实现前端项目自动化构建_第3张图片 

升级JavaBeans Activation Framwork插件、重启Jenkins后,Gitlab插件处于可用状态:

Jenkins实现前端项目自动化构建_第4张图片 

3.企微通知插件安装及配置

① 安装Qy Wechat Notification插件

搜索安装“Qy Wechat Notification”插件,用于在企业微信中通知构建结果。

Jenkins实现前端项目自动化构建_第5张图片

② 添加企微群机器人

在群里设置中添加群机器人

Jenkins实现前端项目自动化构建_第6张图片

比如可以取名:CI/CD流水线机器人,随后记住Webhook地址,后面会用到 

 Jenkins实现前端项目自动化构建_第7张图片

4.Nodejs环境搭建

① 下载nodejs并上传到服务器

我用的是node-v16.17.0-linux-x64.tar.xz,node.js安装包腾讯微云下载链接:share.weiyun.com/fAZpTbW5,下载后上传到服务器并解压:

 

# 解压后得到node-v16.17.0-linux-x64目录
tar -xvf node-v16.17.0-linux-x64.tar.xz
# 重命名目录(可选)
mv node-v16.17.0-linux-x64 node
② 配置nodejs环境变量

编辑/etc/profile,文件最后添加如下内容:

export NODE_HOME=/home/node16
export PATH=${PATH}:${NODE_HOME}"/bin"
export NODE_PATH=${PATH}:${NODE_HOME}"/lib/node_modules"

 Jenkins实现前端项目自动化构建_第8张图片

重新加载环境变量:

 
  

bash

source /etc/profile
③ 验证是否配置成功

返回npm版本表示安装配置成功:

arduino

[root@h122 home]# npm --version 8.15.0

 

④ 配置镜像源

替换镜像源的方式有两种,一种是临时替换,一种是永久更换。

临时更换镜像源
npm --registry https://registry.npm.taobao.org install node-sass(要安装的模块)
永久更换镜像源

可以配置淘宝的镜像源,这样安装一些依赖包的速度会更快些(相当于加速器,可选,非必须安装)

npm config set registry https://registry.npm.taobao.org
npm config get registry  # 查看是否更换成功

安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org  # 安装cnpm

二、配置Jenkins项目

1.新建并配置项目

① 构建一个自由风格的软件项目

此处选择“构建一个自由风格的软件项目”

Jenkins实现前端项目自动化构建_第9张图片

② 配置源码管理

源码管理中选择Git,账号密码选择我们前面配置Git时添加的Gitlab账号。

Jenkins实现前端项目自动化构建_第10张图片

③ 构建触发器

构建触发器中选择“Build when a change is pushed to GitLab. GitLab webhook URL: http://192.168.1.122:8080/jenkins/project/XY-Frontend”选项,注意:前面一定要先安装Gitlab插件才会有这个选项。选择此选项的用意是:当源码管理中配置的gitlab项目一旦提交代码,就会触发本项目自动进行构建,当然,还有一个必不可少的步骤就是要在gitlab项目中配置一个webhook钩子。

Jenkins实现前端项目自动化构建_第11张图片

配置webhook钩子

在gitlab所要构建的项目-设置-Webhooks中进行添加,

Jenkins实现前端项目自动化构建_第12张图片

大多数配置过程中遇到的问题,按照里面的操作方法都能够得到解决。最后可以测试一下,出现200表示配置的webhook钩子可用。

Jenkins实现前端项目自动化构建_第13张图片 

④ Build Steps

在Build Steps中选择“执行shell”,如果是Windows执行机就选择“执行Windows批处理命令”,命令行输入前端编译命令:

  • cd WORKSPACE:进入到本项目的工作空间目录,例如本项目的名称是“XY−Frontend”,那么Jenkins在第一次构建的时候就会在Jenkins主目录的workspace目录下自动创建一个名为XY−Frontend的目录,用于存储从代码仓库拉取下来的代码;WORKSPACE:进入到本项目的工作空间目录,例如本项目的名称是“XY-Frontend”,那么Jenkins在第一次构建的时候就会在Jenkins主目录的workspace目录下自动创建一个名为XY-Frontend的目录,用于存储从代码仓库拉取下来的代码;WORKSPACE:进入到本项目的工作空间目录,例如本项目的名称是“XY−Frontend”,那么Jenkins在第一次构建的时候就会在Jenkins主目录的workspace目录下自动创建一个名为XY−Frontend的目录,用于存储从代码仓库拉取下来的代码;WORKSPACE是一个全局变量,在Jenkins中还有很多全局变量,可以通过Build Steps中的“可用的环境变量列表”进行查看。
  • --legacy-peer-deps:在npm v7中,会默认安装peerDependencies,在很多情况下,会导致版本冲突,从而中断安装过程;--legacy-peer-deps标志是在v7中引入的,目的是绕过peerDependency的自动安装;它会告诉 npm 忽略项目中引入的相同modules、但版本不同的问题,并继续安装,保证各个引入的依赖所使用的不同版本的modules能够共存,简而言之就是避免版本冲突。
cd $WORKSPACE
npm i --legacy-peer-deps
npm run build

 Jenkins实现前端项目自动化构建_第14张图片

⑤ 配置构建后操作

增加构建后操作步骤,选择“企业微信通知”,注意前面一定要先安装“Qy WeChat Notification”插件,否则看不到这个选项。

Jenkins实现前端项目自动化构建_第15张图片

Webhook地址填写前面企微群机器人的Webhook地址:

Jenkins实现前端项目自动化构建_第16张图片 

2.测试构建

① 手动触发构建

在主页面板中手动执行本项目的构建,但是第一次构建的时候报错“ERROR: Couldn't find any revision to build. Verify the repository and branch configuration for this job.”

Jenkins实现前端项目自动化构建_第17张图片

出现这个问题的原因是gitlab项目中的主分支是main,而在Jenkins中配置成了master,所以解决办法就是在Jenkins项目中将指定分支改为main即可:

 Jenkins实现前端项目自动化构建_第18张图片

再次构建,构建成功,如果是手动触发的构建,会提示是由Jenkins用户触发的构建:

Jenkins实现前端项目自动化构建_第19张图片

企业微信也收到了群机器人的通知,第一次构建会耗时稍长一些,共耗时1分15秒,因为要执行拉取代码、安装依赖包:

Jenkins实现前端项目自动化构建_第20张图片 

② 自动触发构建

前端提交代码后,就会自动触发webhook钩子,触发jenkins自动执行构建,随后jenkins通过企微通知插件将构建结果通知企业微信群。如果是用户手动触发的构建,会提示是由Jenkins用户触发的构建,而如果是gitlab webhook自动触发的构建,会提示“Triggered by GitLab Webhook”:

Jenkins实现前端项目自动化构建_第21张图片

可以看到,第二次构建共耗时24秒,在本地已经下载完依赖的情况下,会比前一次快很多:

Jenkins实现前端项目自动化构建_第22张图片 

小结

以上就是如何在Jenkins中接入web前端项目,实现自动化构建并通知企业微信的全过程,流程总体其实比较简单,关键的是一堆环境、基础组件的安装及配置,中间可能会遇到各种各样的报错,需要通过查看报错日志、网上搜索等各种途径一点一点解决它。

从前端提交代码,到构建成功,总共耗时24秒,如果按照我们第一篇文章中提到的“前端提交代码-->测试手动在第三方执行机拉取代码-->输入命令执行构建-->通知各个研发及测试”整个过程下来,快的话差不多需要5分钟。构建一个项目一次是5分钟,那如果是一天内构建多次呢?如果是10个、100个项目呢?所以从ROI(投入产出比)的角度来说,前端提交代码频率越高,所获得的收益也就越大。

当然本次只是初步实现了项目的自动化构建,并没有自动化部署到各个环境,也没有接入UI自动化测试校验前端页面的基本功能,还存在非常多的优化空间。

最后: 为了回馈铁杆粉丝们,我给大家整理了完整的软件测试视频学习教程,朋友们如果需要可以自行免费领取 【保证100%免费】

 全套资料获取方式:点击下方小卡片自行领取即可

 

你可能感兴趣的:(jenkins,软件测试,接口测试,自动化测试,测试工程师,程序员)