Jenkins打造强大的前端自动化工作流

发表于:2018-4-17 09:43  作者:kiddddd   来源:稀土掘金

字体: | 上一篇 | 下一篇 |我要投稿 | 推荐标签: 软件测试工具 jenkins 持续集成 集成测试

  背景
  公司的前端构建及部署工作都是人工去做,随着业务扩大,项目迭代速度变快,人员增多,各种问题都暴露出来,本文是对前端自动化工作流进行探索后的一篇经验分享,将通过一个简单案例分享一下基于Jenkins的前端自动化工作流搭建的过程,搭建完这套工作流,我们只需要在本地发起一个git提交,剩下的单元测试,打包构建,代码部署,邮件提醒等功能全部自动化完成,让持续集成、持续交付、持续部署变得简单易操作,真正解决人工构建部署的诸多问题。
  Jenkins是什么?
  Jenkins 是一款业界流行的开源持续集成工具,广泛用于项目开发,具有自动化构建、测试和部署等功能。
  本案例要实现的功能
  本地项目发起一个git提交,剩下的单元测试,打包构建,代码部署,邮件提醒等全部自动化完成。
  开始
  准备工作
  先准备一个项目,我这里直接使用vue-cli脚手架生成了一个项目,其他技术栈也一样,只要是个项目就行。
  2. 建立这个项目的远端git仓库,并把本地代码提交上去。我这里用的码云,github也一致。
  3. 准备一台能外网访问的服务器,非要用你自己的电脑当服务器也可以,保证外网可访问即可。我这里用的是阿里云ubantu14.04,另外,阿里云新手注册有一个月的免费服务器可领,不想花钱的可以试一下。
  4. 服务器上配好Java环境。
  Jenkins的安装与启动
  linux下:ubuntu 14.04中安装Jenkins
  windows下:
  从Jenkins官网下载最新war文件。
  运行java -jar jenkins.war即可。
  Jenkins初始化
  jenkins的默认端口是8080,启动成功后在浏览器打开。
  进入后会让我们输管理员密码,打开网页上提示路径下的文件,复制密码粘贴输入即可。
  然后会让安装需要的插件,此处选默认即可,等待安装完成。
  创建一个管理员账户。
  上面都完成后会看到这个界面。
  创建任务
  点击创建一个新任务
  选择自由风格的软件项目,并起一个名字
  至此,基础准备工作已经完成,我们在服务器上安装了Jenkins并启动,然后进行了初始化配置,建立了一个新任务。接下来我们开始配置我们需要的功能。
  实现git钩子功能
  首先我们要实现一个git钩子功能,就是我们向github/码云等远程仓库push我们的代码时,jenkins能知道我们提交了代码,这是自动构建自动部署的前提,钩子的实现原理是在远端仓库上配置一个Jenkins服务器的接口地址,当本地向远端仓库发起push时,远端仓库会向配置的Jenkins服务器的接口地址发起一个带参数的请求,jenkins收到后开始工作。
  打开刚创建的任务,选择配置,添加远程仓库地址,配置登录名及密码及分支。
  安装Generic Webhook Trigger Plugin插件(系统管理-插件管理-搜索Generic Webhook Trigger Plugin)如果可选插件列表为空,点击高级标签页,替换升级站点的URL为:http://mirror.xmission.com/jenkins/updates/update-center.json并且点击提交和立即获取。
  添加触发器
  第2步安装的触发器插件功能很强大,可以根据不同的触发参数触发不同的构建操作,比如我向远程仓库提交的是master分支的代码,就执行代码部署工作,我向远程仓库提交的是某个feature分支,就执行单元测试,单元测试通过后合并至dev分支。灵活性很高,可以自定义配置适合自己公司的方案,这里方便演示我们不做任何条件判断,只要有提交就触发。在任务配置里勾选Generic Webhook Trigger即可
  仓库配置钩子
  此处以码云为例,因为公司用的是码云,github的配置基本一致,进入码云项目主页后,点击管理-webhooks-添加,会跳出一个这样的框来。
  URL格式为 http://<User ID>:<API Token>@<Jenkins IP地址>:端口/generic-webhook-trigger/invoke
  userid和api token在jenkins的系统管理-管理用户-admin-设置里,这是我的
  Jenkins IP地址和端口是你部署jenkins服务器的ip地址,端口号没改过的话就是8080。
  密码填你和上面userid对应的密码,我这里是root。
  下面的几个选项是你在仓库执行什么操作的时候触发钩子,这里默认用push。
  点击提交完成配置。
  测试钩子
  点击测试,如果配置是成功的,你的Jenkins左侧栏构建执行状态里将会出现一个任务。
  另外,你也可以试下本地提交代码,提交代码后,jenkins也会开始一个任务,目前我们没有配置任务开始后让它做什么,所以默认它只会在你提交新代码后,将新代码拉取到jenkins服务器上。到此为止,git钩子我们配置完成。
  gif效果图:
  实现自动化构建
  git push触发钩子后,jenkins就要开始工作了,自动化的构建任务可以有很多种,比如说安装升级依赖包,单元测试,e2e测试,压缩静态资源,批量重命名等等,无论是npm script还是webpack,gulp之类的工作流,你之前在本地能做的,在这里同样可以做。
  作为演示,这里只演示三个基本常用的工作流程,安装依赖包->单元测试->打包,也就是下面这三个命令。
  npm install
  npm run test
  npm run build
  首先,和本地运行npm script一样,我们要想在jenkins里面执行npm命令,先要在jenkins里面配置node的环境,可以通过配置环境变量的方式引入node,也可以通过安装插件的方式,这里使用了插件的方式,安装一下nvm wrapper这个插件。
  打开刚刚的jenkins任务,点击配置里面的构建环境,勾选这个,并指定一个node版本。
  点击构建,把要执行的命令输进去,多个命令使用&&分开。
  4. 保存。
  5. 此时本地修改一下代码push测试一下(也可以点击立即构建测试),点击本次触发的那个任务,选择控制台输出,将会看到Jenkins在云端执行的过程。
  命令行最后一行是Finished状态的如果是SUCCESS(蓝色)则证明执行的任务都顺利进行,是FAILURE(红色)则证明中间有重大错误导致任务失败,UNSTABLE(黄色)代表有虽然有些小问题,但不阻碍任务进行,黄色或者红色可以去命令行看下错误输出,看下哪里出了问题。
上文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理。
21/212>

评 论

论坛新帖

顶部 底部


建议使用IE 6.0以上浏览器,800×600以上分辨率,法律顾问:上海瀛东律师事务所 张楠律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2018, 沪ICP备05003035号
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪公网安备 31010102002173号

51Testing官方微信

51Testing官方微博

扫一扫 测试知识全知道