PENGEMBANGAN LOKAL · PENGUJIAN NYATA
Bagikan localhost: uji di ponsel dan terima webhook
Situs berjalan di komputer Anda. Berikan tautan HTTPS sementara agar ponsel, klien, atau layanan webhook bisa mengaksesnya tanpa deployment.
Sebelum berbagi: periksa alamat lokal
Lihat URL yang ditampilkan server pengembangan. Protokol dan port penting: http://localhost:5173 dan https://localhost:7143 adalah tujuan berbeda. Buka alamat yang tepat dan lakukan satu tindakan umum sebelum membuat tunnel.
Satu aplikasi, satu port
Jika halaman dan API memakai alamat lokal yang sama, satu tunnel dapat menjangkau keduanya. Jalur dipertahankan: permintaan publik ke /contact mencapai /contact di aplikasi lokal. Tunnel tidak menyalin atau men-deploy berkas Anda.
Frontend dan API pada port berbeda
Tunnel ke frontend tidak otomatis memublikasikan API pada port lain. Browser yang memanggil localhost:3000 akan menghubungi perangkat pengunjung sendiri. Gunakan proxy API server pengembangan atau URL uji yang dapat dijangkau untuk API, lalu sesuaikan frontend.
Buat tautan publik
Jalankan situs atau API dan periksa akses lokalnya. GhostlyShare otomatis mendeteksi aplikasi web lokal yang berjalan. Klik Go Public untuk membuat tautan HTTPS publik.
- Biarkan aplikasi dan GhostlyShare berjalan selama pengujian.
- Buka tautan di jendela privat sebelum membagikannya.
- Gunakan data uji. Tambahkan kata sandi jika perlu untuk pratinjau khusus klien.
Windows dan Linux. Tautan sementara gratis tanpa akun, email, atau langganan.
Unduh GhostlyShare ↗
Buka alamat publik di komputer dan perangkat lain. Jika halaman lokal bekerja tetapi halaman publik gagal, simpan kedua URL untuk membedakan masalah aplikasi dari masalah tunnel atau konfigurasi host.
Buka localhost di ponsel
Di ponsel, localhost merujuk ke ponsel itu sendiri, bukan komputer Anda. Buka tautan publik atau pindai kode QR di GhostlyShare.
- Beralih ke data seluler untuk menguji akses dari luar Wi-Fi Anda.
- Uji menu, formulir, papan ketik, dan unggahan berkas pada perangkat nyata.
- Buka halaman dalam secara langsung lalu muat ulang. Periksa juga gambar dan respons API.
Hanya menguji di Wi-Fi yang sama? Alamat jaringan lokal komputer mungkin cukup jika server pengembangan dan firewall mengizinkan akses. Tunnel publik berguna untuk jaringan lain dan layanan eksternal.
Pengujian ponsel yang berguna dalam lima menit
- Navigasi dan tata letak
- Buka menu, putar ponsel, dan kunjungi halaman panjang. Cari gulir horizontal, tombol tertutup, dan konten di balik header tetap. Emulasi browser membantu, tetapi tidak meniru semua interaksi perangkat nyata.
- Formulir dan sesi
- Ketuk setiap kolom lalu kirim nilai tidak valid dan nilai valid. Pastikan pesan kesalahan terlihat di atas papan ketik. Jika login hanya bekerja di komputer, coba sesi baru dan periksa callback serta cookie.
- Permintaan dan pemuatan
- Uji halaman dengan banyak gambar dan tindakan yang memuat data. Respons lambat melalui koneksi rumah bukan tolok ukur kinerja produksi. Catat halaman, perangkat, dan tindakan agar masalah bisa diulang secara lokal.
Tunjukkan hasil kerja kepada klien
Kirim halaman tepat yang ingin ditinjau. Jelaskan apa yang perlu dicoba dan kapan pratinjau ditutup.
Sebelum mengirim
Gunakan akun uji dan konten contoh. Pastikan tautan bekerja tanpa cookie atau sesi login Anda.
Minta pemeriksaan yang spesifik
Mengisi formulir kontak, memeriksa menu seluler, atau mencoba checkout dengan pembayaran uji: tugas yang jelas menghasilkan masukan lebih berguna.
Ini pratinjau untuk tinjauan hari ini. Silakan periksa menu seluler dan formulir kontak. Tautan akan ditutup setelah panggilan kita.
Buat masukan mudah direproduksi
Minta URL halaman, perangkat, browser, dan tindakan terakhir sebelum masalah. Tangkapan layar dengan “saya mengharapkan X, tetapi terjadi Y” lebih berguna daripada “halamannya rusak”. Beri tahu jika Anda mengubah aplikasi selama tinjauan: pengunjung mungkin langsung melihat perubahan atau pemuatan ulang, tergantung konfigurasi.
Terima webhook secara lokal
Layanan webhook tidak dapat menjangkau localhost di komputer Anda. Berikan alamat publik tunnel beserta jalur callback. Contoh ini mengasumsikan aplikasi sudah menangani permintaan POST di /api/webhooks/demo.
http://localhost:5173/api/webhooks/demohttps://YOUR-TUNNEL.trycloudflare.com/api/webhooks/demo- Ganti YOUR-TUNNEL dengan nama host sebenarnya dan masukkan URL callback lengkap ke pengaturan uji penyedia.
- Tetap aktifkan verifikasi tanda tangan. Simpan rahasia webhook secara lokal dan kirim peristiwa uji dari penyedia.
- Periksa status pengiriman dan log lokal. Berikan respons sukses yang diharapkan penyedia dan tangani percobaan ulang tanpa mengulangi tindakan.
Permintaan kata sandi di browser dapat memblokir pengirim webhook. Gunakan endpoint yang dapat dijangkau penyedia dan verifikasi permintaan bertanda tangan. CORS berlaku untuk permintaan browser, bukan webhook antarpeladen.
Periksa respons webhook, bukan hanya browser
Membuka URL callback di browser biasanya mengirim GET. Banyak endpoint webhook mengharapkan POST, jadi kesalahan browser saja tidak membuktikan kegagalan pengiriman. Kirim peristiwa uji penyedia dan cocokkan waktu serta ID pengiriman dengan log lokal.
- 404 / 405
- Periksa jalur dan metode HTTP. Gunakan port API, bukan otomatis port frontend. Halaman utama yang dapat dibuka tidak berarti endpoint callback tersedia.
- 401 / 403
- Cari lapisan yang menolak permintaan: kata sandi pratinjau, autentikasi aplikasi, atau verifikasi tanda tangan. Ikuti aturan penyedia untuk isi permintaan asli yang ditandatangani; mengurai dan menulis ulang isinya sebelum verifikasi dapat membatalkan tanda tangan.
- 5xx / Timeout
- Periksa apakah aplikasi berjalan dan menerima permintaan. Untuk pemrosesan lambat, patuhi tenggat respons penyedia dan gunakan pekerjaan latar belakang jika sesuai. Uji pengiriman berulang agar tidak membuat pesanan atau pesan ganda.
Gunakan mode uji penyedia dan jangan mencatat rahasia atau muatan data pribadi lengkap. Uji yang berhasil memeriksa pengiriman dan pemrosesan aplikasi, tetapi tidak menggantikan persyaratan integrasi penyedia.
Tautan terbuka, tetapi ada yang tidak berfungsi?
Tautan publik tidak mencapai aplikasi
Buka URL lokal terlebih dahulu. Periksa port, HTTP atau HTTPS, serta apakah aplikasi dan tunnel masih berjalan.
Gambar atau panggilan API gagal
Cari URL localhost yang ditulis tetap dalam kode. Gunakan jalur relatif jika memungkinkan. API pada port lain membutuhkan rute tersendiri yang dapat dijangkau.
Aplikasi mengalihkan ke localhost
Periksa URL dasar publik, proxy tepercaya, dan callback login. Izinkan host pratinjau yang sebenarnya, bukan menonaktifkan semua pemeriksaan host.
Muat ulang langsung atau WebSockets gagal
Pastikan WebSockets memakai host publik dan wss pada halaman HTTPS. Beberapa server pengembangan memerlukan pengaturan host HMR terpisah.
Webhook tidak mendapat respons sukses
Periksa jalur callback, metode HTTP, rahasia tanda tangan, dan log pengiriman. Perbarui URL callback setelah memulai tunnel sementara baru.
Akhiri pengujian dan hentikan berbagi
Hentikan berbagi di GhostlyShare atau tunnel terminal dengan Ctrl+C. Waktu kedaluwarsa dapat menutup pratinjau terjadwal secara otomatis. Hapus juga URL callback sementara di penyedia setelah selesai.
Butuh alamat tetap untuk penggunaan berkelanjutan?
Pratinjau sementara bukan deployment. Panduan hosting rumahan kami membahas tunnel bernama, domain, layanan Windows, dan biaya operasional.
Siapkan Cloudflare Tunnel permanen →Pertanyaan tentang pratinjau lokal
FAQ
Mengapa localhost tidak berfungsi di ponsel?
Localhost merujuk ke perangkat yang membuka alamat. Gunakan tautan publik di ponsel untuk menjangkau aplikasi di komputer.
Apakah komputer harus tetap menyala?
Ya. Komputer, aplikasi lokal, dan tunnel harus terus berjalan. Mode tidur atau penghentian tunnel membuat pratinjau tidak tersedia.
Apakah pratinjau membutuhkan domain?
Tidak. Tunnel sementara menyediakan alamat HTTPS publik. Perbarui tautan dan pengaturan webhook jika alamat itu berubah.