3

我正在尝试使用外部设备使 webpack-dev-server 在我的本地网络上工作。整个项目在 Windows 10 上的 WSL2 Debian 10 中运行。我还没有在任何地方发现这个特殊问题，所以决定发布这个。

所以该项目是一个在 docker 中运行的 WordPress 站点，webpack-dev-server 将其代理到端口 3000（全部在 WSL 中）。一切都在本地机器上按预期工作：该站点在 localhost:3000 的 Windows 中可用，并且工作正常。

但是，我也想在我的移动设备上访问它。从我在网上找到的内容来看，只要连接到移动设备上的主机 ip（在正确的端口上），只要它在同一个网络上，它就应该可以工作。我的电脑和手机在同一个家庭wifi网络上，所以没关系。

我已经尝试过wsl适配器ipv4和wifi适配器ipv4地址，但据我了解，如果一切都连接到wifi，应该使用无线局域网适配器Wi-Fi吗？因此，使用这些 ip 中的每一个都会导致我的手机（chrome android）出现以下连接错误：

  • wsl 适配器 ip:3000 给出 ERR_CONNECTION_TIMED_OUT，所以可能不是那个
  • wifi 适配器<<wifi-adapter ip>>:3000 给出 ERR_EMPTY_RESPONSE
  • wifi 适配器<<wifi-adapter ip>>（无端口）以某种方式解析为地址栏中的“localhost”并给出 ERR_CONNECTION_REFUSED

我已经尝试过：

  • 添加host: '0.0.0.0'到 webpack 配置。
  • 在 Windows 中使用转发端口 3000netsh interface portproxy add v4tov4 listenport=3000 listenaddress=0.0.0.0 connectport=3000 connectaddress=127.0.0.1
  • 在 Windows 中使用转发端口 3000netsh interface portproxy add v4tov4 listenport=3000 listenaddress=0.0.0.0 connectport=3000 connectaddress=<<wifi-adapter ip>>
  • 禁用 Windows Defender 防火墙
  • 添加public: '<<wifi ip>>:3000'到 webpack 配置。
  • 尝试不同的端口，我尝试了 5040、8000 和 8080。
  • 如果我尝试添加host: '<<wifi-adapter ip>>'，webpack 在启动时会抛出一个错误：Error: listen EADDRNOTAVAIL: address not available <<wifi-adapter ip>>:3000，发生在各种不同的端口上。

无论是在主机 PC 上还是在尝试在 LAN 上连接时，每一个都对行为没有明显影响。我发现有关 webpack-dev-server 的问题在 LAN 上无法访问，通常的解决方案是添加host: '0.0.0.0'，但是这些问题都没有提到wsl的使用。此外，包括 wsl 的类似问题通常将端口转发和防火墙作为可接受的答案，但在我的情况下，这些似乎都没有影响。我还没有找到包含wsl和webpack的连接问题的问题和解决方案，所以我真的没有想法，因为我不清楚如何解决这个问题，看看问题是否出在windows主机上，wsl ，我的家庭网络还是别的什么？所以也许有人在这里看到了一个明显的配置错误？同样，它在主机 PC 本身上运行良好。任何洞察力都非常受欢迎。

Webpack 配置（仅 devserver 部分）：

config.devServer = {
    before(app, server) {
        chokidar.watch([path.resolve(__dirname, './**/*.php')]).on('all', function () {
            server.sockWrite(server.sockets, 'content-changed');
        });
    },
    host: '0.0.0.0',
    contentBase: false,
    writeToDisk: true,
    inline: true,
    disableHostCheck: true,
    port: 3000,
    hot: false,
    index: '',
    proxy: {
        context: () => true,
        changeOrigin: true,
        '/**': 'http://localhost',
    },
};

ipconfig 的输出是：

Windows IP Configuration

Ethernet adapter Ethernet:

   Media State . . . . . . . . . . . : Media disconnected
   Connection-specific DNS Suffix  . : home

Ethernet adapter Ethernet 2:

   Media State . . . . . . . . . . . : Media disconnected
   Connection-specific DNS Suffix  . : home

Ethernet adapter vEthernet (WSL):

   Connection-specific DNS Suffix  . :
   Link-local IPv6 Address . . . . . : xxxx
   IPv4 Address. . . . . . . . . . . : 172.x.x.x
   Subnet Mask . . . . . . . . . . . : 255.255.x.x
   Default Gateway . . . . . . . . . :

Wireless LAN adapter Local Area Connection* 1:

   Media State . . . . . . . . . . . : Media disconnected
   Connection-specific DNS Suffix  . :

Wireless LAN adapter Local Area Connection* 10:

   Media State . . . . . . . . . . . : Media disconnected
   Connection-specific DNS Suffix  . :

Wireless LAN adapter Wi-Fi:

   Connection-specific DNS Suffix  . : home
   Link-local IPv6 Address . . . . . : xxx
   IPv4 Address. . . . . . . . . . . : 192.168.x.x <-- used this ip as <<wifi-adapter ip>>, correct?
   Subnet Mask . . . . . . . . . . . : 255.255.x.x
   Default Gateway . . . . . . . . . : 192.168.x.x

Ethernet adapter Bluetooth Network Connection:

   Media State . . . . . . . . . . . : Media disconnected
   Connection-specific DNS Suffix  . :

编辑：

我设法使用修复组合来修复它，但我真的需要所有这些，或者它只是不起作用：

  • 端口转发（如@Luis 脚本，但我使用了这个，其中包括防火墙规则）
  • 有时我想使用的端口由于某种原因在我的系统上被阻止，我需要终止侦听该端口的现有进程。但是端口 3000 只是不想和我一起做任何事情，所以我只使用 8000
  • windows快速启动被禁用，这以在wsl2上搞乱本地主机而闻名
  • 在 Windows 主机文件中手动启用 localhost（从这里获取）
  • 始终使用 0.0.0.0 作为在 wsl2 中运行的任何服务器上的主机

然后我可以通过 Windows 中列出的 ip 访问我的 LAN 网络上的服务器（在我的例子中是 192.168.xx ）。我现在使用这个 webpack 配置：

config.devServer = {
        before(app, server) {
            chokidar.watch([path.resolve(__dirname, './**/*.php')]).on('all', function () {
                server.sockWrite(server.sockets, 'content-changed');
            });
        },
        host: '0.0.0.0',
        contentBase: false,
        writeToDisk: true,
        inline: true,
        disableHostCheck: true,
        port: 5000,
        hot: false,
        index: '',
        proxy: {
            context: () => true,
            '/**': {
                target: 'http://localhost',
                changeOrigin: true,
                autoRewrite: true,
            },
        },
    };

注意：对于 WordPress，我必须添加另一个修复程序，因为从 LAN 访问时没有加载任何样式或脚本，因为 WordPress 在数据库中“硬编码”站点 url，然后在访问时抛出一堆未找到和 cors 错误来自 http://localhost 以外的任何站点。wp_make_link_relative()就像这个简单的插件一样，它通过在 WordPress 本身中使用得到了修复。

4

1 回答 1

1

使用 netsh，您的连接地址必须是 WSL 2 IP，您可以在 powershell 上尝试以下命令：

    # GET THE WSL IP AND CHECKS IT FORMAT xxx.xxx.xxx.xxx
    $WSL_CLIENT = bash.exe -c "ip addr show eth0 | grep -oP '(?<=inet\s)\d+(\.\d+){3}'";
    $WSL_CLIENT -match '\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}';
    $WSL_CLIENT = $matches[0];
    
    # ADD PORTS FORWARD FROM WSL TO WINDOWS
    #(With this command, windows port 3000 starts to listen port 3000 of wsl2)
    iex "netsh interface portproxy add v4tov4 listenport=3000 listenaddress=127.0.0.1 connectport=3000 connectaddress=$WSL_CLIENT"
    
    # TO CHECK ALL PORTS CONFIGURED:
    netsh interface portproxy show all

如果上面的命令不起作用，你也可以试试这个，但是在 wsl 终端上：

    # Its the same concept, works like a proxy forwarding Linux traffic
    
    $ sysctl -w net.ipv4.conf.all.route_localnet=1
    $ iptables -t nat -I PREROUTING -p tcp -j DNAT --to-destination 127.0.0.1
于 2020-08-20T23:21:12.523 回答