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
関連
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
