ローカルネットワークのデバイスからwebpack-dev-serverにアクセスする方法

いくつかのwebpack開発サーバーの構成があります（構成全体の一部です）。

config.devServer = {
  contentBase: './' + (options.publicFolder ? options.publicFolder : 'public'),
  stats: {
    modules: false,
    cached: false,
    colors: true,
    chunk: false
  },
  proxy: [{
    path: /^\/api\/(.*)/,
    target: options.proxyApiTarget,
    rewrite: rewriteUrl('/$1'),
    changeOrigin: true
  }]
};

function rewriteUrl(replacePath) {
  return function (req, opt) {  // gets called with request and proxy object
    var queryIndex = req.url.indexOf('?');
    var query = queryIndex >= 0 ? req.url.substr(queryIndex) : "";
    req.url = req.path.replace(opt.path, replacePath) + query;
    console.log("rewriting ", req.originalUrl, req.url);
  };
}

次のコマンドでwebpackを実行します。

node node_modules/webpack-dev-server/bin/webpack-dev-server.js --host 0.0.0.0 --history-api-fallback --debug --inline --progress --config config/webpack.app.dev.js

私はhttp://localhost:8080ローカルマシンでを使用して開発サーバーにアクセスできますが、モバイル、タブレット（同じWi-Fiネットワーク内にあります）からもサーバーにアクセスしたいと思っています。

どうすれば有効にできますか？ありがとう！

（Macと私のようなネットワークを使用している場合。）

webpack-dev-server withを実行します--host 0.0.0.0—これにより、サーバーはlocalhostだけでなく、ネットワークからのリクエストをリッスンできます。

ネットワーク上のコンピュータのアドレスを見つけます。ターミナルでifconfig、en1セクションまたは次のようなものを入力して探しますinet 192.168.1.111

同じネットワーク上のモバイルデバイスで、http://192.168.1.111:8080ホットリロード開発至福にアクセスしてお楽しみください。

あなたはあなたのIPアドレスを直接webpack設定ファイルに設定することができます：

devServer: {
    host: '0.0.0.0',//your ip address
    port: 8080,
    disableHostCheck: true,
    ...
}

それは完璧な解決策ではないかもしれませんが、これにはngrokを使用できると思います。 NgrokはローカルWebサーバーを公開するのに役立ちますをインターネットに。ngrokをローカルの開発サーバーに向けて、ngrok URLを使用するようにアプリを構成できます。

たとえば、サーバーがポート8080で実行されているとします。ngrokを使用して、実行によってそれを外界に公開できます

./ngrok http 8080

良い点ngrokは、公開されたURLのより安全なhttpsバージョンを提供し、世界中の他の人にあなたの作品をテストまたは表示させることです。

また、公開されたURLにランダムな文字列の代わりにユーザーフレンドリーなホスト名を設定するなど、コマンドで利用できる多くのカスタマイズがあります。

ウェブサイトを開いてモバイルの応答性を確認するだけの場合は、browersyncを使用してください。

私にとって、最終的に助けとなったのは、これをwebpack-dev-server構成に追加することでした：

new webpackDev(webpack(config), {
    public: require('os').hostname().toLowerCase() + ':3000'
    ...
})

次に、babelのwebpack.config.jsファイルも変更します。

module.exports = {
    entry: [
        'webpack-dev-server/client?http://' + require('os').hostname().toLowerCase() + ':3000',
        ...
    ]
    ...
}

（hostnameOSXのターミナルで）コンピューターのホスト名を取得し、定義したポートを追加するだけで、モバイルに移行できます。

ngrok.ioと比較すると、このソリューションでは、モバイルでreactのホットリロードモジュールを使用することもできます。

forrestoの答えに追加情報を追加するためにコメントすることはできませんでしたが、ここ（2019年）には--public、セキュリティの脆弱性--host 0.0.0.0のみのため、フラグを追加する必要があります。このコメントをチェック詳細については、をください。

回答としての「他の回答への応答」を回避するために、ここではforrestoのアドバイスと、この作業を行うために必要な追加の詳細を示します。

両方を追加：

--host 0.0.0.0

そして

--public <your-host>:<port>

ここで、your-hostはホスト名（私にとっては（name）s-macbook-pro.local）です）およびportは、アクセスしようとしているポートです（ここでも、私にとっては8081です）。

だからここに私のpackage.jsonは次のようになります：

  "scripts": {
    ...
    "start:webpack": "node_modules/.bin/webpack-dev-server --host 0.0.0.0 --public <name>s-macbook-pro.local:8081",
    ...
  },