網頁開發 設定WSL2 開放 local network 連線
開起 Create-React-App 的測試專案
我們就會看到第一個問題,開發頁面不能照常開啟,因為網站是在 Linux 底下開啟的,所以在windows系統下的 localhost:3000是沒有連線,但因為WSL是windows底下的虛擬機,所以連WSL的IP卻能正常顯示。
![](https://assets.matters.news/embed/745efb7e-cbb9-40cd-a9cc-334b67baae44.png)
![](https://assets.matters.news/embed/4a705ad4-0360-4e58-8113-f04e6200dacc.png)
確認WSL2的IP Address
我們先開啟wsl2的終端機輸入指令取得 IP address,172.21.221.189
ip addr | grep eth0
![](https://assets.matters.news/embed/6b9d37bc-680b-4c00-9242-4d0ee263615f.png)
打開 windows 的 Powershell 系統管理員,輸入指令,修改網站的port 跟 wsl2的 ip address
netsh interface portproxy add v4tov4 listenport=3000 listenaddress=0.0.0.0 connectport={網站的port} connectaddress={ wsl2的 ip address}
範例:
netsh interface portproxy add v4tov4 listenport=3000 listenaddress=0.0.0.0 connectport=3000 connectaddress=172.21.221.189
設定防火牆
![](https://assets.matters.news/embed/406a23fe-1ab3-45bb-9d80-a370f0592dd1.png)
![](https://assets.matters.news/embed/2a71df75-bb36-47d3-a72f-e87d06da7d03.png)
![](https://assets.matters.news/embed/656619ee-0fba-4c74-8fdc-73ac6c932d92.png)
![](https://assets.matters.news/embed/f57f5eeb-0cb3-403c-9608-e562cd3037b0.png)
![](https://assets.matters.news/embed/a32cb723-d726-47d6-81ce-f33cfba36d8a.png)
![](https://assets.matters.news/embed/b293092d-1dca-46c6-b365-f5fffa46a2c6.png)
取得 Local Network ip address
![](https://assets.matters.news/embed/0eaf27cd-f019-41dc-816a-b75644dd54d6.png)
取得 Local Network ip address 加上網站的 port 即可對外連線了
http://192.168.2.90:3000/