SonarQubeとprojectの連携方法(React + TypeScript)

create-react-appで作成したreact projectとSonarQubeを連携させます。

SonarScannerのための準備

パッケージのインストール

  • sonarqube-scanner・・・SonarQubeに静的解析結果を送信する
  • jest-sonar-reporter・・・test結果をSonarQube用に出力する
yarn add --dev sonarqube-scanner jest-sonar-reporter

test reportの出力

package.jsonを修正していきます。

...
"scripts": {
  "test": "react-scripts test --watchAll=false --coverage --testResultsProcessor jest-sonar-reporter",
},
"testResultsProcessor": "jest-sonar-reporter",
"jestSonar":{
  "reportPath":"report",
  "reportFile":"test-report.xml",
  "indent": 4
},
...

scriptsのtest
カバレッジの出力とjest-sonar-reporterでのレポート出力を指定

testResultsProcessor
使用するレポート出力プロセッサを指定

jestSonar
レポートの出力先を指定している。
reportディレクトリにtest-report.xmlというファイル名で出力する

eslint reportの出力

package.jsonを修正していきます。

"scripts": {
  "lint": "yarn eslint --ext .js,.jsx,.ts,.tsx -f json -o ./report/eslint-report.json"
},

reportディレクトリにeslint-report.jsonというファイル名で出力する

確認

scriptを実行して、ファイルが作られること

yarn test
yarn lint

また、coverageディレクトリの中にlcov.infoファイルができています。

SonarScannerの設定

ルートにsonar-scanner.jsを作成する

const scanner = require('sonarqube-scanner');
scanner(
    {
        serverUrl: "http://localhost:9000",
        options: {
            "sonar.login": "admin",
            "sonar.password": "password",
            "sonar.projectKey": 'com.example.yourproject:react-template',
            "sonar.projectName": 'react-template',
            "sonar.language": "js",
            "sonar.sourceEncoding": "UTF-8",
            "sonar.sources": "./src",
            "sonar.tests": "./src",
            "sonar.test.inclusions": "**/*.test.tsx,**/*.test.ts",

            "sonar.eslint.reportPaths": "report/eslint-report.json",
            "sonar.testExecutionReportPaths": "report/test-report.xml",
            "sonar.typescript.lcov.reportPaths": "coverage/lcov.info",

            "sonar.exclusions": "./node_modules",
            "sonar.exclusions": "**/build/**",
            "sonar.exclusions": "**/test/**",
        },
    },
    () => process.exit()
);

package.jsonを修正します。

"scripts": {
  "sonar": "node sonarqube-scanner.js"
},

実行

yarn sonar

sonar-scannerの実態がDLされ、
SUCCESSするとSonarQubeにプロジェクトが表示されます。

トラブルシューティング

sonar-scannerの実行でDLするところで止まる

proxyとかで外部のインターネットに出れない時とかに起きる可能性があります。

証明書を指定して実行する

nodeの実行時に証明書エラーとなるパターン
証明書ファイルが「proxyCerts.crt」とした時に

NODE_EXTRA_CA_CERTS=~/proxyCerts.crt  node sonarqube-scanner.js

で実行できる。

package.jsonのscriptにこのまま書いてもいいかと。

手動で格納する

実行ログに出ていることを手動でやる。

https://binaries.sonarsource.com/Distribution/sonar-scanner-cli/
ここからzipをダウンロードします。

所定のディレクトリにコピーして展開します。

cd ~/.sonar/native-sonar-scanner
unzip sonar-scanner-cli-4.5.0.2216-osname.zip

関連

DockerでSonarQube環境構築を手早く構築する

SonarQubeとprojectの連携方法(Spring Boot,gradle)

SonarQubeで管理しているprojectのQualityGateの状態をAPIで取得する方法

SonarQubeとprojectの連携方法(monorepo+React + TypeScript)

参考

How to set up SonarQube locally on a React TypeScript Project

Node.js で中間証明書が設定されていない Web サイトにアクセスする

SonarQubeカテゴリの最新記事