프론트앤드 개발을 할 때 웹서버에 붙어서 작업을 하면 핀리하지만 웹서버 설정을 하는 건 꽤 귀찮은 일이다. 파일을 직접 브라우저에 던져서 로드하는 경우에는 로컬파일 경로로 동작하므로 css나 js같은 다른 정적파일을 로드하는 경로가 애매하게 된다. 그래서 나는 웬만하면 로컬에서 정적 웹서버를 띄어서 개발을 하는 편이다. Apache나 nginx를 서버를 쓸 수도 있지만, 개발용으로 쓰기에는 설정이 번거로우므로 개발할 때는 바로 띄울 수 있는 정적 웹서버가 편하다.
이럴 때 사용할 수 있는 정적 웹서버로는 python -m SimpleHTTPServer나 Locally나 harp.js등이 있고 나는 주로 harp.js를 사용한다. 이러한 도구는 현재 디렉터리를 기준으로 웹서버를 띄울 수 있는 편리한 도구이지만 팀 프로젝트를 할 때는 같은 개발환경이 설정되면 편리하다.
grunt-contrib-connect
Grunt를 사용한다면 connect에 기반을 둔 grunt-contrib-connect를 사용해서 간단한 설정만으로 웹서버를 띄울 수 있다. npm install --save-dev grunt-contrib-connect로 설치하고
...
connect: {
dev: {}
},
...
위처럼 설정하고 grunt connect를 실행하면
$ grunt connect
Running "connect:dev" (connect) task
Started connect web server on 127.0.0.1:8000.
특별한 옵션을 주지 않아도 기본 설정으로 현재 프로젝트에서 웹서버를 실행한다. 다만 이렇게 실행할 경우 서버가 실행되자마자 할 일이 없으므로 바로 종료되게 된다.(Grunt task가 종료된다.) 서버를 계속 실행해 두려면 keepalive 옵션을 주거나(아래 옵션 참고) grunt connect:target-name:keepalive와 같이 실행하면 서버가 죽지 않는다.
아니면 다음과 같이 grunt-contrib-watch를 같이 사용하면 서버를 실행된 채로 둘 수 있다.
...
connect: {
dev: {}
},
watch: {}
...
grunt connect watch
Running "connect:dev" (connect) task
Started connect web server on 127.0.0.1:8000.
Running "watch" task
Waiting...
옵션
port: 웹서버를 실행할 포트 번호. 기본값:8000protocol: 프로토콜. 기본값은'http'이고'https'도 가능hostname: 웹서버의 호스트명. 기본값0.0.0.0.base: 정적파일을 제공할 루트 경로로String이나Array로 지정할 수 있다. 기본값'.'directory: 웹 브라우저에서 파일 목록이 나오도록 할 디렉터리. 기본값nullkeepalive: 서버가 실행된 채로 유지한다.(앞에 얘기한 watch 대신 사용할 수 있다.)debug: 요청에 대한 로그를 출력한다. 기본값falselivereload: connect-livereload를 사용해서 페이지에 스크립트를 추가해서 브라우저에서 자동으로 리로드가 되게 한다.grunt-contrib-watch등과 조합해서 사용해야 한다. 기본값falseopen:true로 지정하면 서버 실행 시 기본브라우저로 페이지를 연다. 기본값false, url이나 객체로도 지정할 수 있다.useAvailablePort: 지정한port가 사용 중이면 다음 포트를 찾는다. 기본값falsemiddleware: connect의 미들웨어를 추가할 수 있다.
grunt-contrib-connect는 자체적으로 HTTPS도 지원하기 때문에 개발을 https로 해야 한다면 옵션에서 protocol만 https로 지정하면 된다. 인증서는 node_modules/grunt-contrib-connect/tasks/certs/안에 있으므로 별도의 설치는 안 해도 되지만 CA가 발급한 인증서는 아니므로 브라우저에서 허용을 해주거나 인증서 관련 설정을 해야 한다. 아니면 직접 인증서를 설정해서 사용할 수도 있다.
Comments