자바스크립트 지속적 통합 : jenkins, git, gerrit, grunt, karma, jasmine, etc

이 포스트에서는 Jenknis 을 이용하여 자바스크립트 지속적 통합 (Continuous Integration) 을 설정하는 방법에 대해서 알아본다. 간단하게 설명하면, git 이나 svn 같은 소스 관리 툴에 소스를 업데이트 하면, 자동으로 CI 서버(여기서는 Jenkins) 에서 이를 감지하고, 빌드나 테스트 케이스를 실행하는 것이다. 이 포스트에서는 소스 관리툴을 git 과 gerrit 을 사용핬다.

1. PhantomJS 을  package.json 추가

PhantomJS는 브라우저 없이 자바스크립트를 실행할 수 있게 해주는 모듈이다. 테스트 케이스들을 PhantomJS을 사용하기 위해 package.json 을 관련 모듈을 업데이트 해주어야 한다.

npm install phantomjs --save-dev
npm install karma-phantomjs-launcher --save-dev
npm install karma-junit-reporter --save-dev

2. jenkins에서 사용할 karma 설정 파일

jenkins 은  별도의 karma 설정 파일을 사용할 것이다. 실제 로컬에서 개발을 진행할 때 사용하는 브라우저와 Jenkins이 실행하는 브라우저가 다르니 이렇게 파일을 분리하는 것이 편하다. 아래와 같은 jenkins-ci-conf.js 파일을 만들자. [라인 63] 을 보면 브라우저가 phantomjs 로 설정한 것을 확인할 수 있다.

3. grunt 에 jenkins에서 실행할 task 설정

grunt 에서 jenkins 에서 실행할 continuous 라는 타스크을 만들어준다. [라인23 ~ 26]을 살펴보자. karma 설정파일을 2번에서 만든 설정파일로 설정했다. 그리고 sigleRun 옵션이 설정된 것을 알 수 있다. singleRun 을 설정하면 Continuous Integeration 모드로 실행된다.


아래의 명령어를 통해서 타스크를 실행할 수 있다.
grunt karma:continuous

4. jenkins 이 설치된 서버에 PhantomJS 빌드 [jenkins이 리눅스에 설치된 경우]

만약 jenkins이 리눅스에 설치되어 있다면 별도로 build 을 해주어야 한다. 하지만 다른 운영체제에 설치되어 있다면, 이 단계는 진행할 필요가 없다. 자세한 내용은 PhantomJS 다운로드 페이지을 참고하자.

5. jenkins 플러그인 설치 [jenkins이 리눅스에 설치된 경우]

Environment Injector Plugin 을 설치하자. 4번에서 설치한 PhantomJS 경로를 Path 로 잡아줄때 유용하다.

6. job 설정

실제로 테스트를 실행할 job 설정을 살펴보자. 소스코드 관리는 git 을 통해서 진행했기에 아래와 같이 설정해준다.

소스코드관리

build trigger

gerrit trigger
코드리뷰 툴로 gerrit 과 연동하였다. project 와 branch 을 설정해준다.

빌드환경
script content 에서 4번에서 build 한 PhantomJS 의 경로를 설정해준다.

빌드
실제 빌드를 실행하는 스크립트 내용을 보면 크게 두가지로 이루어져 있다.
첫번째는 npm install 을 통해서 의존성을 가지는 모듈들을 설치하는 것이다. 두번째는 grunt karma:continuous 을 호출하여 실제 테스트 케이스를 실행한다.

빌드 후 조치
테스트 결과 레포트를 만들 경로를 설정해준다.

7. 실행 결과

jenkins,  git, gerrit, grunt, karma, jasmine, phantomjs 을 이용해서 자바스크립트 CI 을 설정하는 방법을 알아보았다. 실제 개발하는 환경과 CI을 실행하는 환경을 동일하게 가져가는 게 좋다. 하지만 실행하는 자바스크립트 엔진(크롬, 파이어폭스 또는 PhantomJS) 이 다르니 설정도 조금 달라졌다. 한가지 유의할 점은 브라우저별로 조금씩 지원하는 자바스크립트 문법이 틀리니 이점을 참고하자. 예를 들어 for---of 구문같은 경우 크롬을 사용하는 경우 별문제가 없이 실행되지만 PhantomJS에서는 아직 지원하지 않기에 문법오류가 발생한다. 자세한 내용은 이 링크를 참고하자.