浅聊如何仅半天搭建代码自动审核平台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_URLSONAR_TOKEN两个环境变量。根据文档提示,需要在git项目里:Settings > CI/CD > Variables,创建这两个环境变量,并勾选或关闭Protect VariableMask 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版本,代码又跑不起来了。

相关推荐
疯子****6 小时前
【无标题】
前端·clawdbot
RichardLau_Cx6 小时前
【保姆级实操】MediaPipe SDK/API 前端项目接入指南(Web版,可直接复制代码)
前端·vue·react·webassembly·mediapipe·手部追踪·前端计算机视觉
不爱写程序的东方不败6 小时前
APP接口测试流程实战Posman+Fiddler
前端·测试工具·fiddler
晚霞的不甘7 小时前
Flutter for OpenHarmony构建全功能视差侧滑菜单系统:从动效设计到多页面导航的完整实践
前端·学习·flutter·microsoft·前端框架·交互
黎子越7 小时前
python相关练习
java·前端·python
北极糊的狐8 小时前
若依项目vue前端启动键入npm run dev 报错:不是内部或外部命令,也不是可运行的程序或批处理文件。
前端·javascript·vue.js
XRJ040618xrj8 小时前
Nginx下构建PC站点
服务器·前端·nginx
We་ct8 小时前
LeetCode 289. 生命游戏:题解+优化,从基础到原地最优
前端·算法·leetcode·矩阵·typescript
有诺千金8 小时前
VUE3入门很简单(4)---组件通信(props)
前端·javascript·vue.js
2501_944711438 小时前
Vue-路由懒加载与组件懒加载
前端·javascript·vue.js