SonarQube 및 docker 분석 코드 사용

보조 활동으로서, 나는 때때로 나의 몇몇 친구들이 그들의 코드 라이브러리에 대해 코드 심사를 집행하는 것을 도왔다.나는 이전에 사용한 적이 있다 codelyzer . 어떤 의미에서 보면 그것은 tslint와 매우 비슷하다.그러나 나는 새로운 것을 테스트하고 싶다. 그리고 우리에게 SonarQube 기회를 주겠다고 생각한다.

소개

SonarQube®는 코드의 오류, 빈틈, 코드 냄새를 검출하는 자동 코드 심사 도구이다.이것은 프로젝트 분기와 요청의 연속 코드 검사를 지원하기 위해 기존의 작업 흐름과 통합할 수 있습니다.
플러그인을 추가하고 기존 플러그인을 업데이트하는 등 항목을 만들고 설정을 적용할 수 있는 서버 구성 요소가 있습니다.그 다음은 코드 라이브러리를 스캔하고 결과를 서버에 보내서 SonarQube 대시보드에 표시하는 스캔 구성 요소입니다.
SonarQube는 여러 가지 버전이 있지만, 우리는 community edition 을 사용할 것이다. 그것은 무료이고 기원된 것이다.
그러니까 더 이상 말 안 해도 돼요. 시작합시다.

설치 프로그램

The documentation 정말 좋아요. 그리고 아주 좋은 two minute get started이 있어요. 바로 제가 손을 빨리 젖히는 데 쓰는 거예요.그러나 나는 많은 의존항을 설치해야만 일을 할 수 있다는 것을 곧 깨달았다.
나는 추가 설치를 피하는 방법을 생각하고 있었다. 내가 Docker의 그림을 보았을 때, 나는 갑자기 웃기 시작했다.
Docker Hub에서, 당신은 입문에 필요한 정보를 찾을 수 있지만, 본고에서 말하자면, 나는 명령 하나만 사용하면 된다.

docker run -d --name sonarqube -p 9000:9000 sonarqube

이 명령은 이미지를 드롭다운 상태로 컨테이너를 생성합니다.백그라운드 모드에서 컨테이너를 실행하고 포트 9000을 호스트에 노출합니다.
일단 완성되면, 서버가 시작되기 전에 몇 번의 오류를 기다려야 합니다.선택한 브라우저를 열고 서버 대시보드localhost:9000로 이동할 수 있습니다.
기본 사용자 이름admin과 암호admin를 사용하여 로그인합니다.

항목 만들기

나는 여기서 SonarQube에 대해 깊이 있게 토론하고 싶지 않지만, 하나의 프로젝트는 코드 라이브러리를 대표하는데, 당신은 스캐너가 스캔한 결과를 볼 수 있습니다.따라서 로그인한 후 페이지 중심에 있는 "새 항목 만들기"단추를 누르고 유일한 항목 키와 표시 이름을 입력하십시오.
다음 페이지에서 항목 영패의 이름을 입력하십시오.이것은 스캐너가 서버에 스캐닝 결과를 검증하고 위로 보내는 데 사용할 키입니다.

이 키를 주의하십시오. 이 페이지를 떠나면 영원히 볼 수 없기 때문입니다.계속하려면 을 클릭하면 항목 구성을 지정할 수 있는 화면이 표시됩니다.
TypeScript로 Angular 프로젝트에서 실행하고 싶어서 other를 선택하고 운영체제 알림부호에서 윈도우즈를 선택하겠습니다.

스캐너 다운로드

스캐너를 다운로드하여 드라이브의 이름이 sonarqube 인 폴더로 압축을 풀어야 합니다.나는 보통 c:\tools 을 사용해서 이런 용법을 실현한다. (만약 당신이 다른 곳에서 그것을 압축을 풀기로 선택한다면, 당신이 사용한 내용으로 그것을 바꾸십시오.)
완료되면 sonar-scanner.properties 폴더에서 c:\tools\sonarqube\config 라는 스캐너 프로필을 열고 서버 주소를 지정한 줄의 주석을 취소합니다.

#Configure here general information about the environment, such as SonarQube server connection details for example
#No information about specific project should appear here

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

#----- Default source code encoding
sonar.sourceEncoding=UTF-8

스캔 실행

일단 완성되면 너는 출발할 수 있다.프로젝트 루트 디렉터리에서 다음 명령을 실행하고 스캔이 끝날 때까지 기다립니다.

C:\tools\sonar\bin\sonar-scanner.bat -D"sonar.projectKey=fp" -D"sonar.sources=." -D"sonar.host.url=http://localhost:9000" -D"sonar.login=**********************************" -D"sonar.exclusions=node_modules/**/*"

sonar.login 매개 변수에서 이전에 얻은 키를 바꾸는 것을 잊지 마십시오.

💡 In the last step when you downloaded the scanner zip file, the command you need to execute is written down for you ready to go, just add the exclude folder to avoid code analysis on external libraries.

코드 라이브러리의 크기에 따라 스캔은 시간이 좀 걸려야 완성할 수 있습니다.그러나 완료되면 SonarQube 대시보드에서 결과를 볼 수 있습니다.

ℹ️ Remember to run npm install or yarn if you've just forked the code base from your git repository. I faced a few errors before I realised I didn't have those installed and they are used by the scanner.

일단 완성되면, 이곳은 당신의 계기판처럼 보일 것입니다.분명히 내가 심사 중인 코드 라이브러리가 좀 혼란스럽다.

질문을 눌렀을 때, 분류와 스캔 규칙에 따라 그것을 볼 수 있다.

총결산

속도로 말하자면, 나는 결과에 대해 매우 만족한다.520여 개의 파일과 수천 줄의 코드를 포함하는 내 전체 코드 라이브러리를 스캔하는 데 거의 2분이 걸렸다.
스캔 결과에 대해 말하자면, 기본 규칙 집합을 바탕으로 하고, 이것이 지역 사회 버전임을 감안하면, 결과는 tslint 또는codelyzer보다 약간 낫다고 말할 것이다.나는 문제를 가볍게 훑어보고 주의해야 할 코드 줄을 찾아낼 수 있다.그것은 나에게 문법이 밝게 나타난 결과와 일련의 종류와 표시를 보여 주었다. 이 종류와 표시에서 나는 아래로 파고들어 내가 원하는 내용을 신속하게 찾을 수 있다.
그래서 계속 시도해 보세요. 이 문제들을 해결할 수 있는 충분한 시간을 찾을 수 있을 거라고 믿습니다.이것은 당신에게 linting 오류를 가져올 뿐만 아니라, OWASP top 10 기반의 안전 알림도 줄 수 있다는 것을 기억하십시오.