webpack-dev-serverを利用時にnpm run dev 外部IP(プライベートIP)の利用手順

webpack-dev-serverを利用時にnpm run dev 外部IP(プライベートIP)の利用手順

webpack-dev-serverを利用時に、npm run devを実行すると config内にあるindex.jsがlocalhostになっているので、localhostからしかアクセスできないので、外部IP(プライベートIP)から確認できるようにする手順

環境

  • OS  ubuntu19.10
  • node v12.13.0
  • npm 6.12.1

※ubuntu19.10にnodeのインストールはこちら

設定

config内にあるindex.jsの下記の箇所を変更する

host: 'localhost', // can be overwritten by process.env.HOST

のlocalhostを’プライベートIP’に変更する

host: 'プライベートIP', // can be overwritten by process.env.HOST

保存して、再度 npm run devを実行すれば外部IPからアクセスできます

DONE  Compiled successfully in 2069ms                                                                                                      13:26:47

 I  Your application is running here: http://プライベートIP:8080

参考 : 今回のpackage.json “scripts”は下記となってます

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },