Jenkins for Javascript Development Env.. About me 윤지수

Presentation on theme: "Jenkins for Javascript Development Env.. About me 윤지수"— Presentation transcript:

1 Jenkins for Javascript Development Env.

2 About me 윤지수 aniga75@gamil.com

3 지속적인 통합 ? > 품질, 안전성

4 지속적인 통합 : continuous integration (CI) 1.Watch code 2.Build Project 3.Run Tests 4.Publish Results

5 첫째. CI? Jenkins?

6 Jenkins vs. Hudson Java.net 을 사용하던 Hudson 은 SUN 이 Oracle 에 인수된 이후 Oracle 의 ‘Hudson’ 상표권 주장으로 Jenkins 으로 분리

7 Jenkins vs. Hudson 비슷하다 ( 설정, 플러그인 등 )

8 Jenkins 의 실체 : jenkins.war + web server

9 Jenkins 의 실체

10 둘째. Jenkins 해보기

11 오해 CI 구축은 어렵다 Javascript 프로젝트의 CI 구축은 더 어렵다 CI 운영비용은 비싸다 CI 는 규모가 있는 프로젝트에서만 하는 것이 다

12 Today’s Goal? : Javascript CI 환경 만들기 Jenkins 와 함께 쉽게 !

13 할 짓 요약 Jenkins 설치 소스 보관소 연동 코드가 좋은 코드인지 확인 코드가 잘 돌아가는 건지 확인 코드량이 얼마인지 확인

14 Jenkins 설치소스 보관소 연동 Github 코드가 좋은 코드인지 확인 JSLint JSLint 결과 Jenkins 에서 시각화코드가 잘 돌아가는 건지 확인 Testing framework : Qunit 테스트 자동화 : JsTestDriver 코드 커버리지 : jscoverage 테스트 결과를 jenkins 에서 시각 화 Test 결과 (jUnit test result Plugin)Coverage 결과 (cobertura Plugin) 코드량이 얼마인지 확인 N’Siq Plugin

15 이런 젠장, 뭔가 복잡해.. 다.. 기억하지 않으셔도 되요.

16 Jenkins 설치 1.Download

17 Jenkins 설치 2. install

18 Jenkins 설치 3. Window service

19 Jenkins 설치 4. Browser 확인

20 Jenkins 설치 5. Jenkins Plugins 설치 방법

21 Jenkins 설치 6. 새로운 프로젝트 생성 !

22 Jenkins 설치 6. 새로운 프로젝트 생성 !

23 Jenkins 설치 6. 새로운 프로젝트 생성 !

24 Git 연동 1. Download github plugin 2. local 에 git 설치 http://git-scm.com/downloads 3. Jenkins 설정 - git

25 Git 연동 project 에 설정하기

26 Git 연동 확인하기

27 JSLint 연동 연동 방법 개요 1.JSLint 의 Java 버전을 다운로드 2.Jenkins 에 Ant 빌드 스크립트로 실행 3.Jenkins 에서 그래프로 보여주기 위해서 Violations Plugin 설치 4.Build

28 JSLint 연동 1. Download JSLint4Java 2. Ant Build 파일 만들기 http://code.google.com/p/jslint4java/downloads Jekins/workspace/{projectname}/build.xml

29 JSLint 연동 3. project 설정에 추가하기

30 JSLint 연동 4. 확인 (result.xml)

31 JSLint 연동 5. Jenkins 그래프로 보기 – violations plugin 설치 6. Jenkins 그래프로 보기 – project 설정

32 JSLint 연동 7. Jenkins 그래프로 보기 – 빌드 그리고 확인 (1) 70 개의 문제가 발견 됨을 표시하고 있음

33 JSLint 연동 7. Jenkins 그래프로 보기 – 빌드 그리고 확인 (2) 파일별로 오류 내용을 확인 할 수 있음

34 JsTestDriver 연동 연동 방법 개요 1.JsTestDriver.jar, JsTestDriver-Qunit adaptor, jscoverage 다운로드 2.JsTestDriver.conf 설정 3.Ant 빌드 스크립트 작성 4.JsTestDriver Running 5. 테스트 결과를 그래프로 보기 위한 설정 (jUnit test result report) 6. 커버리지 결과를 그래프로 보기 위한 설정 (cobertura Plugin 설치 ) 7.Cobertura Plugin 에서 지원되는 xml 타입으로 coverage 결과를 변환

35 JsTestDriver 연동 1. 다운로드 : JsTestDriver, JsTestDriver-Qunit adaptor, jscoverage JsTestDriver.jar,jscoverage.jar http://code.google.com/p/js-test-driver/downloads/list JsTestDriver-Qunit.jar https://github.com/exnor/QUnit-to-JsTestDriver-adapter/downloads # http://code.google.com/p/js-test-driver/wiki/QUnitAdapter 이걸 받으면 안됨 (qunit 변경 메소드 반영 안됨 )http://code.google.com/p/js-test-driver/wiki/QUnitAdapter

36 JsTestDriver 연동 2. JsTestDriver.conf 설정 server: http://localhost:4224 load: - lib/qunit.js - lib/qunit_jstestdriver_adaptor/equiv.js //qunit adaptor - lib/qunit_jstestdriver_adaptor/QUnitAdapter.js //qunit adaptor - lib/jindo.desktop.all.js - src/*.js - lib/*.js - spec/testcode.js serve: - spec/test.html - lib/qunit.css plugin: - name: "coverage" jar: "lib_etc/coverage.jar" module: "com.google.jstestdriver.coverage.CoverageModule" # jstestdriver configuration : http://code.google.com/p/js-test-driver/wiki/ConfigurationFilehttp://code.google.com/p/js-test-driver/wiki/ConfigurationFile

37 Jenkins 설치 Git 연동 JSLint 연동 jsTestDriver 연동 LOC JsTestDriver 연동 3. 잠깐 ! JsTestDriver 는 CI 와 별개로 별도로 달리고 있어야 함 C:\code\run\jenkins\workspace\jenkins-test> java -jar JsTestDriver.jar --port 4224

38 JsTestDriver 연동 4. Ant Build 실행 C:\code\run\jenkins\workspace\jenkins-test> java -jar JsTestDriver.jar --port 4224 build jstestdriver # jstestdriver command line flags : http://code.google.com/p/js-test-driver/wiki/CommandLineFlagshttp://code.google.com/p/js-test-driver/wiki/CommandLineFlags

39 JsTestDriver 연동 5. 지금까지 Ant Build build jstestdriver

40 JsTestDriver 연동 6. Build ! 테스트 결과 : TEST-Chrome_210118083_Windows.DefaultaModule.xml 테스트 커버리지 : jsTestDriver.conf-coverage.dat

41 JsTestDriver 연동 7. 테스트 결과를 그래프로 보기 위한 projcet 설정 (jUnit test result report) 동작 방식 : ‘TEST-Chrome_210118083_Windows.DefaultaModule.xml’ 파일을 분석해서 결과를 보여줌.

42 JsTestDriver 연동 8. Build 후 확인

43 JsTestDriver 연동 8. 커버리지 결과를 그래프로 보기 위한 설정 (cobertura Plugin 설치 ) 9. Cobertura Plugin 에서 지원되는 xml 타입으로 coverage 결과를 변환 jsTestDriver.conf-coverage.dat 파일을 Cobertura 지원 xml 타입으로 변환하기 위해 python 오픈소스 script 를 활용 먼저 Local 에 Python 설치 : http://www.python.org/getit/http://www.python.org/getit/ Cobertura 변환 Python script 다운로드 : https://github.com/eriwen/lcov-to-cobertura-xmlhttps://github.com/eriwen/lcov-to-cobertura-xml 실행 : Jenkins Python Plugin 을 통해서 script 를 실행 할 수 있지만, 윈도우에서 Python 실행 PATH 를 인식하지 못하는 문제 발견. 대안으로 Ant build 로 실행하고 exeutable 에 절대경로를 입력

44 JsTestDriver 연동 9. Cobertura Plugin 에서 지원되는 xml 타입으로 coverage 결과를 변환 build python for making cobertura xml Ant build 에 python script 실행 추가

45 JsTestDriver 연동 10. Project 설정에 corbetura 추가

46 JsTestDriver 연동 1. Build 후 coverage 결과 확인

47 LOC 연동 1. LOC(Line of Code) NHN Opensource 활용 : https://wiki.jenkins-ci.org/display/JENKINS/NSIQ+Collector+Pluginhttps://wiki.jenkins-ci.org/display/JENKINS/NSIQ+Collector+Plugin 복잡도,LOC 를 계산해주지만 LOC 만을 활용 2. project 설정

48 LOC 연동 3. Build 후 확인

49 Complete!

50

51 좀 더 해야 할 것 Jstestdriver test code 에서 외부 라이브러리를 사용하는 경우 에러가 발생. Js 파일을 로딩하는데 문제가 있음 (require.js 와 같은 것으로 동적로딩 필요 ) 복잡도, 중복코드 검사 Cyclomatic complexity 나 중복코드 검사 Plugin 연동 Reporting Other Testing Selenium, WebDriver, or PhantomJS Mobile 환경 테스트 Other CI (Travis CI) Github 와 찰떡 궁합으로 경량화된 CI http://blog.outsider.ne.kr/779 http://tech.qmetric.co.uk/automating-javascript-ci-with-buster-js-and-travisci_205.html

52 Appendix. Inside NHN 품질관리 Hudson 기반의 Quality Practice 활동 http://book.naver.com/bookdb/book_detail.nhn?bid=6349938http://book.naver.com/bookdb/book_detail.nhn?bid=6349938 (book) JSLint Cyclomatic Complexity, Coverage 통합 자체 Plugin 개발 Selenium 활용한 UI Test 자동 http://helloworld.naver.com/helloworld/87523 http://helloworld.naver.com/helloworld/87523 http://www.slideshare.net/jscamp_kr/jscamp-hannam-qunit-test-automation-using-hudson-and-selenium http://www.slideshare.net/jscamp_kr/jscamp-hannam-qunit-test-automation-using-hudson-and-selenium Dashboard, JIRA 연동 중복코드 검사 기타 프로젝트별 Build 에 필요한 Hudson Plugin 개발

53 참고 http://wiki.hudson-ci.org/display/HUDSON/Plugins http://stephen.rees-carter.net/2011/05/jenkins-ci-jslint-javascript-quality-checking/ http://eriwen.com/tools/continuous-integration-for-javascript/ http://hudson-ci.org/download/plugins/ http://mirrors.jenkins-ci.org/ http://code.google.com/p/jslint4java/downloads http://meri-stuff.blogspot.kr/2012/01/javascript-testing-with-jstestdriver.html http://code.google.com/p/js-test-driver/wiki/ http://pseudobry.com/js-test-driver-qunit-coverage-requirejs/ https://github.com/youzee/tips-n-tricks/wiki/The-JavaScript-testing-stack http://www.python.org/getit/ https://wiki.jenkins-ci.org/display/JENKINS/NSIQ+Collector+Plugin http://pseudobry.com/js-test-driver-qunit-coverage-requirejs/ https://github.com/youzee/tips-n-tricks/wiki/The-JavaScript-testing-stack