Cara Mengakses Project Lokal di Mana Saja Menggunakan Port Forwarding di VS Code

 

Halo rek, kembali lagi dengan gweh setelah sekian lama, anjas tugas ospek ra kiro kiro. Dalam pengembangan web, ada kalanya kita ingin membagikan aplikasi yang sedang kita kembangkan secara lokal kepada orang lain untuk diuji coba, tanpa harus melakukan hosting ke server terlebih dahulu. Salah satu cara untuk melakukannya adalah dengan port forwarding di Visual Studio Code (VS Code).

Apa Itu Port Forwarding?

Port forwarding adalah teknik yang memungkinkan kita mengakses aplikasi lokal di komputer kita dari jaringan lain melalui internet. Dengan ini, kita dapat memberikan akses sementara ke aplikasi lokal tanpa harus men-deploy ke hosting publik.

Prasyarat

Sebelum memulai, pastikan hal-hal berikut ini:

1. VS Code sudah terinstall di komputer.
2. Extension Live Server atau Remote - SSH sudah terpasang di VS Code.
3. Koneksi internet aktif.
4. Gunakan layanan port forwarding eksternal seperti ngrok (opsional, jika menggunakan ekstensi tidak mendukung).

Langkah-Langkah Port Forwarding di VS Code

1. Install Extension Live Server

Jika kamu menggunakan aplikasi frontend berbasis HTML, CSS, dan JavaScript, kamu dapat memanfaatkan extension Live Server di VS Code untuk menjalankan aplikasi di localhost. Berikut caranya:

• Buka VS Code dan buka project yang ingin dijalankan.
• Di bagian Extensions (ikon kotak di sidebar kiri), cari Live Server lalu install.
• Setelah terinstall, buka file HTML kamu lalu klik kanan di editor dan pilih Open with Live Server.
• Localhost kamu akan berjalan pada port tertentu misal: localhost:5500

2. Menggunakan Remote - SSH

Jika kamu ingin membuka project yang berjalan di localhost ke dunia luar, ekstensi Remote - SSH bisa membantu kamu melakukan tunneling.

• Install extension Remote - SSH dari marketplace VS Code.
• Buka terminal di VS Code, lalu ketik perintah SSH ke server kamu atau gunakan SSH local (wsl atau container) jika tersedia.
• Lakukan tunneling dengan perintah:

  bash
  
  ssh -R 80:localhost:5500 user@server
  

  Ini akan mem-forward localhost kamu ke port 80 dari server yang bisa diakses melalui IP publik.

3. Menggunakan Ngrok (Alternatif)

Jika kamu tidak ingin repot dengan pengaturan SSH atau kamu membutuhkan akses publik secara cepat, ngrok adalah solusi yang mudah. Ngrok akan membuat tunnel ke localhost kamu, sehingga bisa diakses dari luar.

Berikut langkah-langkahnya:

• Unduh dan install ngrok dari situs resminya: ngrok.com.
• Setelah terinstall, buka terminal di VS Code dan arahkan ke direktori project kamu.
• Jalankan server lokal terlebih dahulu, misal dengan Live Server.
• Setelah server berjalan di localhost, buka terminal dan jalankan perintah:

  bash
  
  ngrok http 5500
  

  (gantilah 5500 dengan port di mana localhost kamu berjalan).
• Ngrok akan memberikan URL publik yang bisa dibagikan kepada orang lain. URL ini akan meneruskan semua trafik ke localhost kamu.

Mengakses Proyek Lokal Dari Jarak Jauh

Setelah menjalankan langkah-langkah di atas, URL yang disediakan oleh ngrok atau tunneling melalui Remote - SSH akan membuat aplikasi kamu dapat diakses dari mana saja. Cukup bagikan URL tersebut kepada orang yang ingin mengakses aplikasi kamu.

Kelebihan dan Kekurangan

Kelebihan:

• Tidak perlu hosting: Kamu tidak perlu membeli server atau hosting untuk menguji aplikasi kamu secara publik.
• Mudah dan cepat: Prosesnya cepat, terutama jika menggunakan ngrok.
• Cocok untuk demo atau testing: Berguna untuk demo cepat atau testing bersama tim remote.

Kekurangan:

• Sementara: URL yang dihasilkan hanya sementara, akan berubah setiap kali session baru dimulai (kecuali dengan akun ngrok berbayar).
• Keamanan: Kamu harus berhati-hati saat membuka localhost ke publik karena aplikasi belum tentu aman.

Kesimpulan

Menggunakan port forwarding di VS Code adalah cara yang cepat dan efisien untuk membagikan aplikasi lokal ke orang lain tanpa hosting. Kamu bisa menggunakan extension Live Server atau mengintegrasikan dengan layanan seperti ngrok atau SSH tunneling untuk akses jarak jauh.

Dengan pendekatan ini, kamu bisa tetap fokus pada pengembangan aplikasi tanpa harus memikirkan server atau hosting terlebih dahulu, namun tetap bisa berbagi hasil kerja secara real-time.