手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台 (Window系统)

2023-07-21

前言

网上教程大多介绍的是Linux系统下SonarQube+Jenkins如何使用,这是因为这两款软件一般都是部署在服务器上,而大多数服务器,采用的都是Linux系统。大多数服务器用Linux的原因是:

Linux服务器上的许多软件都是免费的,Window服务器的软件大多是付费的
基于Linux服务器的解决方案多,Linux是开源白盒的,容易做优化和自定义,开源的解决方案几乎都是最先基于Unix族系统开发,Windows要么是二等公民延迟支持,要么是优化不够,性能和Unix族有差距。
庞大的生态系统,服务器端的各种软件都为它而设计,许多优秀的企业开发的软件,要么对window没有做支持,要么在window上性能有缺失。比如说Hadoop只能在linux上跑, Nginx在window上有损失,NodeJS对Windows支持不完整

考虑到大家使用的是Windows系统,为了能够让大家亲自实践一下,跟着这篇教程将SonarQube+Jenkins在本地搭建运行起来,这篇文章讲一下在Windows下SonarQube+Jenkins的安装使用方法。

效果展示

 启动SonarQube服务器

在Jenkins上运行代码扫描任务,查看扫描结果

1.SonarQube 用法

1.1 SonarQube是什么?

SonarQube 是一个代码质量管理的开源平台,用于持续评测Java源代码的代码质量。安装Sonar 插件可以对包括 JavaScript,TypeScript, C#,C/C++, PHP, SQL,Golang,Groovy等20多种编程语言的代码质量分析与检测提供支持。通过插件机制,Sonar 可以集成不同的测试工具,代码分析工具,以及持续集成工具,比如pmd-cpd、checkstyle、findbugs、Jenkins。对不同的代码质量检测插件执行结果进行再加工处理,通过量化的方式度量代码质量的变化,从而可以方便地对不同编程语言和规模的工程进行代码质量管理。同时 Sonar 还对大量的持续集成工具提供了接口支持,可以很方便地在持续集成工具中使用 Sonar。

SonarQube的架构如下图所示:它的工作原理是:sonar扫描任务运行代码质量检测工具(例如Checkstyle, FindBugs,PMD 等)分析代码,将分析结果写入到与sonar服务器绑定的数据库,sonar服务器会通过不同语言的插件算法对代码分析结果进行再加工,最终将代码分析加工结果以可视化,可度量的方式展示给用户。

1.2 它是怎样保障代码质量的?

它是从 Architecture Design, Coding Rule, Potential Bugs, Duplications, Comments, Unit Tests,Complexity 7个维度检查代码质量的。

1.3 为什么要用它保证代码质量?

1.3.1 什么导致了代码质量下降

持续不断的代码变更;
持续不断的架构演变;
不良的编码习惯;
项目紧,时间急

1.3.2 如何提高代码质量

从大的方面说:

良好的编码规范;
代码 Review;
代码 lint 工具;
加入测试(单元测试、回归测试、覆盖率测试);
不断改进 CQA 方案(CQA: Code Quality Analysis);

从小的方面来讲:

重复的可以合并
零散的可以集中
复杂的可以拆分
没用的可以删除

采用它的好处就是:

相比lint工具检测维度比较全面, 有可视化的友好展示代码缺陷的界面,结合CI/CD工具,可以不依赖手工检查,定时清查代码

1.4 如何搭建代码质量管理平台?

SonarQube环境要求参见官方文档,

运行SonarQube需要安装Java,不同版本的SonarQube依赖的Java安装包不一样
SonarQube服务器需要至少2GB的RAM才能有效运行,win10查看主机RAM大小的方法是 开始(鼠标右键)==>设置==>系统==>关于
需要的磁盘空间量取决于使用SonarQube分析的代码量

1.4.1下载JDK

SonarQube服务器和扫描器运行时依赖JDK,不同SonarQube版本依赖的JDK版本不一样,SonarQube V8.5.x服务器依赖的JDK版本是JDK11,SonarQube Scanner -v2.249.3依赖的jdk版本是JDK8~11,为了兼容两者,要下载JDK11 下载JDK (下载的时候要注册一个Oracle账号)

JDK的安装比较简单,选择JDK的安装目录后,一路下一步即可

1.4.2下载SonarQube服务器

下载 SonarQube服务器,一定要下载社区版,其它版本都有试用期,都是收费的,并解压到软件安装目录。本文是解压在E:\ProgramFile下。

1.4.3 运行SonarQube服务器

进入到E:\ProgramFile\sonarqube-8.5.1.38104\bin\windows-x86-64下,打开cmd命令窗口,执行

StartSonar

建议将这个路径添加到系统环境变量或者设置成桌面快捷方式,方便启动。

看到SonarQube is up字样,说明SonarQube服务器启动成功了。

在浏览器中打开 http://localhost:9000,就可以访问本地的 SonarQube 

1.4.4 在SonarQube服务器创建检测项目

点击创建新项目

填写项目标识和显示名

创建分析项目时的登录凭据

选择分析的语言和电脑的操作系统,下载扫描器,复制扫描脚本命令

SonarQube需要与SonarScanner配套起来才能完成代码质量检测功能。SonarScaner有多种版本,

不依赖任何构建工具,可以独立使用的是SonarSCanner CLI版,点击上图的下载按钮下载的就是CLI版,  与构建工具结合使用的Sonar扫描器有两种下载途径:

1) 可在对应构建工具的应用市场去找 (推荐),

2) SonarQube官方也提供了下载地址,点击下载

1.4.5 开始扫描代码

切换到项目路径,有两种扫描命令参数的写法:

第一种是在控制台窗口下,将参数写到可执行命令后面

E:\ProgramFile\sonar-scanner-cli-4.5.0.2216-windows\bin\sonar-scanner sonar-scanner.bat -D"sonar.projectKey=sonar-test" -D"sonar.sources=." -D"sonar.host.url=http://127.0.0.1:9000" -D"sonar.login=c5c52709e8cde01e9293fd61be6b00539f8a65fa"

建议将扫描器可执行程序路径 E:\ProgramFile\sonar-scanner-cli-4.5.0.2216-windows\bin 添加到系统环境变量中,每次执行时就不用写这么长的路径了

第二种是在项目下,创建一个sonar-project.properties文件,在里面配置好参数 (推荐),就像下面这样

#项目的唯一标识,必填
sonar.psonar.projectKey=sonar-test-prj
项目名称
sonar.projectName=sonar-test-prj
项目版本
sonar.projectVersion=1.0
#扫描目录
sonar.sources=src
#检测语言
sonar.language=js
#扫描结果上报地址
sonar.host.url=http://127.0.0.1:9000
#登录账号
sonar.login=admin
sonar.password=xxx
#文件编码
sonar.sourceEncoding=UTF-8

然后执行 sonar-scanner,就开始检查项目代码质量。

1.4.6 查看扫描报告

代码扫描完成后,打开 http://localhost:9000,然后登陆,查看扫描报告。

默认用户: admin

默认密码: 用下面的cmd命令查看

type C:\WINDOWS\system32\config\systemprofile\AppData\Local\Jenkins\.jenkins\secrets\initialAdminPassword

2.Jenkins用法

2.1 Jenkins是什么?

Jenkins是一个开源的、提供友好操作界面的持续集成(CI)工具,起源于Hudson(Hudson是商用的),主要用于持续、自动的构建/测试软件项目、监控外部任务。Jenkins是用Java语言编写,通常与版本管理工具(简称SCM,通常是Git,SVN)、构建工具(Maven、Ant、Gradle)结合使用。Jenkins作为CI第一大神器,拥有庞大的1058个扩展插件。你想实现的功能,基本上都能找到相应的扩展插件。

2.2 Jenkins下载安装使用

2.2.1 下载jenkins ,选择windows版本

2.2.2 选择安装目录

建议不要放在系统盘,系统盘安装的软件多了,会导致机器运行速度下降。这里我们安装在E盘。

2.2.3 选择服务运行账户

Jenkins是以系统服务的方式运行的,需要指定服务运行的账户,LocalSystem和LocalService都是系统内置账号,区别是LocalSystem具有最高的权限,LocalService只具有运行服务的最小权限,本文是在本地安装,所以选择了LocalSystem账户。

2.2.4 设定服务端口

输入服务端口,建议输入值大一些,不要与系统的端口冲突。这里填写的是60000,输入完之后,可以点击一下test port,确认端口可用。

2.2.4 定制安装

定制安装这里,选择特性需要时再安装

接下来点击install,再点击完成

2.2.5 解锁Jenkins

第一次访问新的Jenkins实例时,系统会要求你使用自动生成的密码对其进行解锁。
在cmd命令行下用 type 查看密码

type C:\WINDOWS\system32\config\systemprofile\AppData\Local\Jenkins\.jenkins\secrets\initialAdminPassword

2.2.6 自定义Jenkins扩展

解锁 Jenkins之后,在 自定义 Jenkins 页面内, 可以安装任何数量的有用插件进行初始化配置。有两个选项可供选择:

安装建议的插件 - 安装推荐的一组插件,这些插件基于最常见的用例.
选择要安装的插件 - 可以定制安装插件,如果你很清楚自己要用到哪些插件,就选择定制安装,否则选择安装推荐的插件

这里需要较长时间,耐心等待插件安装完毕

可能部分插件会安装失败,不用管,因为好些你也用不到,继续下面的操作。

2.2.7 创建第一个Jenkins管理员账号

安装完自定义的Jenkins插件之后,会进入管理员用户创建页面。可以创建一个非admin的管理员账户,也可以不创建,继续使用默认的 admin管理员账户;

配置 jenkins网页访问地址,点击 保存并完成。可以使用默认地址

2.2.8. 配置完成后自动进入首页,配置node.exe安装目录

前端项目的构建都依赖node.exe,  所以要指定NodeJS的安装目录 ,  操作路径Manage Jenkins ==> Global Tool Configuration

NodeJS版本及路径查看

配置node的版本和安装路径

2.2.10 配置项目构建任务

1. 打开 Jenkins 首页,点击 新建 Item 创建项目。新建一个自由风格的项目

2.选择 源码管理 面板 ,输入你的 git 上的仓库地址。注意要添加gitee凭证

3.选择 构建环境 面板,配置执行Node命令使用NodeJS版本

4.选择 增加构建步骤 面板,windows 要选 execute windows batch command 输入

npm i && npm run build && xcopy .\build\* E:\server\dist\ /s/e/y 
rem 这行命令的作用是安装依赖,构建项目,并将构建后的静态资源复制到指定目录 E:\server\dist\; 。这个目录是静态服务器资源目录。

5. 保存后,返回首页。点击项目旁边的小三角,选择 build now 。就完成了项目的构建部署

3 将SonarQube+Gitee集成到Jenkins

3.1 添加Jenkins访问Gitee的凭证

3.1.1 在 Gitee 中生成 Personal access tokens,设置 token 相关权限

3.1.2 在Jenkins的插件管理==>可选插件下,搜索Gitee安装

3.1.3  在IJenkins中 配置 访问Gitee Server的凭证

在 “manage jenkins” ==> “configure system” 中找到 Gitee,然后在 Credentials 处添加全局凭据,类型选 Secret text,Secret 处输入上一步生成的 access token

3.2 安装SonarQube Scanner插件,并在Jenkins中指定SonarQube Scanner的安装目录

3.2.1 在 Jenkins 的插件管理中安装 SonarQube Scanner 插件

3.2.2 在 插件管理==>全局工具配置中指定Sonar扫描器的安装路径

Manage Jenkins ==> Global Tool Configuration

3.3 添加Jenkins访问SonarQube Server的凭证

3.3.1 在SonarQube Server中生成token

登录 SonarQube 后,在 “我的账号” ==> “安全” 中生成 token,注意生成的令牌不会再显示第二次,要立即复制

3.3.2 在Jenkins下添加 Jenkins访问SonarQube Sever的凭证

在 “Manage Jenkins” ==> “Configure System” 中找到 SonarQube servers
Name :随意;
Server URL :为启动的 SonarQube 服务地址,这里使用本地启动的默认地址 http://localhost:9000 ;
Server authentication token : 输入之前生成的 token

3.4 创建构建任务

3.4.1 在General下输入任务描述

3.4.2 在源码管理面板下,配置要检测的项目代码

3.4.3 在构建面板下

3.4.3.1 配置sonar扫描参数

sonar.projectKey=sonar-test--react-visual-editor
sonar.projectName=react-visual-editor
sonar.projectVersion=1.0
sonar.sources=packages
sonar.language=js,ts
sonar.eslint.eslintconfigpath=.eslintrc
sonar.eslint.ruleconfigs=.eslintrc
sonar.sourceEncoding=UTF-8
sonar.exclusions=**/__test__/**,**/demo/**,**/*.bak.*,**/*.bak

要应用eslint规则的话,需要下载一个插件sonar-eslint-plugin-0.4.0,放置在SonarQube安装目录下的 extension==>plugins 目录下。
下载地址:sonar-eslint-plugin-0.4.0.jar

3.4.3.2 配置sonar扫描未通过的执行逻辑

所有指标通过是返回:

{"measures":[{"metric":"alert_status","value":"OK","component":"sonar-test--wx-minipro-ci"}]}

没有通过时返回:

{"measures":[{"metric":"alert_status","value":"ERROR","component":"sonar-test--wx-minipro-ci"}]}

据此,SonarQube检测是否通过的判断条件可以写成:

@echo off
curl -sb -H "Accept: application/json" "http://localhost:9000/api/measures/search?projectKeys=sonar-test--react-visual-editor&metricKeys=alert_status" | findstr "OK"
set err=%errorlevel%
if "%err%"=="0" (
echo "sonarQube代码质量检测通过"
) else (
echo "sonarQube代码质量检测未通过"
exit
)

3.4.4 点击Build Now, 构建完成后,就能看到代码扫描结果

3.4.5 每次提交代码,自动检测代码质量配置

3.4.5.1 在Jenkins上配置 Gitee WebHook触发构建

3.4.5.2 Gitee WebHook配置

将Jenkins中生成的webhook通知地址,webhook密码,填写到gitee中的webhook对应配置项中

我没有公网IP,域名,所以没法演示。就不演示配置后的效果呢。

4 避坑指南

1.原因是SonarQube 7.9以上版本已不再支持mysql,我使用的是最新的8.5.x版本

2. 远程主机强迫关闭了一个现有的连接

没有正常退出,Ctrl+Shift+Delete 在任务管理器中结束掉JVM进程

3.配置sonar-scanner环境变量写法不正确

正确写法:

"C:\Program Files\Common Files\Oracle\Java\javapath";E:\ProgramFile\sonar-scanner-cli-4.5.0.2216-windows\bin;

错误写法:

"C:\Program Files\Common Files\Oracle\Java\javapath;E:\ProgramFile\sonar-scanner-cli-4.5.0.2216-windows\bin;";

4.执行sonar-scanner报错

Caused by: You must define the following mandatory properties for 'Unknown'; sonar.projectKey

解决方案:修改扫描项目下的 sonar-project.properties 文件

# 添加必要字段
sonar.projectKey=xxx(项目的唯一标识)

5.正在配置一个构建任务时,重新登录配置另外一个构建任务,导致当然任务的配置丢失。推荐采用Ctrl+L,Alt+Enter打开一个新的页签,配置另外一个任务。

6 卸载Jenkins时,要手动把Jenkins的工作空间也一并卸载掉,目录是C:\Windows\System32\config\systemprofile\AppData\Local\Jenkins
否则前次的账号配置信息仍旧在,重装之后依旧不能使用。

7 如果遇到有些必须的插件安装失败时,重启Jenkins服务,可能就会安装成功。

参考文章:

[1] SonarQube 搭建代码质量管理平台

[2] 前端项目自动化部署——超详细教程(Jenkins、Github Actions)

[3] 部署SonarQube代码检测服务以及jenkins实现代码自动测试、自动部署

[4] windows中jenkins关联gitLab进行vue项目自动部署打包

[5] SonarQube手册

手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台 (Window系统)的相关教程结束。