https 가능한 간편 웹서버 local-web-server

local-web-server 역시 live-server와 같이 html, js등이 서버에 올라갔을때의 결과를 확인할 수 있는 간편한 웹서버이다.
좋은 점은 실행 옵션을 통해 https를 사용할 수 있다는 것이다.

local-web-server 설치

• 프로젝트 root 폴더에서 npm을 사용하여 설치한다.
  $ npm install -g local-web-server

local-web-server 실행

• 프로젝트 root 폴더에서 다음 명령을 이용하여 실행한다.
  $ ws
• https 로 실행하기 위해서는 추가 옵션을 준다.
  $ ws --https

local-web-server를 실행하면 다음과 같이 접속 url이 표시된다.

간편 웹서버 live-server 사용법

html, javascript 등을 이용한 개발을 하다 보면 서버에 올라갔을때 결과를 보고 싶은 경우가 있다.
이때 간단하게 사용할 수 있는 웹서버들이 있다.
live-server도 그중 하나이다.
live-server의 설치 및 사용법을 확인해보자.

live-server 설치

• live-server는 npm을 이용해 간단하게 설치할 수 있다. 프로젝트 root 폴더에서 다음 명령을 실행한다.
  $npm install -g live-server
  *다른 프로젝트에서도 사용할 수 있도록 -g 옵션을 주어 global로 설치한다.

live-server 실행

• 프로젝트 root 폴더에서 다음 명령을 실행한다.
  $live-server
• 서버가 실행되며 기본 설정 브라우저가 오픈된다.
  * 브라우저 주소창에는 다음과 같이 표시된다.
  http://127.0.0.1:8080/

SASS 컴파일러 설치 및 자동 컴파일 설정

프로젝트 초기화

• 프로젝트 root 폴더에서 다음 명령을 실행한다.
  $npm init
  * root 폴더에 package.json 파일이 생성된다.

• 폴더구조는 다음과 같다. (폴더에 있는 파일명)
  root (index.html)
   - css (style.css)
   - sass (main.scss)

SASS 컴파일러 설치

• node-sass 설치를 위해 다음 명령을 실행한다.
  $npm i node-sass --save-dev
  * sass 컴파일러는 개발시에만 필요하므로 --save-dev 옵션을 추가한다.

SASS 컴파일러 실행

• package.json 파일의 "scripts" 항목에 다음 내용을 추가한다.
  {
     "compile:sass": "node-sass sass/main.scss css/style.css"
  }
• root 폴더에서 다음 명령을 실행한다.
  $npm run compile:sass
  * 컴파일되어 style.css 파일로 저장된다.

SASS 컴파일러 자동 실행

• package.json 파일의 "scripts" 항목에 다음 내용을 추가한다.
  {
     "compile:sass": "node-sass sass/main.scss css/style.css -w"
  }
• root 폴더에서 다음 명령을 실행한다.
  $npm run compile:sass
  *대기 상태로 되며, 파일이 변경되면 자동으로 컴파일된다.