【sonarqube】sonarQubeを使ってみる

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

# 目標と前提

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

# sonarQubeとは

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

[Code Quality Tool & Secure Analysis with SonarQube | Sonar](https://www.sonarsource.com/products/sonarqube/)

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](https://docs.sonarqube.org/latest/try-out-sonarqube/)

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

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

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

docker hubには、[sonarqube](https://hub.docker.com/_/sonarqube)というイメージがあるので、それをpullする。

```zsh
% docker pull sonarqube
```

## 起動してみる

```zsh
% 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のコンテナを削除して再度起動すると、初期化される。もちろん、データも消える)

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

# プロジェクトの解析

![プロジェクト未生成時のトップ画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636785/25ed435a-3a3f-8b43-294e-bbf08d7888b9.png)

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

## プロジェクトの設定

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

![create a project](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636785/ca2fb7ed-8719-7bdd-1236-47ff5630f235.png)

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

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

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

## プロジェクトとの紐付け

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

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

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

![Locallyクリック後](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636785/3c498db0-f591-a252-9166-3a8c5c10edc0.png)

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

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

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

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

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

![Run analysis on your project](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636785/1e7fdce3-b234-89c1-402c-fb5e87a79363.png)

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

### 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`を開き、以下のように編集する。

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

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

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

```text: .zshrc
export PATH="<INSTALL_DIRECTORY>/bin:$PATH"
```

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

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

```zsh
% 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のサイトにあるので、ここでは必要な部分だけ記載する。

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

これで、準備は完了。

### sonar-scannerを実行する

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

```zsh
% sonar-scanner
```

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

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

## 解析結果を見てみる

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

![解析結果](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636785/5765b0ea-3ef1-b0aa-ee9a-4bb899a00879.png)

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

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

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

# 終わりに

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

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