모바일에서 Webpack-dev-server에 접근하지 못하는 문제

■ 상황

Webpack-dev-server에서 돌리는 로컬 서버에 모바일 기기로 접근할 수 있다고 해서,

나도 시도를 해봤는데 접속이 되지 않았다.

참고로 Windows 10을 사용하고 있는 상황.

 

■ 상세

현재 사용중인 Wi-fi의 속성 탭으로 들어가서 네트워크 프로필을 개인으로 설정해주면 된다.

내 경우에는 네트워크 프로필이 공용으로 설정되어 있었기 때문에(왜 그랬지?) 안되고 있었던 것.

■ 비고

모바일 반응형 UI를 구현할 때 맨날 개발자 도구에서 확인하기만 했는데,

실제로 모바일로 접속해야 알 수 있는 문제들이 제법 있더라.

그래서 모바일에서 프로젝트를 구동해야 할 필요성을 느꼈고,

마침 모바일에서 webpack-dev-server에 접근할 수 있다는 얘기를 듣고 시도해보았다.

 

webpack.config.js에 host를 '0.0.0.0'으로 설정해준 후에

devServer: {
    hot: true,
    host: '0.0.0.0',
    port: 3000,
},

모바일 주소창에다가 'http://{IPv4 주소}:{포트번호}' 로 접속해주면 된다.

참고로 ip는 공용 ip가 아니고 ipconfig에 나오는 IPv4 주소로 들어가는 것.

맥은 잘 모르겠는데 윈도우는 안되는 경우에 요렇게 해주면 되는듯.

 

참고: https://stackoverflow.com/questions/45760350/how-to-make-react-app-preview-on-mobile/63758698