webpack 2 - dev-server를 원격서버에서 접속

증상

AWS EC2 AMI를 통해서 webpack을 구축하여 webpack으로 devserver실행 시켜 local(내컴)에서 원격(ec2)으로 브라우저에서 http 접속하였지만 접속되지 않았다. ec2 포트 오픈도 문제없이 설정했지만 그러했다.

EC2 AMI에서 포트가 제대로 실행되고 있는지 확인해보니 실행되고 있었다. 하지만 127.0.0.1로 실행되고 있는 것을 확인하고 0.0.0.0으로 host를 설정하고 접속. 접속은 되었지만 다음과 같은 메시지를 뱉었다.

Invalid Host header

아마 개발 보안상 local이외의 host에서 접속할 경우 접속하지 못하도록 한것 같다.

참고1 참고2

해결책은 disableHostCheck: true

webpack.config.js

var config = {
  :
  devServer: {
    contentBase: path.resolve(__dirname, './src'),
    disableHostCheck: true,
    host: "0.0.0.0" // default : 127.0.0.1
  }
  :

module.exports = config;