行動開發-讓手機瀏覽(訪問)開發環境的 Localhost (Mac / Windows)

在行動裝置上瀏覽開發環境運行的 Localhost。

適用需求:

  • 本地 開發運行 Local Server,需要於行動裝置上運行。


條件 & 原理

  1. 開發環境與行動裝置須為同一區網。
  2. 開發環境關閉網路防火牆、指定 Port 可開放連線。
  3. 運行 LocalServer 並查詢本地 IP。
  4. 行動裝置連線至開發環境 IP。

Step1.連至同一個區網

  • 確認當前電腦與手機處於同個網段

    例如連同一個 WiFi / 電腦連手機網路

Step2.運行 Local Server

  • 開發環境運行 Local Server (如:localhost:8080)

Step3.防火牆設定 & IP 查詢

Mac 設定

  • Mac "設定" -> "安全性與隱私權" -> 關閉 防火牆

    Image

  • 查詢 Mac IP 位址

    終端機輸入 :ifconfig

    Image

    或直接在 "網路" 中查看

Image

Windows 設定

  • Windows "控制台" -> "Windows Defender 防火牆" -> 開啟或關閉 Defender 防火牆 -> 關閉防火牆

    Image Image
  • 查詢 IP 位址

    • windows + R 輸入 cmd 開啟命令提示字元
    • 輸入 ipconfig

      Image

      Image

    • 或直接從網路連線中查詢 IP

      Image


Step3. 在行動裝置上連至目標頁

  • 192.168.XX.XX:8080

    Image