Jenkins基础:使用NPM构建前端应用7:使用SonarQube检查前端代码质量

在前面的文章中我们介绍了如何通过使用Jenkins的NodeJS插件进行前端应用的构建和测试,在这篇文章中将继续介绍如何继续集成SonarQube来实现前端应用的代码质量状况的显示。

事前准备

SonarQube环境

构建SonarQube环境,可参看如下内容:

  • https://liumiaocn.blog.csdn.net/article/details/56673905

  • docker-compose.yml

liumiaocn:sonar liumiao$ cat docker-compose.yml 
version: '2'

services:
  # database service: mysql
  mysql:
    image: liumiaocn/mysql:5.7.16
    ports:
      - "3306:3306"
    volumes:
      - ./mysql/data/:/var/lib/mysql
      - ./mysql/conf.d/:/etc/mysql/conf.d
    environment:
      - MYSQL_ROOT_PASSWORD=hello123
      - MYSQL_DATABASE=sonarqube
    restart: "no"

    
  # Security service: sonarqube
  sonarqube:
    image: liumiaocn/sonarqube:6.7.1
    ports:
      - "9000:9000"
    volumes:
      - ./sonar/data/:/usr/share/sonarqube/data
      - ./sonar/extensions/:/usr/share/sonarqube/extensions
      - ./sonar/conf/:/usr/share/sonarqube/conf
    environment:
      - SONARQUBE_JDBC_USERNAME=root
      - SONARQUBE_JDBC_PASSWORD=hello123
      - SONARQUBE_JDBC_URL=jdbc:mysql://mysql:3306/sonarqube?useUnicode=true&characterEncoding=utf8&rewriteBatchedStatements=true&useConfigs=maxPerformance
    links:
      - mysql:mysql
    depends_on:
      - mysql
    restart: "no"
liumiaocn:sonar liumiao$

运行起来之后的服务状态

liumiaocn:sonar liumiao$ docker-compose ps
      Name                    Command             State           Ports         
--------------------------------------------------------------------------------
sonar_mysql_1       docker-entrypoint.sh mysqld   Up      0.0.0.0:3306->3306/tcp
sonar_sonarqube_1   ./bin/run.sh                  Up      0.0.0.0:9000->9000/tcp
liumiaocn:sonar liumiao$ 

SonarQube服务页面确认
在这里插入图片描述

基础知识

如果对于NodeJS的插件使用或者在Jenkins的Jenkinsfile中使用npm的基本方法不熟悉的开发者可以先行查看如下文章。

  • 在Jenkins中安装和设定NodeJS插件:https://liumiaocn.blog.csdn.net/article/details/102618269
  • 如何在Jenkinsfile中使用NodeJS:
  • https://liumiaocn.blog.csdn.net/article/details/102598127

而关于Alpine镜像中使用NodeJS则有诸多问题,常见的对应方法可以参看:

  • https://liumiaocn.blog.csdn.net/article/details/102587460

关于SonarQube的SonarTS插件的配置方法,可以参看:

  • SonarQube下的TypeScript代码扫描设定方法

Jenkinsfile

node {
   stage('Prepare Node and NPM') { // confirm nodejs plugin and setting
    env.NODEJS_HOME = "${tool 'nodejs-10.15.3'}"
	env.PATH="${env.NODEJS_HOME}/bin:${env.PATH}"
	sh 'npm --version'
   }
   stage('Prepare Angular CLI') { // install global angular cli
    sh 'npm -g install @angular/cli'
    sh 'ng --version'
   }
   stage('Prepare Angular Project') { // prepare angular demo app
    sh 'if [ ! -d demo ]; then ng new demo --style less; fi'
   }
   stage('Build Angular Project') { // build angular demo app
    sh 'cd demo && npm install && npm run build'
   }
   stage('Build Angular demo image') { // build image and push to registry
    sh 'cp /tmp/Dockerfile .'
    docker.withRegistry('http://192.168.31.242:5000') {
      def angular_img = docker.build("angulardemo:${env.BUILD_ID}")
      angular_img.push()
    }
   }
   stage('Deploy Angular image') { // docker run angular image
    docker.image("angulardemo:${env.BUILD_ID}").run('-p 8888:80')
   }
   stage('Sonar-Scanner Angular Demo App') { // sonar-scanner
    sh 'cd demo && /usr/local/share/sonar/bin/sonar-scanner -Dsonar.projectKey=demo -Dsonar.sources=src -Dsonar.host.url=http://192.168.31.242:9000 -Dsonar.login=admin -Dsonar.password=admin'
   }
}

代码说明:
angular是通过cli来创建应用程序脚手架的,在Prepare Angular Project的stage中通过使用ng new demo创建了demo的angular应用。而在后续的stage中则通过npm install安装相关的依赖,通过npm run build则生成了结果的dist目录与文件,然后通过docker.withRegistry设定私库地址,通过docker.build构建,通过push方法进行推送,然后使用image的run方法运行容器,而通过内置的sonar-scanner来进行代码的质量扫描。

结果确认

  • 执行日志确认
    执行日志如下所示:
Started by user root
Running in Durability level: MAX_SURVIVABILITY
[Pipeline] Start of Pipeline
[Pipeline] node
Running on Jenkins in /data/jenkins/workspace/angular-pipeline-job
[Pipeline] {
[Pipeline] stage
[Pipeline] { (Prepare Node and NPM)
[Pipeline] tool
[Pipeline] sh
+ npm --version
6.4.1
[Pipeline] }
[Pipeline] // stage
[Pipeline] stage
[Pipeline] { (Prepare Angular CLI)
[Pipeline] sh
+ npm -g install @angular/cli
...省略
[Pipeline] // stage
[Pipeline] stage
[Pipeline] { (Sonar-Scanner Angular Demo App)
[Pipeline] sh
+ cd demo
+ /usr/local/share/sonar/bin/sonar-scanner '-Dsonar.projectKey=demo' '-Dsonar.sources=src' '-Dsonar.host.url=http://192.168.31.242:9000' '-Dsonar.login=admin' '-Dsonar.password=admin'
INFO: Scanner configuration file: /usr/local/share/sonar/conf/sonar-scanner.properties
INFO: Project root configuration file: NONE
INFO: SonarQube Scanner 4.2.0.1873
INFO: Java 1.8.0_212 IcedTea (64-bit)
INFO: Linux 4.9.87-linuxkit-aufs amd64
INFO: User cache: /root/.sonar/cache
INFO: SonarQube server 6.7.1
INFO: Default locale: "en_US", source code encoding: "UTF-8" (analysis is platform dependent)
INFO: Publish mode
INFO: Load global settings
INFO: Load global settings (done) | time=331ms
INFO: Server id: AW3nsip1zhnfoGaybxGb
INFO: User cache: /root/.sonar/cache
INFO: Load plugins index
INFO: Load plugins index (done) | time=133ms
INFO: Process project properties
INFO: Load project repositories
INFO: Load project repositories (done) | time=40ms
INFO: Load quality profiles
INFO: Load quality profiles (done) | time=236ms
INFO: Load active rules
INFO: Load active rules (done) | time=1242ms
INFO: Load metrics repository
INFO: Load metrics repository (done) | time=78ms
WARN: SCM provider autodetection failed. No SCM provider claims to support this project. Please use sonar.scm.provider to define SCM of your project.
INFO: Project key: demo
INFO: -------------  Scan demo
INFO: Load server rules
INFO: Load server rules (done) | time=78ms
INFO: Base dir: /data/jenkins/workspace/angular-pipeline-job/demo
INFO: Working dir: /data/jenkins/workspace/angular-pipeline-job/demo/.scannerwork
INFO: Source paths: src
INFO: Source encoding: UTF-8, default locale: en_US
INFO: Index files
INFO: 13 files indexed
INFO: Quality profile for ts: Sonar way
INFO: Sensor SonarTS [typescript]
INFO: Analyzing 8 typescript file(s) with the following configuration file /data/jenkins/workspace/angular-pipeline-job/demo/tsconfig.json
INFO: 8 files analyzed out of 8
INFO: Sensor SonarTS [typescript] (done) | time=16429ms
INFO: Sensor Zero Coverage Sensor
INFO: Sensor Zero Coverage Sensor (done) | time=41ms
INFO: Sensor CPD Block Indexer
INFO: Sensor CPD Block Indexer (done) | time=1ms
INFO: No SCM system was detected. You can use the 'sonar.scm.provider' property to explicitly specify it.
INFO: 5 files had no CPD blocks
INFO: Calculating CPD for 3 files
INFO: CPD calculation finished
INFO: Analysis report generated in 487ms, dir size=15 KB
INFO: Analysis reports compressed in 1557ms, zip size=14 KB
INFO: Analysis report uploaded in 1133ms
INFO: ANALYSIS SUCCESSFUL, you can browse http://192.168.31.242:9000/dashboard/index/demo
INFO: Note that you will be able to access the updated dashboard once the server has processed the submitted analysis report
INFO: More about the report processing at http://192.168.31.242:9000/api/ce/task?id=AW3tka-jW6EUCstmRxVP
INFO: Task total time: 27.080 s
INFO: ------------------------------------------------------------------------
INFO: EXECUTION SUCCESS
INFO: ------------------------------------------------------------------------
INFO: Total time: 30.489s
INFO: Final Memory: 8M/68M
INFO: ------------------------------------------------------------------------
[Pipeline] }
[Pipeline] // stage
[Pipeline] }
[Pipeline] // node
[Pipeline] End of Pipeline
Finished: SUCCESS
  • 构建结果
    在blueocean上也能实时地确认到构建的输出信息
    在这里插入图片描述

  • 登陆SonarQube确认扫描结果
    在这里插入图片描述
    在这里插入图片描述

淼叔 CSDN认证博客专家 神经网络 TensorFlow NLP
资深架构师,PMP、OCP、CSM、HPE University讲师,EXIN DevOps Professional与DevOps Master认证讲师,曾担任HPE GD China DevOps & Agile Leader,帮助企业级客户提供DevOps咨询培训以及实施指导。熟悉通信和金融领域,有超过十年金融外汇行业的架构设计、开发、维护经验,在十几年的IT从业生涯中拥有了软件开发设计领域接近全生命周期的经验和知识积累,著有企业级DevOps技术与工具实战。
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页