[Node.js] node-inspector 디버깅 환경 세팅

node.js에서 강력한 디버깅 기능을 제공하는 node-inspector의 설치와 사용법을 간단히 정리합니다.

설치 방법은 쉽게 검색을 통해 자료를 얻을 수 있었는데 그 외 내용들이 없어 애를 좀 먹었습니다.

 

1. node-inspector 설치

 

2. 포트 열어주기(iptables)

우선 정상적으로 node-inspector를 구동하려면 특정 포트가 오픈되어 있어야 합니다.
– node-inspector가 사용할 포트 : (저는 3001로 가정하겠습니다.)
– node 디버거 포트 : 5858 (기본값)
* 포트를 오픈하는 방법은 iptables 사용법 포스트를 참고하세요.

 

3. node-inspector 실행하기

실행하면 “Visit http://127.0.0.1:3100/debug?ws=127.0.0.1:3001&port=5858 to start debugging.” 이라는 메세지가 출력됩니다. 말 그대로 저 URL로 접속을 하면 되는데 만약 원격 서버라서 127.0.0.1로의 접속이 불가능 한 경우 http://<서버 아이피 또는 도메인>:3100/debug?ws=127.0.0.1:3001&port=5858 으로 접속이 가능합니다.

 

4. node 디버깅 활성화 하기

node.js 프로젝트가 있는 디렉토리에서 아래 명령을 실행해 줍니다.

그럼 “Debugger listening on port 5858” 메세지가 출력됩니다.

package.json을 이용하는 방법도 있습니다.

package.json에 정의해놓고 관리를 하는 것도 좋은 방법입니다. debug 모드의 실행은

위와 같이 할 수 있습니다.

 

5. node 프로젝트 실행

그리고 웹페이지에 접근하기 위해서는 node 프로젝트도 실행해야 합니다.

3, 4, 5번은 모두 백그라운드에서 실행되는 것이 아니기 때문에 원격 서버인 경우 각각 하나의 쉘을 열어 실행시켜야 합니다. 그게 귀찮으시다면 명령 뒤에 &을 붙여 백그라운드로 실행되도록 하셔도 됩니다.

[Ubuntu] node.js 설치 방법

개발 환경으로 우분투 14.x 버전을 설치하고 node.js를 설치해봤습니다. CentOS와는 조금 다른 방법이기에 포스팅합니다.

1. 저장소 업데이트

 

2. 필요한 모듈 설치

 

3. nvm 다운로드

https://github.com/creationix/nvm 에 접속하여 install script를 복사하여 쉘에 wget이나 curl를 실행합니다.

 

4. node.js 설치

https://nodejs.org/ 접속하여 Current version 즉, Stable 버전을 확인하여 해당 버전을 nvm 을 통해 설치합니다. (포스팅 시점에서의 Current Version은 v0.12.3)

* nvm 다운로드 후 바로 쓸 수는 없고 현재 터미널을 종료 후 다시 새 터미널을 실행해야 합니다.

 

5. 설치 버전 활성 및 확인

nvm은 node.js를 여러 버전으로 설치가능합니다. 그렇기 때문에 많은 설치 버전 중 사용하고자 하는 버전을 선택해주셔야 합니다.

설치된 node.js와 버전확인은 아래와 같이 할 수 있습니다.

 

6. expressjs 설치

express를 전역에서 사용하려면 -g 옵션을 넣어줍니다.

 

7. express 심볼릭링크 생성

심볼릭 링크를 아래와 같이 생성하면 계정 루트(~/)에 node_modules 라는 디렉토리가 생성됩니다.

 

이후 express 프로젝트를 생성하는 방법은 이전에 포스팅된 CentOS에서 node.js 설치 편에서 express 설정 부분과 동일하니 참고바랍니다.

[node.js] bower 설치 시 원하는 디렉토리로 지정하는 방법

node.js로 개발하는 중 jquery가 필요해서 찾아보니 알게 되었습니다.

bower란 node.js에서 사용되는 프론트엔드 의존성 관리 도구 입니다. 자바에서의 maven과 흡사하다고 보시면 됩니다. 하지만 maven과는 다르게 jquery나 bootstrap 같은 프론트엔드 컴포넌트들을 다룹니다.

jquery를 다운 받아 html 코드에 경로를 일일히 입력해도 상관은 없습니다만 자동화를 시켜보자 하는 분에게는 편리한 도구 입니다.

bower는 많은 프론트엔드 컴포넌트를 사용하는 프로젝트일 수록 장점이 부각됩니다. 반대로 저처럼 jquery 정도만 사용하는 경우에는 배보다 배꼽이 더 큰 느낌을 받을 수 있습니다.

 

bower는 npm을 통해 설치가 가능합니다.

기본적으로 설치가 되면 /bower-components 라는 디렉토리가 생성됩니다.

그리고 bower를 이용해 jquery와 bootstrap을 설치해보겠습니다.

설치가 완료되면 /bower-components/jquery와 /bower-components/bootstrap 이 각각 생성되며 dist라는 디렉토리에 각 해당 파일이 담겨있습니다.

그런데 저의 경우 문제가 하나 있었습니다. 설치하면서 계정의 루트디렉토리에 bower-components 디렉토리가 생성되면서 express의 views 내 파일(템플릿)에서 참조할 수가 없는 것입니다.

참고로 express의 views 에서 루트(/)는 /public 입니다. 그렇다면 bower-components 디렉토리를 /public 하위에 위치시켜야 합니다. 원하는 위치에 원하는 이름(bower-components가 아닌)으로 설치하고자 하는 경우에는 아래와 같은 과정을 거쳐야 합니다.

 

1. 현재 계정 루트(~/)에 .bowerrc 생성 후 아래 내용을 입력해주고 저장합니다. 

(큰따옴표 대신 작은 따옴표를 사용하면 에러가 나니 참고하세요.)

다른 툴의 닷파일처럼 json 형식으로 작성되며 directory 말고도 많은 옵션을 지원합니다.
(http://bower.io/docs/config/)
이 파일이 있는 경우 우선적으로 반영되며 없는 경우 기본 설정으로 설치가 됩니다.

2. 만약 bower가 설치되어있다면 삭제하고 설치된 기존 디렉토리가 있다면 역시 삭제합니다.

3. 다시 설치합니다.

4. 원하는 위치에 설치가 되었는지 확인합니다.

 

이후 views 파일에서 /bower/jquery/dist/jquery.js 와 같은 경로로 접근하시면 됩니다.