在 WSL2 不工作的情況下在您的網絡上創建 React 應用程序

Question

我正在嘗試使用移動設備查看由 create react app 提供的應用程序。 當我打開 CRA 的“在您的網絡上”推薦的IP:PORT時，該頁面從未在我的移動設備上加載。

我正在使用 Windows 10 筆記本電腦，使用 WSL2 和 Ubuntu。My.network 都是 wifi，沒有 ethe.net 電纜。 我的代碼位於 Ubuntu 文件系統上，我從帶有 WSL 擴展名的 VS Code 的 WSL 終端中的相同位置npm start 。

我可以在我的 Windows 機器（Chrome、Edge）上使用 http://localhost:3000 和瀏覽器查看該應用程序。

我注意到 cmd.exe ipconfig將對應於“在您的網絡上”的 IP 地址列為“Ethe.net 適配器 vEthe.net (WSL)”。 這個 IP 地址 (172.17.144.244) 與 ipconfig 顯示的“無線 LAN 適配器 Wi-Fi”(192.168.1.23) 不同。 我也在我的移動設備上嘗試了192.168.1.23:3000 ，但它也沒有用。

SO 上的一些其他帖子建議刪除阻止 NodeJS 應用程序的防火牆設置。 我瀏覽了防火牆設置中列出的許多應用程序，但沒有找到任何 NodeJS 應用程序。

Answer 1

由於 WSL2 使用虛擬 NIC，因此您需要在防火牆中啟用端口轉發，否則網絡中的外部 PC 將無法看到 WSL2 中的服務器。

我建議閱讀整個線程，但在簡歷中你可以開始使用這個腳本： https : //github.com/microsoft/WSL/issues/4150#issuecomment-504209723

Answer 2

我遇到過同樣的問題。 因此，與其嘗試重新啟動 Windows，不如嘗試打開 Powershell 終端，關閉 WSL，然后再次啟動它。 它解決了我。

• 關閉命令： wsl --shutdown
• 啟動命令：啟動： wsl

來源： https : //github.com/microsoft/WSL/issues/4885#issuecomment-803881561

Answer 3

您可以改為在 Docker 中運行您的應用程序，並使用適用於 Windows 的 Docker，為 WSL2 啟用。 它以某種方式動態管理動態轉發端口，而無需您在 Windows 中更改任何內容。

Answer 4

我在 WSL2 中也遇到了熱重載的問題。 我嘗試了 github、stackoverflow 和其他地方的幾乎所有解決方案，從 CHOKIDAR_USEPOLLING=true 到設置 FAST_REFRESH= false in.env 文件到 changing.network setting using.netsh ....但他們都沒有為我工作，2 天后搜索解決方案並嘗試修復它。最終恢復到 wsl 1。

現在只需在 Powershell 上運行此命令。 wsl --set-version Ubuntu-20.04 1

Answer 5

我找到了一個解決這個問題的工具： https://github.com/icflorescu/expose-wsl

首先需要在wsl終端運行命令

npx expose-wsl@latest

例如，它為您提供 ip 地址，您的電腦192.168.0.130 ，使用該 ip，您可以從 same.network 上的設備訪問該項目。

當運行npm start ：。 . . 在您的網絡上： http://172.48.228.88:3000

在移動設備上輸入：

http://192.168.0.130:3000

和作品。

注意：您必須允許端口通過 Windows 防火牆。 在我的例子中，防火牆應該允許訪問 'C:\Program Files\WindowsApps\MicrosoftCorporationII.WindowsSubsystemForLinux_1.0.3.0_x64__...\wslhost.exe'

Answer 6

考慮Nginx 為 Windows 。

我更喜歡這個解決方案，因為我比 Windows.networking 和 Powershell 更熟悉配置 web 服務器和反向代理。

解壓后的發行版，比如在C:\somepath\nginx-1.22.1，我在C:\somepath\nginx-1.22.1\conf\nginx.conf中添加如下反向代理配置

...
http {
...
    server {
        listen 11500;
        server_name wsl2_server;
        charset utf-8;

    location / {
        proxy_pass http://localhost:11500/;
    }
}
...

如您所見，我有一個 web 服務器在 WSL2 的 11500 端口上運行。 當我的移動設備請求“lan_ip_of_laptop:11500/”時，它會轉發到 localhost:11500 並且 WSL2 服務器完成請求。