如何從 local.network 中的設備訪問 webpack-dev-server？

Question

有一些 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.network 中）訪問我的服務器。

我怎樣才能啟用它？ 謝謝！

Answer 1

（如果您使用的是像我這樣的 Mac 和網絡。）

使用--host 0.0.0.0運行 webpack-dev-server——這讓服務器可以監聽來自網絡的請求，而不僅僅是本地主機。

在網絡上找到您計算機的地址。 在終端中，輸入ifconfig並查找en1部分或類似inet 192.168.1.111

在同一網絡上的移動設備上，訪問http://192.168.1.111:8080並享受熱重載開發的樂趣。

Answer 2

您可以直接在 webpack 配置文件中設置您的 IP 地址：

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

Answer 3

這可能不是完美的解決方案，但我認為您可以使用ngrok 。 Ngrok可以幫助您將本地 Web 服務器公開到 Internet。 您可以將 ngrok 指向本地開發服務器，然后將您的應用程序配置為使用 ngrok URL。

例如，假設您的服務器在端口8080上運行。 您可以使用 ngrok 通過運行將其暴露給外部世界

./ngrok http 8080

ngrok是它提供了一個更安全的https版本的公開 url，您可以將其提供給世界上任何其他人來測試或展示您的工作。

此外，它還在命令中提供了許多自定義功能，例如在公開的 url 中設置一個用戶友好的主機名而不是隨機字符串以及許多其他內容。

如果您只想打開您的網站來檢查移動響應能力，您應該選擇browersync 。

Answer 4

對我來說，最終有幫助的是將它添加到 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 的熱重載模塊。

Answer 5

我無法發表評論以便為 forresto 的答案添加其他信息，但在未來（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",
    ...
  },

Answer 6

我在尋找滿足以下要求的解決方案時發現了這個線程：

• 使用公共 IP 自動打開 URL。 例如http://192.168.86.173:8080 。 因此，它可以直接從瀏覽器復制並發送到網絡中的另一台設備。
• dev 服務器在本地網絡中可用。

這是我想出的解決方案：

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

Answer 7

使用webpack-dev-server v4.0.0+ 你需要

devServer: {
  host: '0.0.0.0',
  port: 8030,
  allowedHosts: ['all'] // or use 'auto' for slight more security
}

Answer 8

如果您嘗試了此處其他答案中所述的所有內容，但沒有成功……還要確保您的計算機上沒有運行防火牆或打開所需的端口。