一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

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

目录

 前言

网上教程大多介绍的是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服务器Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

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

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

以查看代码重复率为例

Win系统手把手教你用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服务器会通过不同语言的插件算法对代码分析结果进行再加工,最终将代码分析加工结果以可视化,可度量的方式展示给用户。

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

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

它是从 Architecture Design, Coding Rule, Potential Bugs, Duplications, Comments, Unit Tests,Complexity 7个维度检查代码质量的。
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

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大小的方法是 开始(鼠标右键)==>设置==>系统==>关于
    Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台
  • 需要的磁盘空间量取决于使用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账号)

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

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

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

1.4.2下载SonarQube服务器

下载 SonarQube服务器,一定要下载社区版,其它版本都有试用期,都是收费的,并解压到软件安装目录。本文是解压在E:\ProgramFile下。
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

1.4.3 运行SonarQube服务器

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

StartSonar

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

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

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

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

在浏览器中打开 http://localhost:9000,就可以访问本地的 SonarQube 
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

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

点击创建新项目
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台
填写项目标识和显示名
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台
创建分析项目时的登录凭据
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台
选择分析的语言和电脑的操作系统,下载扫描器,复制扫描脚本命令
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台
SonarQube需要与SonarScanner配套起来才能完成代码质量检测功能。SonarScaner有多种版本,
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

不依赖任何构建工具,可以独立使用的是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,就开始检查项目代码质量。

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

1.4.6 查看扫描报告

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

默认用户: admin

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

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

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

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版本

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

2.2.2 选择安装目录

建议不要放在系统盘,系统盘安装的软件多了,会导致机器运行速度下降。这里我们安装在E盘。
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

2.2.3 选择服务运行账户

Jenkins是以系统服务的方式运行的,需要指定服务运行的账户,LocalSystem和LocalService都是系统内置账号,区别是LocalSystem具有最高的权限,LocalService只具有运行服务的最小权限,本文是在本地安装,所以选择了LocalSystem账户。
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

2.2.4 设定服务端口

输入服务端口,建议输入值大一些,不要与系统的端口冲突。这里填写的是60000,输入完之后,可以点击一下test port,确认端口可用。
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

2.2.4 定制安装

定制安装这里,选择特性需要时再安装
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

接下来点击install,再点击完成
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

2.2.5 解锁Jenkins

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

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

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

2.2.6 自定义Jenkins扩展

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

  • 安装建议的插件 – 安装推荐的一组插件,这些插件基于最常见的用例.
  • 选择要安装的插件 – 可以定制安装插件,如果你很清楚自己要用到哪些插件,就选择定制安装,否则选择安装推荐的插件
    Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

这里需要较长时间,耐心等待插件安装完毕
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

可能部分插件会安装失败,不用管,因为好些你也用不到,继续下面的操作。
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

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

安装完自定义的Jenkins插件之后,会进入管理员用户创建页面。可以创建一个非admin的管理员账户,也可以不创建,继续使用默认的 admin管理员账户;
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

配置 jenkins网页访问地址,点击 保存并完成。可以使用默认地址
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

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

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

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

NodeJS版本及路径查看

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

 配置node的版本和安装路径

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

2.2.10 配置项目构建任务

1. 打开 Jenkins 首页,点击 新建 Item 创建项目。新建一个自由风格的项目
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

2.选择 源码管理 面板 ,输入你的 git 上的仓库地址。注意要添加gitee凭证
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

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

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

4.选择 增加构建步骤 面板,windows 要选 execute windows batch command 输入
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

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

5. 保存后,返回首页。点击项目旁边的小三角,选择 build now 。就完成了项目的构建部署
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

3 将SonarQube+Gitee集成到Jenkins

3.1 添加Jenkins访问Gitee的凭证

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

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

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

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

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

在 “manage jenkins” ==> “configure system” 中找到 Gitee,然后在 Credentials 处添加全局凭据,类型选 Secret text,Secret 处输入上一步生成的 access token
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

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

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

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

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

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

Manage Jenkins ==> Global Tool Configuration
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

3.3 添加Jenkins访问SonarQube Server的凭证

3.3.1 在SonarQube Server中生成token

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

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

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

在 “Manage Jenkins” ==> “Configure System” 中找到 SonarQube servers
Name :随意;
Server URL :为启动的 SonarQube 服务地址,这里使用本地启动的默认地址 http://localhost:9000 ;
Server authentication token : 输入之前生成的 token
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

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

3.4 创建构建任务

3.4.1 在General下输入任务描述

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

3.4.2 在源码管理面板下,配置要检测的项目代码Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

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

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

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

要应用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
)

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

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

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

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

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

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

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

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

3.4.5.2 Gitee WebHook配置

将Jenkins中生成的webhook通知地址,webhook密码,填写到gitee中的webhook对应配置项中
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

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

我没有公网IP,域名,所以没法演示。就不演示配置后的效果呢。
Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

4 避坑指南

1.原因是SonarQube 7.9以上版本已不再支持mysql,我使用的是最新的8.5.x版本Win系统手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台

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

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

没有正常退出,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;";

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

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打开一个新的页签,配置另外一个任务。

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

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

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

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


 8.Gitlab Webhook配置的Jenkins触发构建通知url报403错误的解决方法

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

参见文章 gitlab webhook jenkins 403问题解决方案

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

 

 最好用Secret Token触发自动代码质量检测。

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

文末再附赠一段快速清除错误构建的脚本,执行的入口是 Jenkins ==》 Manage Jenkins ==》 Tools and Actions ==》 Script Console

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

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

#如下代码将删除1到9999的历史构建
#任务名称
def jobName = "wx-ci-test" 
#最大行号
def maxNumber = 9999 

Jenkins.instance.getItemByFullName(jobName).builds.findAll {
  it.number <= maxNumber
}.each {
  it.delete()
}

参考文章:

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

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

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

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

[5] SonarQube手册

[6] Gitlab利用Webhook实现Push代码后的jenkins自动构建

原文链接:https://juejin.cn/post/7258607903584649272 作者:去伪存真

(0)
上一篇 2023年7月22日 上午10:00
下一篇 2023年7月23日 上午10:08

相关推荐

发表评论

登录后才能评论