ウェブサイト検索

javascript - ローカルネットワーク内のデバイスから 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ネットワークにあるモバイルやタブレットからもサーバーにアクセスしたいです。

それをどうやって有効にできますか？ありがとうございます！

回答 #1

（もしあなたが私のようなネットワークを使っているMacを持っているなら。）

webpack-dev-server を --host 0.0.0.0 付きで実行します — これによりサーバーはローカルホストだけでなくネットワークからのリクエストも受け付けるようになります。

ネットワーク上でコンピュータのアドレスを探します。ターミナルで ifconfig と入力し、en1 セクション、または inet 192.168.1.111 のようなものがあるセクションを探してください。

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

回答 #2

webpack の設定ファイルで直接 IP アドレスを設定できます:

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

回答 #3

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

例えば、サーバーがポート 8080 で動作しているとします。ngrok を使って、次のコマンドを実行することで外部に公開できます

./ngrok http 8080

ngrok の良いところは、公開した URL のより安全な https バージョンを提供してくれることで、これを世界の誰にでも渡してテストしたり、自分の作業を見せたりすることができる点です。

また、コマンドには多くのカスタマイズが可能で、例えば公開された URL のランダムな文字列の代わりにユーザーフレンドリーな ホスト名 を設定することなど、他にも多くのことができます。

もし単にモバイル対応を確認するためにウェブサイトを開きたいだけなら、ブラウザシンクを使うべきです。

回答 #4

フォレストの回答に追加情報を加えるためにコメントできませんでしたが、将来的に（2019年）ここでは、--host 0.0.0.0だけではセキュリティの脆弱性があるため、--publicフラグを追加する必要があります。詳細はこのコメントを確認してください。

ここで「他の回答に応答する」ことを回答として避けるために、こちらは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",
    ...
  },

回答 #5

次の要件を満たす解決策を探しているときに、このスレッドを見つけました。

  • パブリックIPを使用してURLを自動的に開きます。例えば、http://192.168.86.173:8080。これにより、ブラウザからコピーしてネットワーク内の他のデバイスに送信することができます。
  • 開発サーバーはローカルネットワークで利用可能です。

Webpack 4

devServer: {
  host: '0.0.0.0',
  useLocalIp: true,
}

Webpack 5

devServer: {
  host: 'local-ip',
}

回答 #6

私にとって、最終的に役立ったのは、これを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',
        ...
    ]
    ...
}

では、コンピュータのホスト名（OSXのターミナルでhostname）を取得し、定義したポートを追加すれば、モバイルで準備完了です。

ngrok.io と比べて、このソリューションではモバイル上でも React のホットリローディングモジュールを使用することができます。

関連記事