理想中的Jenkins+Sonar+Github代码质量管理

2018-07-12 admin

背景

前阵子老美的Audit要求各个开发组截图各自repository的Sonar Analysis Report,我跑去Sonarqube一看。。。好家伙!全是红灯,简直惨不忍睹

clipboard.png

当然这其中有历史问题,因为我们是半路接管的欧美team的code,很多issue都是old code所遗留的。

clipboard.png

不逃避责任,其中也有一部分是我们后续提交的新代码造成的,通过项目2年来的日积月累,issue多的有点积重难返,sonarqube虽然在每次jenkins build都会生成report,但是我们却没有把它作为build成功失败的一个硬指标。只要build成功通过QA测试就好了嘛!管他娘的sonar quality gate

结果

为了出一份体面漂亮的report给audit,我不得不快马加鞭的checkout -b quick_fix_sonar_issues, 花了一整天的功夫把block和critical的issue降到了阈值以下。

临阵磨枪的我体会到了以下3个痛点

  1. 很多Sonar能检测出来的issue,在人工code review GitHub PR的时候其实很难被发现
  2. 有些同事在code中犯的错误真的很低级,但是人工code review中很难被发现,不是我的锅,我现在却在为同事擦屁股。
  3. 虽然快速fix了issue,但是code的owner并不是我,我有可能为了迎合sonar的rule而产生了潜在的新的issue,而和owner去一一check又增加了很多沟通成本,另外owner很有可能已经离职了

思考

囧则思变!如何改进我们的开发流程?在代码开发阶段就能让Sonar分析出问题?强制owner必须解决完issue才能提交代码?嗯!是时候对目前存在弊端的开发流程进行改进了!

老的开发流程

先介绍下目前的基础设施:

  • 通过GitHub来管理source
  • 通过Github Pull Request来实现Code Review(以前用gerrit但是我以UI太丑为由号召开发们拒绝使用)
  • 通过Jenkins来实现持续集成
  • 通过Sonarqube来实现代码分析(形同虚设)

老的流程:

  1. 当一个新feature来临时
  2. owner从master(受保护的)分支checkout 一个feature_dev_branch做开发
  3. 开发完成后,提交pull request(PR)请求合并到master
  4. 技术leader对PR进行code review并approve后,feature_dev_branch合并到master。
  5. Merge触发触发Jenkins自动build,Jenkins触发Sonarqube scan产生report(仅仅生成report)
  6. Build成功则进行package的deploy以及后续Automation Testing等流程
  7. 交付QA测试

改进后的开发流程:

  1. 当一个新feature来临时
  2. owner从master (受保护的)分支checkout 一个feature_dev_branch做开发
  3. 开发完成后,提交pull request(PR)请求合并到master
  4. PR自动触发Jenkins,Jenkins触发Sonar分析本次提交的new code
  5. Sonar将report和issue以comments的方式写到Github PR里,并作为硬性的check point
  6. Owner对PR进行反复commit直至通过Sonar的分析
  7. 技术leader对PR进行code review并approve后,feature_dev_branch合并到master。
  8. Merge触发触发Jenkins自动build,Jenkins触发Sonarqube scan产生report(仅仅生成report)
  9. Build成功则进行package的deploy以及后续Automation Testing等流程
  10. 交付QA测试

加了3步,使得new code通过sonar检测成为一个硬性指标,把issue扼杀在萌芽中,把锅甩在最前面

clipboard.png

clipboard.png

clipboard.png

哇!!!太Cool了!

什么?你竟然不知道Jenkins是个啥?!那你操个哪门子的心去优化开发流程,好好搬你的砖,写你的bug!咳咳!建议你转发本文给负责devops的同事,请他吃饭让他帮忙配置

Jenkins需要一个plugin,叫做github pull request builder

它的作用是生成在Jenkins和Github之间生成webhook,似的PR可以自动触发Jenkins的Build

clipboard.png

稍微配置下这个插件,画红线的地方很重要

clipboard.png

Jenkins还需要一个plugin,叫做SonarQube Scanner

它的作用是让Jenkins去触发Sonar的分析

clipboard.png

稍微配置下这个插件,画红线的地方很重要

没听说的Sonar?没有现成的Sonar Server? 额,继续请devops吃饭吧…

clipboard.png

clipboard.png

Sonarqube里(注意是Sonarqube里,不是Jenkins里)也需要安装一个plugin,名字叫 Github

它的作用是 当Sonar检测完毕后,把生成的report和issue的分析以comments的方式写回到Github的PR中

clipboard.png

稍微配置下这个插件,画红线的地方很重要

clipboard.png

接下去就是配置Jenkins的project了

废话不多,只贴关键配置,红线部分很重要

clipboard.png

clipboard.png

Advanced里可以勾上这一条(虽然是Dangerous),因为我们Github是企业版,所以能提PR的人是有权限控制的,如果是用官网的github管理代码请慎用这个选项,建议使用黑白名单来控制触发的条件。 clipboard.png

以下是Sonar的配置,很重要,注意analysis mode只能选择preview,preview mode不会真正的在Sonar上生成report哦。

clipboard.png

写在最后

Jenkins的安装,Sonar的安装啥的,教程我就不放link了,这种大路教程一搜一大堆(我个人建议你用docker安装)作为一个开发,我觉得这些基本的,能提升工作效率的工具还是要掌握一下的,并不是说只有devops才会用到这些工具,谁不喜欢偷懒呢,这些都是偷懒的好帮手。

截止发稿时,这个流程还存在一些些小bug,比如preview mode的sonar分析不能跟sonar中quality gate进行结合,sonar js不能分析parse有问题的js文件等等,还显得不够完美,我们也在通过其它的workaround来100%实现理想中的开发流程,如果你有好的建议欢迎留言。

原文链接:https://segmentfault.com/a/1190000015592863

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35812.html

文章标题:理想中的Jenkins+Sonar+Github代码质量管理

相关文章
js实现点击文本框显示日期选择器特效代码分享
本文实例讲述了JS+CSS实现美化的下拉列表框效果。分享给大家供大家参考。具体如下: 三款款经过JS+CSS美化的下拉列表,效果很不错,总有一款适合你,先看看运行效果图: 具体代码如下: <head> <meta htt...
2017-03-29
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $('#gzrwTable').on('click-row.bs.table', function(e, row, $element) { $(&#x...
2017-02-17
JavaScript中的call方法和apply方法使用对比
方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象。 说明: call 方法可以用来代替另一个对象调用一个方法。c...
2017-03-29
最简单的JavaScript图片轮播代码(两种方法)
通过改变每个图片的opacity属性: 素材图片: 代码一: <!DOCTYPE html> <html lang="en"> <head> <meta cha...
2017-03-21
JS实现转动随机数抽奖的特效代码
大家都玩过抽奖游戏,或者梦想抽到大奖吧,但是有没有想过抽奖游戏是怎么实现的呐?今天就给大家分享一款转动随机数抽奖的JS特效代码。 实现代码如下 <!Doctype html> <html> <head> ...
2017-03-29
javascript 中的try catch应用总结
<script language="javascript"> try { throw new Error(10,"asdasdasd") } catch (e) { alert(e.mes...
2017-04-05
js焦点文字滚动效果代码分享
本文实例讲述了js焦点文字滚动效果。分享给大家供大家参考。具体如下: 效果描述: 今天推荐的这个又是一个原生的js焦点图效果 默认自动切换,也可以手动切换 javascript代码采用函数式对象编程,也就是javascript编程中的Mod...
2017-03-30
js实现带圆角的两级导航菜单效果代码
本文实例讲述了js实现带圆角的两级导航菜单效果代码。分享给大家供大家参考。具体如下: 这是一款使用JS做的圆角菜单,支持两级菜单显示,本人比较喜欢的风格,修改使用方便,新手也能上手快。使用有几张圆角图片来修饰了菜单,喜欢的朋友可以下载代码留...
2017-03-29
Javascript实现可旋转的圆圈实例代码
本文实例讲述了Javascript实现可旋转的圆圈。分享给大家供大家参考。具体如下: 这里基于Javascript实现会旋转的圆圈,有点三维变幻的效果,立体感很强,代码主要是基于JS,学习Js脚本编程来说,是个学习JS生成动画的好范例。 运...
2017-03-29
bootstrap table 数据表格行内修改的实现代码
js中设置列的属性 editable : { type : 'text',//数据显示在文本框内 emptytext : "--",//数据为空时显示 vali...
2017-03-14
回到顶部