【Next.js】SonarQubeを使って静的解析を動かしてみる

# はじめに

こんにちは、プログラミングを始めて約3年のエンジニアのkeitaMaxです。

今回は、GitHubにPushしたときにSonarQubeで自動で解析できるようにしたいと思います。

https://docs.sonarsource.com/sonarqube/latest/devops-platform-integration/github-integration/



# SonarQubeの新しいプロジェクトを作成する。

下記公式ページに書いてある通りにセットアップをします。

https://docs.sonarsource.com/sonarqube/latest/try-out-sonarqube/

まずは以下のコマンドをコマンドラインでたたいて、Dockerでサーバーを起動させます。

```
docker run -d --name sonarqube -e SONAR_ES_BOOTSTRAP_CHECKS_DISABLE=true -p 9000:9000 sonarqube:latest
```
立ち上がると、ブラウザで以下のURLにアクセスすると、SonarQubeのログイン画面が表示されます。
```
http://localhost:9000
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/e78dcd0d-82d2-c1fc-8918-460859477a3c.png)

Login: admin
Password: admin

を入力すれば初回ログインが来ます。

ログインできると以下のようにパスワードを変更するように言われるので変更します。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/baaca081-3337-3d2e-c414-b201f65d08c2.png)

すると以下のような画面が表示されるので、`Create a local project`をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/7da6c6fc-dcf2-e290-0638-f431a2f02eeb.png)

するとProject display nameを聞かれるので今回は`next-example-app`を入力しました。

`Next`を押し、次の画面で`Use the global setting`を選択し、'Create project'を押すと新しくプロジェクトができました。

# GitHub Actionsで使用するトークンを発行する

プロジェクトができると以下のような画面が表示されると思うので、`With GitHub Actions`をクリックして`SONAR_TOKEN`を発行します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/59876fc6-24fa-de76-c5cd-8e07544ddaf4.png)

GitHubの`Secrets and variables`>`Actions`でKeyを設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/474f1f29-56c9-c5e4-e5a6-d50c2b9f229a.png)


`SONAR_TOKEN`と`SONAR_HOST_URL`を設定しました。

※今回はローカルでやるので必要ない設定ですが、今後サーバをたててやろうかなと考えているのでせっていしています

# Next.js側の修正して実行してみる

`sonar-project.properties`を作成し、以下のようにしました。

```properties:sonar-project.properties
sonar.projectKey=next-example-app
sonar.login=sqp_xxxxxxxxxxxxxxxxxxxxxxxxx  //先ほど発行したトークンを入れてください。
```

また以下のコマンドでソナーキューブをインストールします。

```
npm install --save-dev sonarqube-scanner vitest-sonar-reporter
```

`package.json`の`scripts`に以下を追記します。
```json
    "sonar": "sonar-scanner"
```

そして以下コマンドで実行します。

```
npm run sonar
```

```
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://localhost:9000/api/ce/task?id=2241f6c2-88f4-4310-9201-d437cc8c82cc
INFO: Analysis total time: 1:34.101 s
INFO: ------------------------------------------------------------------------
INFO: EXECUTION SUCCESS
INFO: ------------------------------------------------------------------------
INFO: Total time: 1:38.529s
INFO: Final Memory: 21M/88M
INFO: ------------------------------------------------------------------------
[14:17:23] Analysis finished.
PS C:\develop\next-example-app> 
```
`Analysis finished.`がでたら成功です。


# テスト結果を見てみる

テスト結果を見てみます。

`http://localhost:9000/dashboard?id=next-example-app`
ここにアクセスをしてみると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/5952a494-7b31-3383-36d1-1e913db12200.png)

こんな感じで動いているのがわかります。


# おわりに

結構複雑だったので理解に時間がかかりました。
もっとちゃんとSonarQubeについて理解して、コードカバレッジなどを動かしていき鄭です。


この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

# 参考

https://qiita.com/omix222/items/42479f14ba50f9f6f69b

https://n-laboratory.jp/articles/next-13-sonarqube