对现有React项目进行规范及优化(Sonar 搭建前端篇)(二)

3,346 阅读12分钟

1. sonar是什么?

先中规中矩介绍一下sonar是什么吧,毕竟我是追求完美的人。 sonar是一个代码质量管理的开源平台,用于管理源代码的质量,可检查出项目代码的漏洞和潜在的逻辑问题,代码质量的评分,健康状况等,通过插件形式,可以支持包括java、C#、JavaScript等二十余种编程语言的代码质量管理与检测。 sonar可以从一下七个维度检测代码质量,看别人的博客总结,觉得总结的很到位:

  1. 不遵循代码标准sonar可以通过PMD,CheckStyle,Findbugs等代码规则检测工具规范代码编写;
  2. 潜在的缺陷sonar可以通过PMD,CheckStyle,Findbugs等代码规则检测工具检测出潜在的缺陷;
  3. 糟糕的复杂度分布文件、类、方法等,如果复杂度过高将难以改变,这会使得开发人员难以理解它们,且没有自动化的单元测 试,对于程序中的任何组件的改变都将可能导致需要全面的回归测试;
  4. 重复显然程序中包含大量复制粘贴的代码是质量低下的,sonar可以展示源码中重复严重的地方,这个可以指导封装;
  5. 注释不足或者过多没有注释将使代码可读性变差,特别是当不可避免出现人员变动时,程序的可读性大幅度下降,而过多的注释又会使得开发人员将精力过多的花费在阅读注释上,亦违背初衷;
  6. 缺乏单元测试sonar可以很方便地统计并展示单元测试覆盖率;
  7. 糟糕的设计通过sonar可以找出循环,展示包与包、类与类之间相互依赖关系,可以检测自定义的架构规则, 可以管理第三方的jar包,可以利用LCOM4检测单个任务规则的应用情况,检测耦合。 概念说完了,现在言归正传,开始安装环境吧。

2. sonar安装

2.1 安装准备

首先特别注意,特别重要,版本对应特别重要,否则会有各种坑!!!

准备工作:

  1. JDK
  2. SonarQube
  3. sonar-scanner
  4. Mysql 版本相关:
  • 关于JDK版本:如果安装高版本的SonarQube,对JDK的要求都是8以上,即JDK当前使用的是1.8版本,建议安装SonarQube7.0版本,对应JDK1.8和Mysql5.6或5.7。现在最新的社区版本是9.1,很明显,JDK适配版本11。
  • 关于Mysql:如果想使用mysql数据库,注意了,SonarQube过了7.8版本就不支持mysql数据库了,所以,想使用mysql数据库的童鞋,选择SonarQube7.8及更低的版本吧,什么?为什么需要用到Mysql数据库?Sonar在分析完代码后需要将报告上传到数据库,databasename=sonar,所以需要在数据库新建一个名为sonar的database,sonar初始完后会自动创建表。 Mysql版本要求可以在\sonarqube-7.8\conf\sonar.properties文件中可以搜索mysql查看支持的版本,如下图: 1635214249(1).jpg 这里很坑的点是我刚开始安装Mysql时,使用MySQL Yum Repository安装MySQL,默认会选择当前最新的稳定版本,安装的是Mysql8.0,所以不符合SonarQube7.8对于Mysql数据库版本需求,等到安装完SonarQube7.8,安装完Mysql8.0,配置数据库时,就会报**远程主机强迫关闭了一个现有的连接**报错,但**报远程主机强迫关闭了一个现有的连接**报错问题,也不一定会是数据库版本的原因,接下来的文章内容会讲到。
  • 关于启动:Linux上启动sonar服务不能使用root身份,需要创建一个单独的用户,比如命名这个用户为sonar,然后给这个sonar用户赋予SonarQube目录的全部操作权限,然后切换到sonar用户,启动服务,启动命令 sh sonar.sh start,停止命令 sh sonar.sh stop;启动成功后在web端访问 ip + 端口9000可看到sonarqube页面。
  • 注意打起精神来!!!重点,如果提示启动成功,但是无法访问,那大概率是es服务启动出错了,sonar程序会依赖Elasticsearch,在启动的时候会去启动es服务,es对应的端口为9001,查看sonarqube下的log目录里的es.log文件,可以看到es的出错日志,大概率的会是接口报冲突,只要把sonar.properties里的es端口改掉即可,如改成9003,然后再启动sonar服务。如果你还是用的root身份启sonar服务,那么es这里也会报错,提示你不能用root身份,如果你用sonar身份启动报没有权限的错,那就是你没有给你的sonar用户赋予对应的操作权限,这也是上面关于启动为什么要那么做的原因。 需要注意的点:

1. SonarQube 7.9 需要安装JDK11+

2. SonarQube 7.9 开始正式不支持MySQL

2.2 安装环境准备

  • SonarQube搭建所依赖环境:**Window**(后期会优化部署到阿里云云服务器)
  • Mysql是安装到阿里云云服务器 需要用到以下软件:
  • JDK11(Java运行环境,注意版本)
  • SonarQube7.8
  • Sonar-Runner(没找到下载源,主要是也没打算用) 或 Sonar-Scanner(历史版本下载地址)
  • Mysql数据库(创建Sonar数据库),我是在阿里云云服务器安装的Mysql数据库,使用MySQL Yum Repository安装,不会在阿里云安装Mysql的童鞋可以借鉴我另外一篇文章Centos7.6安装mysql,已经帮大家踏过坑,很详细。 言过正传,开始正式安装吧。

2.3 安装JDK

JDK安装不详细谢了,网上有很多教程,主要是要注意,本地安装过JDK1.8版本的童鞋,想要安装Java11,环境变量的配置问题,可以借鉴这篇文章Win10同时安装使用Java JDK8和11两个版本如何设置环境变量

2.4 SonarQube安装

2.4.1 SonarQube下载

进入官网下载SonarQube,选择社区版,注意进入官网最新版本是9.1,不是本次目标 1635218317(1).png 页面拉到最下面Show all versions,选择本次目标7.8版本 1635218409(1).png 选择版本安装 1635219256(1).jpg

2.4.2. 下载完成,本地C盘创建Sonar:解压缩到 Sonar

下载完直接解压 SonarQube 就好 1635219609(1).png 进入sonar/bin目录下,进入对应的系统目录,启动 sonar 1635229245(1).png 再用浏览器打开,输入URL:localhost:9000,如果可以登录后台界面说明安装成功。

1635229157(1).png 在这里我启动报错如下图: 1635229331(1).png 在网上随便一搜,让我删除sonarqube temp目录下的所有文件即可,我是直接删除了sonarqube temp目录,启动了,但我不知道原因,我之前一次解压直接就能启动的,不用删除sonarqube temp目录的。 然后我把整个sonarqube文件夹删掉,重新解压,启动,竟然又能成功启动了!!!

src=http___image.91chep.com_09ae4f1b6d784fda9931cb49027ed6a6680_680.jpg&refer=http___image.91chep.jfif 先继续下面步骤吧,时间宝贵,此疑问再出现时留待探求。 注意:此处为了防止端口被占用,出现远程主机强迫关闭了一个现有的连接的情况,故直接改一个可能用不到的端口吧

修改配置sonar.properties文件 如下图:

1635242340(1).jpg

2.4.3. 汉化

登录,默认账号:admin,默认密码:admin 汉化-> 按图操作 1635229937(1).jpg

汉化注意:按照1、2、3步骤搜出来的汉化插件是针对9.1版本的,也是目前sonarqube最新的版本,而且如果安装9.1版本时是不会在搜到的插件末尾有install安装按钮的,需要点击第四步Homepage,进到github里找到最新版的jar包,下载下来,复制到本地文件夹,咱们安装的是SonarQube7.8版本,搜到的是9.1版本,版本不一致,更要点击Homepage,进入github寻找对应7.8版本的jar包,直接下载jar包格式的代码包,放在\Sonar\sonarqube-7.8\extensions\plugins路径下 1635230503(1).png 注意:重启sonar,在启动的命令窗口输入ctrl c,等待完全退出即可。如果提前关闭窗口可能会导致退出失败,如果退出失败则进入任务管理器,杀掉相关java进程,或者重启电脑 然后重启SonarQube,再次启动的SonarQube就是汉化的界面了。 1635230668(1).jpg

如果不在任务管理器杀死相关java进程,直接启动SonarQube时报错如下:

WrapperSimpleApp: Encountered an error running main: java.nio.file.FileSystemException: C:\Sonar\sonarqube-7.8\temp\ce-exploded-plugins\authgithub\META-INF\lib\gson-2.3.1.jar: 另一个程序正在使用此文件,进程无法访问。

如下图:

1635066645(1).jpg 解决方案: 打开任务管理器,将java相关进程关闭即可

3. 为SonarQube配置MySQL数据库

说明!这里使用的SonarQube版本为7.8

说明!这里使用的JDK版本为11

说明!这里使用的Mysql版本为5.7.36

3.1 内置数据库

Sonar安装成功后,默认内置H2数据库,用于记录单次的扫描结果,对同一个project重复扫码,会覆盖之前的扫描记录,所以H2 数据库只应用于测试,不可以用于生产环境,那如果你是想玩玩,不想长期扫描你的项目,可以不必配置数据库

3.2 创建sonar数据库

此时我在阿里云服务器已经安装好Mysql数据库,可以借鉴我写的文章:Centos7.6安装mysql 创建sonar数据库命令如下:

# 创建sonar数据库 
CREATE DATABASE `sonar` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

# 创建sonar用户
CREATE USER 'sonar'@'%' IDENTIFIED WITH mysql_native_password BY 'sonar';

# 为sonar用户赋予权限
grant all on sonar.* to 'sonar'@'%';

# 刷新权限,使权限生效
FLUSH PRIVILEGES;

PS:此处如果执行完上面命令,如果想删掉建的sonar数据库,如果重新执行上面所有命令创建sonar数据库时,创建sonar的命令会成功,但第二个命令会报错,错误信息为:

[Err] 1396 - Operation CREATE USER failed for 'sonar'@'%'

原因是创建过sonar用户,说明sonar用户已经在mysql.user表中建立,若建立该用户,需先删除该用户,步骤如下:

  1. 删除用户
delete from mysql.user where user='sonar'; 
  1. 清理缓存
FLUSH PRIVILEGES;
  1. 如果重新添加用户还是报错,则执行下面语句(可能原因是虽然用户已删除,但无刷新或者刷新了但是存在该用户的权限信息。)
drop user 'test'@'%';
  1. 创建sonar用户
CREATE USER 'sonar'@'%' IDENTIFIED WITH mysql_native_password BY 'sonar';
  1. 创建成功。 注意 SOnarQube 7.8配置mysql版本问题,否则会报错,如:报错:”远程主机强迫关闭了一个现有的连接“ 解决注意方案:
  • MySql数据库版本是否于Sonar兼容,配置数据库信息的文件有说明,版本要求,5.6<=mysql版本<8.0
  • MySql数据库用户名密码是否有误;
  • 是否已经有名称为sonar的数据库重名的情况;

3.3 终于,还是倒在了路上

遇到了困境,我在远程服务器安装了Mysql数据库,想着在本地安装的sonarqube连接远程数据库,在sonarqube的配置文件更改了数据库信息后,一直报错:”远程主机强迫关闭了一个现有的连接“ 解决注意方案,我确定选择的数据库版本是符合版本需求的,Mysql5.7.36,用户名密码所有的可能都尝试过了,数据库名字也是唯一的sonar,但还是报错,强大的搜索引擎也没找到我需要的,肯定是我搜索姿势不对。 没办法,只能转而求其次,本地安装Mysql数据库。

3.4 本地安装Mysql

想要使用远程服务器上安装的Mysql数据库的计划失败后,为了不影响时间,只能不继续battle,就只能转而求其次,在本地安装Mysql数据库。

本地安装数据库环境:Windows10

安装Mysql参考博文:第三篇 Windows 10 系统MySQL的zip安装教程(谢谢博主)

Mysql下载地址:版本5.7.34(这里比较奇怪,我远程服务器使用MySQL Yum Repository安装Mysql,版本可以选择5.7.36,在官网手动下载5.7版本系列只到5.7.35)

这样基本上本地安装Mysql就不会出现什么问题了,安装完成后重复3.1步骤,创建创建sonar数据库即可。 注意:可能会出现Mysql官网下载安装包很慢很慢的情况,参考该博文:mysql官网下载太慢解决办法,把迅雷下载链接设置为:downloads.mysql.com/archives/ge… 名字改为你想下载的安装包版本名就可以。

4. Sonar-Scanner安装与配置

4.1 Sonar-Scanner安装

Sonar 的命令行分析端软件有两种分别是 Sonar-Runner 和 Sonar-Scanner,这里我们用 Sonar-Scanner 来验证。

下载Sonar-Scanner,我选的版本为:sonar-scanner-cli-4.6.1.2450-windows

直接解压,我解压放的目录与sonarqube同一个目录下,如下图:

1635474903(1).jpg

4.2 Sonar-Scanner配置

4.2.1 配置环境变量

  1. 填写变量名、变量值 变量名为:SONAR_RUNNER_HOME

变量值为:sonar-scanner解压路径

  1. 编辑变量path 新增值:sonar-scanner解压路径\binC:\Sonar\sonar-scanner-4.6.1.2450-windows\bin

注意:我刚开始填写的为:%SONAR_RUNNER_HOME\bin,结果不生效。 环境变量配置完成后,cmd命令(命令提示符),输入sonar-scanner,回车,出现下方信息后,环境变量配置完成。 1635476199(1).jpg

但有一个问题,我的信息显示还会有下面的报错: 1635476269(1).jpg

ERROR: Error during SonarScanner execution
org.sonarsource.scanner.api.internal.ScannerException: Unable to execute SonarScanner analysis
        at org.sonarsource.scanner.api.internal.IsolatedLauncherFactory.lambda$createLauncher$0(IsolatedLauncherFactory.java:85)

但这个报错结果又不会影响我sonarqube的使用。

4.2.2 Sonar-Scanner配置

接下来进行sonar-scanner配置,打开解压目录,进入\sonar-scanner\conf文件夹,修改sonar-scanner.properties配置文件。

1635476426(1).png 配置内容如下:

1635476598(1).png 源码如下:

sonar.projectKey=sonar_test_project
sonar.sources=.

#----- Default SonarQube server
#----- SonarQube服务的链接
sonar.host.url=http://localhost:9999

#----- SonarQube服务的令牌
sonar.login=e3bb99687d78f07e94d99f4dec960d178fc6e35d

#----- Default source code encoding
sonar.sourceEncoding=UTF-8

4.2.3 被测试项目中的配置

  1. 启动sonarqube
  2. 登录系统,点击右上角加号的“新建项目”

1635477415(1).png 3. 填写项目标识

1635477510(1).jpg 4. 创建令牌

1635477597(1).jpg

1635477632(1).png 设置成功后,即可创建对应的令牌,令牌的值在上面的Sonar-Scanner中相关配置会用到(sonar-scanner.properties文件里的SonarQube服务的令牌配置项),包括对应的项目标识,令牌名称输入“admin”(名称自己设置),点击右侧的“创建”按钮,创建令牌完成,创建完毕后,复制下方的令牌的值,令牌值为随机生成,故本安装手册中令牌值在新的部署环境中无效,不通用。

  1. 要检测项目内配置 在被测项目的**根目录**,添加sonar-project.properties配置文件,配置文件补充内容如下。

1635478110(1).png 源码如下:

sonar.projectKey=sonar_test_project
sonar.projectName=sonar_test_project
# 代码路径
sonar.sources=.
sonar.projectVersion=0.1.0
sonar.host.url=http://localhost:9999
sonar.login=df701374ff5d3bc1b36e9162cbb08b11b29cebe8
sonar.exclusions=**/*.less,assets/images/**,assets/less/**

5. 执行代码扫描

进入目标代码根目录,点击对应的路径,cmd进入定位到当前目录,具体执行步骤如下。

1635478567(1).jpg cmd进入被检测项目根目录下:

1635478655(1).png 输入如下命令:

sonar-scanner

进行代码扫描。

1635478936(1).jpg

扫描结果如下:

1635478984(1).png

1635479035(1).png