使用 SonarQube 檢測 Angular 專案程式碼

Posted by Joseph on March 20, 2019 · 3 mins read

前言

最近在找程式碼檢測工具,看到了SonarQube可以幫助檢測程式碼,立刻來試試看。

SonarQube是一個可以幫助程式碼品質檢查的工具,可以嘗試找出程式碼中的 bug、vulnerabilities與code smell等問題,對程式開發有著很大的幫助。

安裝SonarQube

brew install sonarqube

啟動SonarQube

sonar console

掃描專案

可以透過 localhost:9000開啟sonar qube 服務

sonar console

可以透過登入來開始對專案作掃描,預設帳號密碼為 admin/ admin:

點選 Analyze New Project

接著會引導如何開始一個專案分析,首先是必須先建立一個 token:

接著點選Generate後,會接續引導至下一步

因為我要掃描的專案為 Angular專案,是使用 typescript作為開發語言,故語言選擇 others

選擇完成後點選Done,右邊會出現額外的訊息:

掃描前還需要額外安裝 Sonar Scanner,可以點右邊的連結,按照指示安裝:

下載後為一個壓縮檔,可以解壓縮至任何目錄

開啟目錄找到 conf資料夾,接著開啟 sonar-scanner.properties設定檔,將註解移除:

#Configure here general information about the environment, such as SonarQube server connection details for example
#No information about specific project should appear here

#----- Default SonarQube server
sonar.host.url=http://localhost:9000

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

接著切換至要掃描的目錄,開啟 terminal 並複製網頁上的語法:

sonar-scanner \
  -Dsonar.projectKey=AngularProject \
  -Dsonar.sources=. \
  -Dsonar.host.url=http://localhost:9000 \
  -Dsonar.login=650615ead2240f1a17b2bce882e71f880afa78fe

-Dsonar.projectKey: 所設定之Project Key

-Dsonar.sources:要掃描專案之目錄, . 表示當下目錄

-Dsonar.host.url:Sonar Qube Server Url

-Dsonar.login:在Web上產生之Token

需要留意的一點是,這邊的語法預設是已經將 sonar-scanner 加入 path中,如果沒有加入 path,則需要調整語法:

./path-to-sonar-scanner/sonar-scanner \
  -Dsonar.projectKey=AngularProject \
  -Dsonar.sources=. \
  -Dsonar.host.url=http://localhost:9000 \
  -Dsonar.login=650615ead2240f1a17b2bce882e71f880afa78fe

或是選擇將 sonar-scanner/bin 目錄下檔案加至 path

將指令貼至 terminal上:

接著就會開始掃描

檢視掃描結果

開起 localhost:9000,接著可以找到剛剛的專案名稱:AngularProject

備註

在 Administration目錄下,可以針對各語言做掃描的調整

但是掃描報告卻還是會出現 node_modules內的檔案,可能會掃到如 python 之類的檔案,解決方法是到 Analysis Scope目錄,加入排除掃描的目錄即可:

結論

透過SonarQube 可以清楚的看到程式碼中存在的一些缺陷,另外要注意的一點是SonarQube是原本是需要一個資料庫搭配soner console使用的,如果沒有給定資料庫設定,則預設會用H2 資料庫。

後續會試著將SonarQube整合到其他資料庫,如SQL Server or MySQL,與嘗試整合至Jenkins上。