Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

node.js로 만든 로컬 웹서버 미들웨어 Locally

node.js로 웹사이트를 만드는 재미도 있지만 서버나 PC에서 동작하는 간단한 유틸리티성 프로그램을 작성할 수 있다는 장점이 있습니다. 저 같은 경우에도 서버스크립팅을 못하기 때문에 그동안 서버에서 작성할 수 있는 스크립트성 언어를 배우고자 하는 마음이 많이 있었는데 node.js로 완전히 해결되었습니다.

LocallyRhio님이 만드신 모듈로 로컬에서 간단하게 로컬 디렉토리를 기반으로 웹서버를 실행할 수 있는 미들웨어입니다. 서버사이드 개발자들은 대부분 서버환경을 구축하고 개발하기 때문에 이런 미들웨어가 필요하지 않지만 프론트앤드 개발자의 경우에는 작성한 HTML이나 JS를 테스트해보기 위해서는 웹서버환경을 구축해야 합니다. 서버쪽에도 지식이 풍부하다면 어려움이 없겠지만 그렇지 않다면 이러한 환경을 구축하는데 어려움이 많이 있습니다.

실제로 제 주위에도 회사의 마크업을 담당하는 사람들한테 웹서버환경을 구축하느라고 고생하는 사람들을 종종 봐왔습니다. 구축도 구축이지만 서버환경을 잘 모르는 사람들도 쉽게 원하는 소스를 바탕으로 웹서버를 실행할 수 있도록 해주어야 하기 때문에 어려움이 많이 있는데 Locally는 이러한 문제를 한방에 해결해 줄 모듈입니다. node.js가 이제 윈도우에서도 사용가능하고 Locally를 설치하면 간단하게 간단한 명령어로 사용할 수 있기 때문에 프론트앤드 개발자에게는 아주 유용합니다.

PC에 node.js와 npm이 설치되어 있으면 다음과 같은 명령어로 Locally를 설치할 수 있습니다. Locally는 node.js 0.6.9이상이어야 사용할 수 있습니다.(테스트는 안해봤지만 0.6.x에서는 다 동작할것 같은데 Rhio님이 기준 버전을 낮춰줘도 좋을 것 같네요.)

npm install -g locally

이제 웹서버로 확인할 파일이 있는 곳에서 간단하게 locally라는 명령어를 입력합니다.

Locally를 실행하는 화면

위 화면처럼 웹서버가 8080포트로 실행된 것을 볼 수 있고 아무런 파라미터를 지정하지 않았기 때문에 웹서버의 루트가 현재 디렉토리로 지정된 것을 확인할 수 있습니다. 이제 http://localhost:8080으로 접속하면 다음처럼 웹서버가 동작하는 것을 볼 수 있습니다.

Locally로 실행된 웹서버에 접속한 화면

이 페이지는 openwebdesign에서 다운받은 html페이지입니다. 웹서버가 없다면 시스템의 상대경로로 입력해야 파일을 찾아오기 때문에 서버에서는 바꾸어주어야 하지만 웹서버로 실행했기 때문에 간단하게 실제 웹서버처럼 실행해서 테스트해 볼 수 있습니다.

Locally의 가이드에도 잘 나와있지만 다양한 명령어를 사용해서 여러가지 환경으로 사용할 수 있습니다.

  • locally -p 포트번호 : 지정한 포트번호로 웹서버를 실행합니다.
  • locally -s 디렉토리경로 : 정적파일이 있는 디렉토리를 지정합니다.(보통 js, css, img등을 의미합니다.)
  • locally -p 디렉토리경로 : 퍼블릭파일이 있는 디렉토리를 지정합니다.(보통 html을 말합니다.)
  • locally -n 가상호스트 : 가상호스트명을 지정합니다. 예를 들어 outsider라고 지정하면 http://outsider:8080의 접속을 받아들입니다.(물론 hosts는 지정해 줘야 겠지요.)
  • locally -d : 디버깅모드로 실행합니다.(소스를 보면 connect 미들웨어의 로깅을 키도록 되어 있는데 어떤 내용이 출력되는지는 잘 모르겠네요.)

물론 이 명령어는 섞어서 사용가능합니다. 대부분 이러한 명령어를 매번 하기가 귀찮다면 locally -f 설정파일처럼 설정파일을 지정하면 설정파일에 써놓은 옵션을 사용해서 웹서버를 구동합니다. 설정파일은 프로젝트마다 설정파일을 하나씩 구성해두고 실행하면 편할듯 합니다. 로컬에서 웹서버를 사용해야 하는 경우에 필요한 기능은 대부분이미 포함된듯 합니다. README에 적힌 내용을 다시한번 적는 것 같아서 블로그에 올리기도 약간 머하지만 처음 봤을때 참 좋은 아이디어의 모듈이라고 생각해서요 ㅎ 더 자세한 내용은 Locally의 가이드를 참고하세요.
2012/03/21 03:04 2012/03/21 03:04