블로그 이미지
윤영식
Frontend Application Architecter, Full Stacker, KnowHow Dispenser and Bike Rider

Publication

Statistics Graph

Recent Comment

2013.08.14 14:32 NodeJS/Modules

Node.js 프로젝트에서 사용된 자신의 모듈을 공유하고 싶다면 NPM Regsitry를 이용하면 된다. Publis Registry에 등록하고 사용하는 방법에 대해 알아보자 



1. NPM Registry

  - NPM Registry는 누구나 Node.js에서 사용할 수 있는 모듈을 일정한 양식만 갖춘다면 등록할 수 있고,  

    npm 명령을 통하여 Module Registry 에서 필요한 모듈을 설치할 수 있다

  - 홈페이지 : https://npmjs.org/

  - 홈페이지에서 계정을 미리 생성해 놓자 : 자신이 등록한 모듈 목록을 볼 수 있다

    




2. 배포전 준비하기 

  - .npmignore 파일 : npm 저장소에 배포하지 않을 것들에 대해 열거한다. 해당 파일이 없을 경우 .gitignore를 사용한다 

// .gitignore 내역 

.DS_Store

.git*

node_modules/

  - 모듈이 이미 GitHub에 등록되고 npm init을 통하여 package.json 파일 내역이 정확히 장성되었음을 가정한다 (참조)

// package.json 내역 

// 주의)

// npm init으로 해당 파일 생성시 engines 내역은 포함되지 않는 관계로 사용하는 Node.js 버전을 명시하여 준다 

// name : 값은 대문자와 띄워쓰기 없이 소문자로 이어서 작성한다 

// version : semantic versioning을 사용한다 major.minor.patch

// main : 프로그램 진입점

// test : 테스트 프로그램 수행 스크립트 명령 (npm test)

{

  "name": "mobiconstatistics",

  "version": "0.0.1",

  "description": "include statistics function such as the moving average",

  "main": "./lib/mobiconStatistics.js",

  "engines": { "node": ">= 0.10.0" }, 

  "dependencies": {

    "underscore": "~1.5.1"

  },

  "devDependencies": { 

    "mocha": "latest",

    "should": "~1.2.2"

  },

  "scripts": {

    "test": "mocha test/*.js"

  },

  "repository": {

    "type": "git",

    "url": "https://github.com/ysyun/mobiconStatistics.git"

  },

  "keywords": [

    "mobicon",

    "statistics",

    "movingAverage"

  ],

  "author": "yun youngsik",

  "license": "MIT",

  "bugs": {

    "url": "https://github.com/ysyun/mobiconStatistics/issues"

  }

}




3. 배포하기 

  - https://www.npmjs.org/ 사이트에 가입을 한다.

  - 모듈 디렉토리로 이동하고 사용자를 추가합니다 : npm adduser 

  - 가입했던 username과 password등을 입력하면 된다.

Users/development/node-modules/mobiconStatistics> npm adduser

Username: (ysyun)

Password: 

Email: 

  - 모듈 배포전 npm install이 잘 되는지 테스트 합니다 

    test 폴더를 하나 만들어서 기존에 만든 모듈을 install 해봅니다. test 폴더에 node_modules/mobiconstatistics 모듈을 설치되면 성공!

/Users/development/node-modules/mobiconStatistics> mkdir ../mobiconStatistics-installTest

/Users/development/node-modules/mobiconStatistics> cd ../mobiconStatistics-installTest

/Users/development/node-modules/mobiconStatistics-installTest> npm install ../mobiconStatistics

npm http GET https://registry.npmjs.org/underscore

npm http 304 https://registry.npmjs.org/underscore

mobiconstatistics@0.0.1 node_modules/mobiconstatistics

└── underscore@1.5.1


/Users//development/node-modules/mobiconStatistics-installTest/node_modules/mobiconstatistics> ls

-rw-r--r--  1   staff  1096  8 13 17:09 LICENSE

drwxr-xr-x  3   staff   102  8 13 17:31 test

drwxr-xr-x  3   staff   102  8 13 17:41 lib

-rw-r--r--  1   staff    49  8 14 11:26 .travis.yml

-rw-r--r--  1   staff   904  8 14 11:34 README.md

-rw-r--r--  1   staff  1881  8 14 14:19 package.json

drwxr-xr-x  3   staff   102  8 14 14:19 node_modules

  - 모듈을 배포합니다 : npm publish

Users//development/node-modules/mobiconStatistics> npm publish                          

npm http PUT https://registry.npmjs.org/mobiconstatistics

npm http 201 https://registry.npmjs.org/mobiconstatistics

npm http GET https://registry.npmjs.org/mobiconstatistics

npm http 200 https://registry.npmjs.org/mobiconstatistics

npm http PUT https://registry.npmjs.org/mobiconstatistics/-/mobiconstatistics-0.0.1.tgz/-rev/1-b8e34dc09489f8c4c9ece305d250264a

npm http 201 https://registry.npmjs.org/mobiconstatistics/-/mobiconstatistics-0.0.1.tgz/-rev/1-b8e34dc09489f8c4c9ece305d250264a

npm http PUT https://registry.npmjs.org/mobiconstatistics/0.0.1/-tag/latest

npm http 201 https://registry.npmjs.org/mobiconstatistics/0.0.1/-tag/latest

+ mobiconstatistics@0.0.1

  - 모듈이 잘 배포되었는지 확인합니다 : http://npmjs.org/package/<모듈명>

    예) https://npmjs.org/package/mobiconstatistics

    




4. 모듈 사용하기 

  - 이제 npm registry로 자신의 모듈이 배포되었으므로 프로젝트에 첨부하여 사용할 수 있게 되었습니다. 

// mobiconstatistics 모듈 추가하기 

/Users/development/smart-solutions/SmartStatistics> npm install mobiconstatistics --save

npm http GET https://registry.npmjs.org/mobiconstatistics

npm http 200 https://registry.npmjs.org/mobiconstatistics

mobiconstatistics@0.0.1 node_modules/mobiconstatistics


// 프로젝트의 package.json에 mobiconstatistics 모듈 추가

/Users/development/smart-solutions/SmartStatistics> cat package.json

{

  "name": "smartstatistics",

  "version": "0.0.0",

  "dependencies": {

    "sails": "0.8.9",

    "express": "~3.2.6",

    "ejs": "~0.8.4",

    "underscore": "~1.5.1",

    "mobiconstatistics": "0.0.1"

  },

  - 트위터에서 npm registry에 배포된 모듈중 괜찮은 것들을 정리하여 트윗을 해준다 : @nodenpm

    



<참조>

  - Node.js 소개 in opentutorial

  - npm 이란? 

  - Node Module NPM Registry 등록하기

  - npm developer 가이드

저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
2013.08.14 09:16 CI/Jenkins, Travis

로컬 프로그램을 GitHub에 push하고 테스트 프로그램을 작성하였다면 이제 자동화 통합 빌드 툴인 Travis와 연동하고, 빌드의 결과를 GitHub에 표시하는 방법에 대해서 알아본다 



1. 사전 준비사항

  - 소스의 root에 .travis.yml 파일을 생성하고 환경값을 작성한다 

  - Node.js에 대하여 환경값을 작성해 본다 

// .travis.yml 내역 

language: node_js

node_js:

  - "0.11"

  - "0.10"

  - "0.8"

  - GitHub에 설정된 모습 : GitHub .travis.yml 참조

    

  - Travis의 default test 명령은 "npm test" 이므로 package.json파일안에 test 명령 script를 작성한다

    (package.json은 "npm init" 명령으로 만든다)

// package.json 내역 

{

  "name": "mobiconStatistics",

  "version": "0.0.1",

  "description": "include statistics function such as the moving average",

  "main": "./lib/mobiconStatistics.js",

  "dependencies": {

    "underscore": "~1.5.1"

  },

  "devDependencies": { 

    "mocha": "latest",

    "should": "~1.2.2"

  },

  "scripts": {

    "test": "mocha test/*.js"

  },

  "repository": {

    "type": "git",

    "url": "https://github.com/ysyun/mobiconStatistics.git"

  },

  "keywords": [

    "mobicon",

    "statistics",

    "movingAverage"

  ],

  "author": "yun youngsik",

  "license": "MIT",

  "bugs": {

    "url": "https://github.com/ysyun/mobiconStatistics/issues"

  }

}



2. GitHub 저장소 환경 설정

  - 저장소에 .travis.yml 파일이 존재한다면 이제 해당 저장소를 접근하기 위한 환경을 설정한다 

  - GitHub의 저장소의 우측 밑에 보면 설정 아이콘을 클릭한다 

    

  - 다음 화면 좌측 메뉴에서 "Service Hooks"을 선택한다 

    

  - Service Hooks 화면밑으로 내려오면 "Travis"가 존재하고 선택한다

    

  - Travis를 선택하면 우측으로 입력과 선택 폼이 나오는데 "Active"를 체크하고 "Update Settings"를 클릭한다 

    

  - GitHub에서의 설정작업은 이제 끝났다. Travis 설정 참조 문구 내역

Travis CI is a distributed build platform for the open source community.

By enabling this hook, Travis CI will listen to push and pull request events to trigger new builds, member and public events to keep track of repository visibility and issue comment events to allow users to talk to @travisbot.

Install Notes

We recommend using the Travis profile page at http://travis-ci.org/profile to manage your hooks.

  1. Create an account at http://travis-ci.org (you can sign in with GitHub)
  2. Enter your credentials
    • The token which you can find on the Travis profile page
    • optional: Enter the username who the Travis token belongs to (defaults to the repository owner)
    • optional: Enter the host of your Travis installation (defaults tohttp://notify.travis-ci.org), the protocol-prefix is optional and defaults to "http://".
  3. Make sure the "Active" checkbox is ticked, and click "Update Settings".
  4. Click on the "Travis" service name and then click the "Test Hook" link.
  5. You should receive an email from Travis once the build has completed

For more details about Travis, go to http://about.travis-ci.org/docs/



3. Travis CI 환경 설정 

  - https://travis-ci.org/ 로 와서 자신의 GitHub 계정으로 로그인을 한다 

  - https://travis-ci.org/profile 로 들어오면 자신의 계정에 Create, Fork한 저장소 목록을 볼 수 있다 

    

 - 저장소 목록의 우측을 보면 "ON/OFF" 스위치가 있다. Travis CI를 원하는 저장소를 "ON" 시킨다 

    

 - https://travis-ci.org/ 로 다시 들어가면 자신의 계정에 대해 설정해 놓은 저장소의 빌드 결과가 출력된다

    

  - Travis CI 설정작업이 끝났다. 이제 GitHub 저장소로 변경내역을 Push할 때 마다 .travis.yml에 설정한 Node.js 버전별로 자동으로 빌드가 이루어진다

  - Travis CI에서 빌드 진행 내역을 확인하는 방법 : "Build Matrix" -> Job 선택

    "npm test" 가 수행되어 테스트 코드가 정상수행된 것을 볼 수 있다 

    




4. GitHub 저장소에 Travis 빌드 아이콘 설정

  - GitHub 저장소에 자신의 변경내역을 push하고 Travis의 빌드 결과(성공/실패)를 아이콘으로 표현해 보자 

  - https://travis-ci.org/ 에서 저장소를 선택하면 우측 결과 화면 위쪽에 톱니바퀴 설정 아이콘이 나온다. "Status Images"를 선택한다

    

  - "Status Images"를 선택하고 Markdown의 내역을 복사한다 

   

  - Markdown 복사 내역은 GitHub 저장소의 README.md 파일에 넣기 위함이다. GitHub 저장소로 이동하여 README.md파일을 Edit 하고 commit 한다 

    

  - 최종 화면이 다음과 같이 나오면 성공! 다음부터 저장소에 push한 애플리케이션의 Test코드가 실패하면 빨간 아이콘이 나올 것이다  

    

 

 

<참조>

  - Travis Build Configuration & CI Environment

  - Travis Node.js Configuration

  - Mobicon Statistics in Travis : 이동평균을 구하는 모듈을 만들어 보았다. 테스트는 Mocha + should.js 기반

저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
prev 1 next