web-dev-qa-db-ja.com

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

いくつかのwebpack devサーバー設定があります（設定全体の一部です）：

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ネットワーク内）からサーバーにアクセスしたいです。

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

javascriptnode.jsnetworkingwebpackweb-development-server
84
malcoauri

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

--Host 0.0.0.0を指定してwebpack-dev-serverを実行します—これにより、サーバーはローカルホストだけでなく、ネットワークからの要求をリッスンできます。

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

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

153
forresto

Webpack設定ファイルでIPアドレスを直接設定できます。

devServer: {
    Host: '0.0.0.0',//your ip address
    port: 8080,
    ...
}
42
Igor Alemasow

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

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

./ngrok http 8080

ngrok output here

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

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

Webサイトを開いてモバイルの応答性を確認する場合は、 browersync を選択する必要があります。

14
WitVault

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

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',
        ...
    ]
    ...
}

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

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

6
Andrus Asumets

Forrestoの回答に追加情報を追加するためにコメントすることはできませんでしたが、将来（2019年）--publicだけのセキュリティ脆弱性のために--Host 0.0.0.0フラグを追加する必要があります。詳細については this comment をご覧ください。

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

両方を追加：

--Host 0.0.0.0

and

--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",
    ...
  },
3
Blitz