浅聊如何仅半天搭建代码自动审核平台demo

背景

媳妇国庆节在家加班,发现在优化react代码。我凑近一看,原来是代码复杂度高 、相似代码多 、使用的npm包有版本风险。这不就激起我的好奇心了嘛,如果是人工检测审核,那工作量得多大啊。原来是利用了 SonarQube 这个代码自动审核平台。

SonarQube 是什么

官方文档,下面是文档截图。

实际上可以通过该平台可视化方式展现代码中的漏洞、bug、代码质量、测试覆盖率等等。根据时间等多种维度展示代码质量波动情况。

下面是搭建的SnoarQube的平台的demo截图,可以看见内容还是很丰富的。

动手试一下

安装SonarQube

文档提供了两种方式,一种是本地安装,一种是docker。我选择后者,安装过程也非常简单。首先下载一个docker,然后搜索安装并运行镜像即可。而镜像运行的命令在文档也可以看见.

题外话:可以看见sonarqube下载量非常高,达500M+,我之前却从来没听说过。

镜像运行之后,打开http://127.0.0.1:9000就可以看见SonarQube已经安装完成了。

创建代码项目

SonarQube,支持从多种平台导入项目。我在gitlab创建了一个demo项目,根据文档指引,需要在代码里面编写sonar-project.properties和.gitlab-ci.yml两个文件,文件内容根据提示复制内容即可。你会发现,.yml配置里面包含了SONAR_HOST_URL和SONAR_TOKEN两个环境变量。根据文档提示,需要在git项目里:Settings > CI/CD > Variables,创建这两个环境变量,并勾选或关闭Protect Variable、Mask Variable复选框。

发布代码

代码发布,根据 .yml 可以知道,会执行两个 sonarqube-check sonarqube-vulnerability-report 两个stage。但是不出意外的话就是会出意外,pipeline会报错。仔细查看报错内容可以得知,127.0.0.1:9000根本无法访问啊。SonarQube是本地镜像服务,gitlab不可能直接通过域名访问啊。思考片刻,我将自己的127.0.0.1:9000,发布到外网不就解决了吗。经过搜索,发现了ngrok神器。可以代理本机ip到.ngrok-free.app上。经过一番(安装、环境变量配置、脚本启动)操作,成功将本机ip代理到外网上。 接着修改SONAR_HOST_URL为代理的新地址,并重新发布代码触发pipeline。

展望

SonarQube 是真的好,可以从多个维度查看代码质量。并可以结合 devops拒绝辣鸡的代码上线。明天就将它推荐给领导。


此刻传来了媳妇的吐槽:辣鸡SonarQube,代码复杂度计算一点都不合理,为了复杂度指标强行把代码拆散。升级个npm版本,代码又跑不起来了。

相关推荐
zach31 分钟前
前端落地实战:Next.js 项目 Nginx + PM2 生产部署全流程(附踩坑总结)
前端·pm2·next.js
overmind40 分钟前
oeasy教h5前端001 修改的乐趣_直接修改在线网页
前端
只睡四小时1 小时前
JS 手写 D-pad 空间导航:电视端焦点引擎实战
android·开发语言·前端·javascript·ecmascript·hls·空间导航
恋猫de小郭1 小时前
Android 原生的 Compose A2UI 也来了,你还抱着 XML 养老吗?
android·前端·flutter
庄园特聘拆椅狂魔1 小时前
从连连看到粒子消散——前端小游戏与视觉特效的技术选型
前端
JudithHuang1 小时前
React 常用 Hooks
前端·react.js·前端框架
sycmancia2 小时前
Qml——Window元素使用
前端
每天都好困2 小时前
03 AR 投影与误差修正:把地图上的点贴到视频画面上
前端
每天都好困2 小时前
04 地图图层封装:像管理 Photoshop 图层一样管理地图元素
前端
去伪存真3 小时前
构建你的第一个 DevOps AI Agent:自动化捕获、分析并修复 CI 故障
前端·agent