[구름 IDE에서 webpack-dev-server 실행 => live 하게 frontend demo 반영하기]

webpack-dev-server-live-on-goorm-ide.md

구름 IDE 에서 webpack-dev-server 실행하기

1. 구름 IDE 에서 node.js 템플릿으로 빈(empty) 프로트를 선택한다. (빈 프로젝트는 default 가 아니다.)
2. git clone <repo.git> 한다.
3. npm install 로 dependency 를 install 한다.
4. npm run dev-demo
5. 구름 IDE의 컨네이너별 '설정' => '네트워크 설정' 에서 webpack-dev-server 가 사용하는 내부 포트(8080) 를 포트포워딩한다.

나는 주로

  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "dev-demo": "cross-env NODE_ENV=development webpack-dev-server --hot --host 0.0.0.0",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  }, 

로 dev-demo 를 추가 설정해 사용한다. dev와의 주된 차이점은 --host 옵션이 0.0.0.0 이라서 외부의 어떤 ip 에서도 접근이 가능하다는 것과(필수), --open 옵션이 제외되어 자동으로 브라우저에서 열리는 동작이 생략된다는 것이다(옵션).