Cara Mengakses Laravel + Vite di WSL2 dari Device Lain dalam Satu Jaringan

Jika kamu menjalankan Laravel dan Vite di WSL2, secara default mereka hanya bisa diakses dari dalam komputer sendiri. Ketika ingin membukanya dari HP atau komputer lain yang terhubung ke jaringan Wi-Fi yang sama, kamu akan menemui kendala karena WSL2 memakai jaringan NAT yang memisahkan IP antara Windows dan WSL.

Di tutorial ini kita akan membuat Laravel (php artisan serve) dan Vite (npm run dev) bisa diakses dari device lain di jaringan lokal dengan menggunakan IP LAN Windows.

Konsep Singkat

WSL2 berjalan pada IP internal (NAT).
Laravel & Vite di-set untuk listen di semua interface (0.0.0.0).
Windows meneruskan (forward) port ke IP WSL dengan netsh portproxy.
Perangkat lain mengakses via IP LAN Windows (contoh: 192.168.1.10).

1) Tentukan Port

Laravel: 8000
Vite: 5173

2) Jalankan Laravel di WSL

php artisan serve --host=0.0.0.0 --port=8000

3) Jalankan Vite di WSL

Pastikan ada dua tanda -- sebelum opsi:

npm run dev -- --host 0.0.0.0 --port 5173

4) Dapatkan IP WSL

hostname -I

Contoh hasil: 172.25.189.150 (ini IP WSL).

5) Buat Port Forwarding di Windows (PowerShell Administrator)

# Laravel netsh interface portproxy add v4tov4 listenaddress=0.0.0.0 listenport=8000 connectaddress=172.25.189.150 connectport=8000
Vite
netsh interface portproxy add v4tov4 listenaddress=0.0.0.0 listenport=5173 connectaddress=172.25.189.150 connectport=5173

Ganti 172.25.189.150 dengan IP WSL kamu.

6) Izinkan Firewall Windows

netsh advfirewall firewall add rule name="LaravelWSL" dir=in action=allow protocol=TCP localport=8000
netsh advfirewall firewall add rule name="ViteWSL" dir=in action=allow protocol=TCP localport=5173

7) Akses dari Perangkat Lain

Cari IP LAN Windows dengan ipconfig, contoh: 192.168.1.10. Lalu akses:

Laravel: http://192.168.1.10:8000
Vite: http://192.168.1.10:5173

8) Perbaikan Error Vite (CORS & ERR_ADDRESS_INVALID)

Jika browser error karena Vite menggunakan 0.0.0.0 atau HMR diblokir CORS, atur vite.config.js seperti ini (contoh untuk Laravel + laravel-vite-plugin):

server: {
        host: '0.0.0.0',
        port: 5173,
        cors: true, // biar semua origin bisa akses (termasuk :8000)
        hmr: {
        host: '192.168.110.252', // IP LAN Windows kamu
        protocol: 'ws'
      }
 }

Penjelasan singkat: cors: true mengizinkan pemuatan asset dari port berbeda; hmr.host memastikan WebSocket HMR menggunakan IP Windows (bukan 0.0.0.0/localhost).