jenkins를 활용한 javascript 개발
DESCRIPTION
TRANSCRIPT
![Page 1: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/1.jpg)
Jenkinsfor Javascript Development Env.
![Page 3: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/3.jpg)
지속적인 통합 ?> 품질 , 안전성
![Page 4: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/4.jpg)
지속적인 통합 : continuous integration (CI)
1. Watch code2. Build Project3. Run Tests4. Publish Results
![Page 5: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/5.jpg)
첫째 .
CI? Jenkins?
![Page 6: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/6.jpg)
Jenkins vs. Hudson
Java.net 을 사용하던 Hudson 은 SUN 이 Oracle 에 인수된 이후 Oracle 의 ‘ Hudson’ 상표권 주장으로 Jenkins 으로 분리
![Page 7: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/7.jpg)
Jenkins vs. Hudson
비슷하다 ( 설정 , 플러그인 등 )
![Page 8: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/8.jpg)
Jenkins 의 실체
: jenkins.war + web server
![Page 9: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/9.jpg)
Jenkins 의 실체
![Page 10: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/10.jpg)
둘째 .
Jenkins 해보기
![Page 11: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/11.jpg)
오해CI 구축은 어렵다
Javascript 프로젝트의 CI 구축은 더 어렵다
CI 운영비용은 비싸다
CI 는 규모가 있는 프로젝트에서만 하는
것이다
![Page 12: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/12.jpg)
Today’s Goal?: Javascript CI 환경 만들기 Jenkins 와 함께 쉽게 !
![Page 13: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/13.jpg)
할 짓 요약
Jenkins 설치
소스 보관소 연동
코드가 좋은 코드인지 확인
코드가 잘 돌아가는 건지 확인
코드량이 얼마인지 확인
![Page 14: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/14.jpg)
Jenkins 설치
소스 보관소 연동 Github
코드가 좋은 코드인지 확인
JSLint
JSLint 결과 Jenkins 에서 시각화
코드가 잘 돌아가는 건지 확인
Testing framework : Qunit
테스트 자동화 : JsTestDriver
코드 커버리지 : jscoverage
테스트 결과를 jenkins 에서 시각화
Test 결과 (jUnit test result Plugin)
Coverage 결과 (cobertura Plugin)
코드량이 얼마인지 확인 N’Siq Plugin
![Page 15: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/15.jpg)
이런 젠장 ,
뭔가 복잡해 ..
다 .. 기억하지 않으셔도 되요 .
![Page 16: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/16.jpg)
Jenkins 설치
1.Download
![Page 17: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/17.jpg)
Jenkins 설치
2. install
![Page 18: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/18.jpg)
Jenkins 설치
3. Window service
![Page 19: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/19.jpg)
Jenkins 설치
4. Browser 확인
![Page 20: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/20.jpg)
Jenkins 설치
5. Jenkins Plugins 설치 방법
![Page 21: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/21.jpg)
Jenkins 설치
6. 새로운 프로젝트 생성 !
![Page 22: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/22.jpg)
Jenkins 설치
6. 새로운 프로젝트 생성 !
![Page 23: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/23.jpg)
Jenkins 설치
6. 새로운 프로젝트 생성 !
![Page 24: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/24.jpg)
Git 연동
1. Download github plugin
2. local 에 git 설치http://git-scm.com/downloads
3. Jenkins 설정 - git
![Page 25: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/25.jpg)
Git 연동project 에 설정하기
![Page 26: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/26.jpg)
Git 연동확인하기
![Page 27: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/27.jpg)
JSLint 연동
연동 방법 개요
1. JSLint 의 Java 버전을 다운로드
2. Jenkins 에 Ant 빌드 스크립트로 실행
3. Jenkins 에서 그래프로 보여주기 위해서 Violations Plugin
설치
4. Build
![Page 28: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/28.jpg)
JSLint 연동
1. Download JSLint4Java
2. Ant Build 파일 만들기
http://code.google.com/p/jslint4java/downloads
Jekins/workspace/{projectname}/build.xml
<target name="jslint" description="run the JSLint tool on JS files"> <fileset dir="." id="jsfiles.raw">
<include name="src/*.js" /> <exclude name="src/*.min.js" />
</fileset> <pathconvert pathsep=" " property="jsfiles.clean" refid="jsfiles.raw" /> <exec executable="java" output="build/jslint.xml">
<arg line="-jar ../../lib/jslint4java.jar --report xml ${jsfiles.clean}" /> </exec></target>
![Page 29: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/29.jpg)
JSLint 연동
3. project 설정에 추가하기
![Page 30: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/30.jpg)
JSLint 연동
4. 확인 (result.xml)
![Page 31: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/31.jpg)
JSLint 연동
5. Jenkins 그래프로 보기 – violations plugin 설치
6. Jenkins 그래프로 보기 – project 설정
![Page 32: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/32.jpg)
JSLint 연동
7. Jenkins 그래프로 보기 – 빌드 그리고 확인 (1)
70 개의 문제가 발견 됨을 표시하고 있음
![Page 33: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/33.jpg)
JSLint 연동
7. Jenkins 그래프로 보기 – 빌드 그리고 확인 (2)
파일별로 오류 내용을 확인 할 수 있음
![Page 34: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/34.jpg)
JsTestDriver 연동
연동 방법 개요
1. JsTestDriver.jar , JsTestDriver-Qunit adaptor, jscover-
age 다운로드
2. JsTestDriver.conf 설정
3. Ant 빌드 스크립트 작성
4. JsTestDriver Running
5. 테스트 결과를 그래프로 보기 위한 설정 (jUnit test result re-
port)
6. 커버리지 결과를 그래프로 보기 위한 설정 (cobertura Plugin
설치 )
7. Cobertura Plugin 에서 지원되는 xml 타입으로 coverage
결과를 변환
![Page 35: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/35.jpg)
JsTestDriver 연동
1. 다운로드 : JsTestDriver , JsTestDriver-Qunit adaptor, js-
coverageJsTestDriver.jar ,jscoverage.jarhttp://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 변경 메소드 반영 안됨 )
![Page 36: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/36.jpg)
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/ConfigurationFile
![Page 37: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/37.jpg)
Jenkins 설치 Git 연동 JSLint 연동 jsTestDriver 연동 LOC
JsTestDriver 연동
3. 잠깐 ! JsTestDriver 는 CI 와 별개로 별도로 달리고 있어야 함
C:\code\run\jenkins\workspace\jenkins-test> java -jar JsTestDriver.jar --port 4224
![Page 38: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/38.jpg)
JsTestDriver 연동
4. Ant Build 실행
C:\code\run\jenkins\workspace\jenkins-test> java -jar JsTestDriver.jar --port 4224
<target name="jstestdriver" depends="jslint" description="build jstestdriver">
<echo>build jstestdriver</echo>
<exec executable="java">
<arg line="-jar" />
<arg path="../../lib/jsTestDriver.jar" />
<arg value="--server"/>
<arg value="http://localhost:4224"/>
<arg value="--tests"/>
<arg value="all"/>
<arg value="--testOutput"/>
<arg value="./build"/>
<arg value="--reset"/>
</exec>
</target># jstestdriver command line flags : http://code.google.com/p/js-test-driver/wiki/CommandLineFlags
![Page 39: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/39.jpg)
JsTestDriver 연동
5. 지금까지 Ant Build <target name="jslint" description="run the JSLint tool on JS files">
<fileset dir="." id="jsfiles.raw">
<include name="src/*.js" />
<exclude name="src/*.min.js" />
</fileset>
<pathconvert pathsep=" " property="jsfiles.clean" refid="jsfiles.raw" />
<exec executable="java" output="build/jslint.xml">
<arg line="-jar ../../lib/jslint4java.jar --report xml ${jsfiles.clean}" />
</exec>
</target>
<target name="jstestdriver" depends="jslint" description="build jstestdriver">
<echo>build jstestdriver</echo>
<exec executable="java">
<arg line="-jar" />
<arg path="../../lib/jsTestDriver.jar" />
<arg value="--server"/>
<arg value="http://localhost:4224"/>
<arg value="--tests"/>
<arg value="all"/>
<arg value="--testOutput"/>
<arg value="./build"/>
<arg value="--reset"/>
</exec>
</target>
![Page 40: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/40.jpg)
JsTestDriver 연동
6. Build !
테스트 결과 : TEST-Chrome_210118083_Windows.DefaultaModule.xml테스트 커버리지 : jsTestDriver.conf-coverage.dat
![Page 41: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/41.jpg)
JsTestDriver 연동
7. 테스트 결과를 그래프로 보기 위한 projcet 설정 (jUnit test result
report)동작 방식 : ‘TEST-Chrome_210118083_Windows.DefaultaModule.xml’ 파일을 분석해서 결과를 보여줌 .
![Page 42: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/42.jpg)
JsTestDriver 연동
8. Build 후 확인
![Page 43: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/43.jpg)
JsTestDriver 연동
8. 커버리지 결과를 그래프로 보기 위한 설정 (cobertura Plugin 설치 )
9. Cobertura Plugin 에서 지원되는 xml 타입으로 coverage 결과를
변환jsTestDriver.conf-coverage.dat 파일을 Cobertura 지원 xml 타입으로 변환하기 위해 python 오픈소스 script 를 활용
• 먼저 Local 에 Python 설치 : http://www.python.org/getit/• Cobertura 변환 Python script 다운로드 : https://github.com/eriwen/lcov-to-cobertura-xml• 실행 : Jenkins Python Plugin 을 통해서 script 를 실행 할 수 있지만 , 윈도우에서 Python 실행 PATH 를
인식하지 못하는 문제 발견 . 대안으로 Ant build 로 실행하고 exeutable 에 절대경로를 입력 < 다음장에서 Ant build 설정 >
![Page 44: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/44.jpg)
JsTestDriver 연동
9. Cobertura Plugin 에서 지원되는 xml 타입으로 coverage 결과를
변환
<target name="start" depends="jstestdriver" description="build python script">
<echo>build python for making cobertura xml</echo>
<exec executable="C:\Python27\python.exe" failonerror="true">
<arg value="lib_etc/lcov-to-cobertura-xml.py" />
<arg value="build/jsTestDriver.conf-coverage.dat" />
<arg value="-o"/>
<arg value="build/coverage.xml"/>
</exec>
</target>
Ant build 에 python script 실행 추가
![Page 45: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/45.jpg)
JsTestDriver 연동
10. Project 설정에 corbetura 추가
![Page 46: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/46.jpg)
JsTestDriver 연동
1. Build 후 coverage 결과 확인
![Page 47: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/47.jpg)
LOC 연동
1. LOC(Line of Code)NHN Opensource 활용 : https://wiki.jenkins-ci.org/display/JENKINS/NSIQ+Collector+Plugin복잡도 ,LOC 를 계산해주지만 LOC 만을 활용
2. project 설정
![Page 48: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/48.jpg)
LOC 연동
3. Build 후 확인
![Page 49: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/49.jpg)
Complete!
![Page 50: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/50.jpg)
![Page 51: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/51.jpg)
좀 더 해야 할 것Jstestdriver test code 에서 외부 라이브러리를 사용하는 경우 에러가 발생 . Js 파일을 로딩하는데 문제가 있음 (re-
quire.js 와 같은 것으로 동적로딩 필요 )
복잡도 , 중복코드 검사Cyclomatic complexity 나 중복코드 검사 Plugin 연동 Reporting
Other TestingSelenium, WebDriver, or PhantomJS
Mobile 환경 테스트
Other CI (Travis CI)Github 와 찰떡 궁합으로 경량화된 CIhttp://blog.outsider.ne.kr/779http://tech.qmetric.co.uk/automating-javascript-ci-with-buster-js-and-travisci_205.html
![Page 52: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/52.jpg)
Appendix. Inside NHN 품질관리
Hudson 기반의 Quality Practice 활동http://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://www.slideshare.net/jscamp_kr/jscamp-hannam-qunit-test-automation-using-hudson-and-selenium
Dashboard, JIRA 연동
중복코드 검사
기타 프로젝트별 Build 에 필요한 Hudson Plugin 개발
![Page 53: Jenkins를 활용한 javascript 개발](https://reader031.vdocuments.mx/reader031/viewer/2022012400/547976acb4af9fef128b4634/html5/thumbnails/53.jpg)
참고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.ht
ml
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-stac
k