BETA

web-dev-serverを、localhostではなく、IPに設定する方法

投稿日:2018-10-25
最終更新:2018-10-25

webpack4に移行したので、
BrowserSync から web-dev-server へ乗り換えました。

BrowserSyncとは違い、IPで起動するのがちょっとややこしかったので、メモ。

internal-ip を追加

yarn add internal-ip -D

https://www.npmjs.com/package/internal-ip


webpack.config.babel.jpdevServerhost を下記の設定に

const internalIp = require('internal-ip')

module.exports = {
  //...
  devServer: {
    host: internalIp.v4.sync()
  }
}

これで無事にIPで起動し、スマホからも見れるようになりました。

NG例


例1) useLocalIp:true

module.exports = {
  //...
  devServer: {
    useLocalIp: true
  }
}

https://webpack.js.org/configuration/dev-server/#devserver-uselocalip
web-dev-serverのオプションでuseLocalIpをtrueにしても、
IPで起動はするが、「このサイトにアクセスできません。」になりNG。

例2) hostを直接指定

module.exports = {
  //...
  devServer: {
    host: 192.168.x.x
  }
}

これは起動はするが、ネットの環境により書き換えが必要なのでNG。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@kYyInSm9EfIGV8bxの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!