ひょんなことからsonarQubeというツールを見つけたので、使ってみたメモ。

目標と前提

dockerのsonarQube community editionを使い、typescriptメインのプロジェクトのコードを解析する
docker自体はインストール済みとする
当人はdockerなんもわからん人で、大まかな概念だけわかっている程度

sonarQubeとは

SonarSourceが運用しているコードの静的分析ツールで、バグやコードの品質などを管理してくれる。

Code Quality Tool & Secure Analysis with SonarQube | Sonar

2023年4月の時点で、version10.0であり、以下の4つのエディションがある。

Community Edition
Developer Edition
Enterprise Edition
Data Center Edition

このうち、Community Editionは無料で使え、他のエディションは有料である。(お試し期間もある様子)

Community Editionでは、JavaScriptやPythonなどの19の言語に対応していて、バグや基本的な脆弱性、コードの重複などを検出してくれる。

今回は、このCommunity Editionを使ってみる。

また、現時点でLTSは9.9であるが、今回は最新版の10.0を使ってみる。

インストール

Try out SonarQube

今回はローカルにインストールするお試し版？のような形で使う。

インストールはzipとdockerの2種類があるが、今回はdocker版を使ってみることにする。

docker hubからイメージをpullする

docker hubには、sonarqubeというイメージがあるので、それをpullする。

% docker pull sonarqube

起動してみる

% docker run -d --init --name sonarqube -e SONAR_ES_BOOTSTRAP_CHECKS_DISABLE=true -p 9000:9000 sonarqube:latest

このあと30秒くらい待って、http://localhost:9000/ にアクセスすると、sonarQubeの画面が表示される。

初回アクセスはセットアップに時間がかかるので、しばらく待つ。するとログイン画面が表示されるので、
ID・パスワード共にadminでログインする。

初回ログインした際、passwordの変更を求められるので、変更する。

(この変更後のパスワードを忘れた場合、dockerのコンテナを削除して再度起動すると、初期化される。もちろん、データも消える)

起動が確認できたら、インストールは一旦終わり。

プロジェクトの解析

ログインできたら、このような画面になる。(qiitaの投稿で画像付き久々にしている気がする)

プロジェクトの設定

今回は、ローカルにあるtypescriptのプロジェクトを解析してみるので、下のManuallyを選択する。

そのあと、各種情報を入力する。

Project display name : プロジェクト名。わかりやすければなんでも。
Project key : プロジェクトの識別子。プロジェクト名が使える場合勝手に入力される。のちに必要。
Main branch name : プロジェクトのメインブランチ。Community Editionでは、このブランチしか解析してくれない。

入力できたら、Set Upをクリックし、設定完了。

プロジェクトとの紐付け

次に、解析してもらうためのプロジェクトとの紐付けを行う。

まずは、OverviewのLocallyをクリックする。

すると、以下のような画面になる。

Token nameを入力し、Generateをクリックすると、tokenが生成される。

このトークンはのちに使うが、一旦置いておき、continueする。

2 Run analysis on your projectで、今回はtypescriptを使っているので、Otherを選択する。

OSは今回はmacなので、macOSを選択する。

すると、ここに連携するための方法が表示される。

書いてある通りにやるのだろうが、書いてあることがとても難しかったので試行錯誤した。。

sonar-scannerのインストール

まずは書いてあるとおりofficial documentation of the Scannerに飛び、一番上にあるSonarScannerをインストールする(記述時点では4.8のMac OS X 64-bit)。

(先にRunning SonarScanner from the zip fileの項目へ)

インストールしたら解凍し、インストールしたディレクトリのパスを覚えておく(<INSTALL_DIRECTORY>：今回はわかりやすいように$HOME直下に置いた)。

次に、<INSTALL_DIRECTORY>/conf/にあるsonar-scanner.propertiesを開き、以下のように編集する。

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

・・・と、書いていたのだが、ここまで同じように作業し、dockerのコンテナをポート9000で起動している場合は、特に編集する場所はなさそう。
必要であればコメントアウトを外して、URLを変更する。

次に、<INSTALL_DIRECTORY>/binにパスを通す。通し方色々。

.zshrc

export PATH="<INSTALL_DIRECTORY>/bin:$PATH"

これで、ターミナルでsonar-scannerと打てば、コマンドが実行されるようになる¹。

% sonar-scanner -h
INFO:
INFO: usage: sonar-scanner [options]
INFO:
INFO: Options:
INFO:  -D,--define <arg>     Define property
INFO:  -h,--help             Display help information
INFO:  -v,--version          Display version information
INFO:  -X,--debug            Produce execution debug output

・・・全ての行にログレベルが表示されているが、無事に実行できていることを確認。

sonar-project.propertiesを作成する

次に、解析したいプロジェクトのルートディレクトリにsonar-project.propertiesを作成する。
テンプレートはsonarQubeのサイトにあるので、ここでは必要な部分だけ記載する。

sonar-project.properties

sonar.projectKey=<Project Key> # プロジェクトの設定 で設定したProject Key
sonar.token=<token>            # 先ほど生成したtoken

これで、準備は完了。

sonar-scannerを実行する

後は、解析したいプロジェクトのルートディレクトリで、sonar-scannerを実行する。

% sonar-scanner

実行が終わるまで、しばらく待機する。

これで、プロジェクトとの紐付けは完了。

解析結果を見てみる

先ほどのOverviewをクリックすると、解析結果の画面になる。

果たして載せれるレベルの結果なのだろうか・・・・・・。

ここでは、バグやセキュリティ、メンテナンス性やコードの重複などの評価が表示される。

また、各評価の項目をクリックすると、詳細が表示される。

終わりに

今回は、sonarQubeを使って、typescriptのプロジェクトを解析してみた。

まだ使い切れていなさそうな箇所は、機会あるときに使ってみようと思う。

いやされないかもしれない。javaの実行を2回くらいブロックされた気がするので、その場合はシステム環境設定>セキュリティとプライバシーから許可すること。 ↩