00:00:00Ini adalah Portless, sebuah alat CLI dari Versil Labs, tim yang sama yang menghadirkan Agent Browser,
00:00:05JSON Render, dan Skills yang menggantikan nomor port localhost dengan nama yang stabil,
00:00:10memudahkan manusia dan agen AI untuk selalu menuju ke tempat yang tepat dan mencegah konflik.
00:00:15Tapi bagaimana cara kerjanya di balik layar dan apakah ini akan mengacaukan sistem saya?
00:00:20Klik subscribe dan mari kita bahas.
00:00:21Mari kita pelajari cara menggunakan Portless dengan contoh sederhana.
00:00:26Saat ini saya memiliki sebuah proyek yang berjalan di port 3001.
00:00:30Dan jika saya membiarkannya berjalan di latar belakang dan benar-benar melupakannya,
00:00:33lalu ingin menjalankan proyek lain yang menggunakan port serupa,
00:00:37maka saya akan mendapatkan pesan galat yang mengatakan alamat sudah digunakan.
00:00:40Dan inilah masalah yang dirancang untuk diselesaikan oleh Portless.
00:00:44Karena bayangkan jika Anda memiliki agen berbeda yang berjalan di tab berbeda untuk proyek berbeda
00:00:48dan mereka mengalami masalah ini.
00:00:50Tentu saja mereka bisa memperbaikinya, tapi akan lebih baik jika sebuah port selalu tersedia
00:00:55untuk mereka gunakan, sehingga hal ini tidak akan terjadi sejak awal.
00:00:58Kini dengan Portless terinstal dan proxy Portless berjalan,
00:01:01saya bisa menjalankan perintah portless diikuti dengan nama host saya, yang dalam hal ini adalah xdlapi,
00:01:06tapi ini bisa berupa apa pun yang Anda inginkan.
00:01:08Lalu perintah yang ingin Anda jalankan, yaitu “bun run devapi”.
00:01:12Dan jika saya menekan enter, alat ini akan mencari nomor port bebas secara acak di rentang 4000.
00:01:16Karena itu adalah rentang yang kemungkinannya kecil digunakan oleh program lain.
00:01:20Dan ini mengekspos aplikasi saya dengan nama host saya pada .localhost 1355.
00:01:25Secara default, port-nya adalah 1355, yang merupakan singkatan dari “less” karena ini Portless. Paham?
00:01:30Sekarang jika saya klik di sini, Anda bisa melihat aplikasi kita sudah berjalan.
00:01:34Dan jika saya pergi ke aplikasi lain dan melakukan hal yang sama persis,
00:01:37sekarang ia menemukan port bebas yang berbeda namun tetap menggunakan nama host tersebut.
00:01:40Tetapi angka di bagian akhir akan selalu tetap sama.
00:01:42Bahkan, jika kita mau, kita bisa mengubahnya.
00:01:44Dan jika kita mengubahnya ke Port 80, kita bisa menghilangkan tanda titik dua dan angka ini sekaligus.
00:01:49Jadi jika saya memulai proxy Portless di Port 80, ingatlah untuk menggunakan sudo,
00:01:53dan juga menggunakan sudo untuk memulai proses Portless,
00:01:55maka kita cukup menggunakan subdomain dengan .localhost.
00:01:59Bahkan, kita bisa mendapatkan dukungan HTTPS selain menggunakan Port 80
00:02:03dengan menggunakan flag HTTPS, yang memungkinkan kita untuk menggunakan HTTPS.
00:02:08Tetapi jika Anda menggunakan Vite, Anda harus mengatur variabel port di kunci port,
00:02:13serta mengatur host ke nilai ini.
00:02:15Saya akan menjelaskan alasannya nanti di video ini.
00:02:17Namun ada banyak opsi lain yang Anda dapatkan dengan Portless,
00:02:21seperti kemampuan menjalankan proxy di latar depan untuk debugging
00:02:25dan kemampuan menjalankan perintah tanpa proxy, sekali lagi untuk debugging atau sebagai solusi darurat.
00:02:30Tapi mengapa ia menggunakan nomor port acak setiap saat?
00:02:33Dan mengapa ia membutuhkan proxy? Mari kita bahas cara kerjanya.
00:02:35Jadi kita akan melalui dua proses.
00:02:36Apa yang terjadi saat perintah utama Portless dijalankan di terminal?
00:02:39Dan apa yang terjadi saat browser memuat URL Portless?
00:02:42Di sini, ketika Anda menjalankan perintah Portless, dalam contoh ini,
00:02:46yang terjadi adalah host dan perintah tersebut diekstrak terlebih dahulu.
00:02:49Portless my app dengan perintah bun start,
00:02:52Hal berikutnya yang dilakukan adalah memeriksa apakah proxy sedang berjalan.
00:02:56Jika tidak, ia akan memulainya.
00:02:59Namun ada satu catatan karena Anda bisa mengatur port yang Anda inginkan untuk menjalankan proxy.
00:03:01Secara default, port-nya adalah 1355.
00:03:06Tetapi jika Anda mengaturnya ke nilai di bawah 1024,
00:03:08maka ia akan meminta konfirmasi Anda sebelum dijalankan.
00:03:12Namun jika di atas angka tersebut, ia akan berjalan secara otomatis.
00:03:15Selanjutnya, ia mencari port bebas antara angka 4000 hingga 4999.
00:03:19Dan port ini dipilih secara acak untuk mempercepat proses pencarian.
00:03:25Karena jika berurutan, ia harus memeriksa semua port satu per satu,
00:03:29yang bisa memakan waktu lama jika Anda memiliki banyak proses yang sedang berjalan.
00:03:33Setelah menemukan port, ia menambahkan rinciannya ke berkas JSON root store.
00:03:35Lalu ia menjalankan perintah Anda di port tersebut dan menambahkannya ke variabel lingkungan port,
00:03:40yang dapat diakses oleh sebagian besar aplikasi JavaScript.
00:03:47Sekarang mari kita fokus pada bagian ini.
00:03:50Jadi ketika browser mengunjungi URL portless, dalam hal ini adalah myapp.
00:03:52Dan jika kita menggunakan port default, itu akan menjadi 1355.
00:03:56Tentu saja, ia melakukan seluruh resolusi DNS sebelum membuat koneksi TCP ke proxy,
00:04:00yang kemudian mengekstrak nama host-nya, yaitu myapp,
00:04:06dan menggunakannya untuk mencari port aplikasi Anda di dalam berkas JSON root.
00:04:09Setelah mendapatkan nomor port yang benar, ia meneruskan permintaan ke aplikasi Anda yang sebenarnya,
00:04:15yang kemudian mengirimkan respons kembali ke proxy sebelum menuju ke browser,
00:04:21karena browser mengharapkan respons dari port 1355
00:04:26dan bukan nomor yang ditetapkan secara acak oleh proxy pada tahap proses ini.
00:04:30Ini juga bekerja secara ajaib dengan WebSockets.
00:04:35Semua ini sangat mengesankan untuk sebuah proyek akhir pekan.
00:04:38Namun, jika Anda menggunakan Portless pada proyek selain Next.js seperti Vite, Anda mungkin akan menemui beberapa masalah.
00:04:40Pertama-tama, karena ia menggunakan nomor port acak yang ditetapkan ke variabel port
00:04:47dan bukan nomor yang dipatenkan, Anda harus memastikan aplikasi Anda bisa berjalan di port tersebut
00:04:52sehingga proxy tahu ke mana harus mengalihkan trafik.
00:04:56Dan untuk Vite atau bundler sejenisnya, Anda mungkin harus menambahkan kunci host ini dan mengaturnya ke nilai ini,
00:05:00karena ia menolak permintaan dari asal (origin) yang tidak dikenal, dan ini menonaktifkan pemeriksaan tersebut.
00:05:06Saya sempat mencoba menggunakan kunci host yang diizinkan dengan berbagai nilai, tapi tampaknya tidak berhasil.
00:05:10Jadi meskipun solusi ini terasa ekstrem,
00:05:16sebenarnya tidak ada yang perlu dikhawatirkan jika Anda menjalankannya secara lokal.
00:05:19Tetapi seperti kebanyakan proyek lain dari Vercel Labs, Portless akan terus mendapatkan pembaruan,
00:05:22artinya sebagian besar fitur ini akan disempurnakan di masa mendatang,
00:05:26begitu juga dengan dukungan untuk Windows.
00:05:30Bicara soal Vercel Labs, jika Anda belum mencoba Agent Browser,
00:05:32cara terbaik bagi agen Anda untuk berinteraksi dengan browser,
00:05:36Anda bisa mempelajarinya lebih lanjut di video berikutnya.
00:05:39Terima kasih sudah menonton.