Bagikan aplikasi buatan AI (OpenCode, Claude Code, Cursor) ke klien

Aplikasi sudah jadi di OpenCode (atau Claude Code, Cursor, Bolt) dan jalan di http://127.0.0.1:5173. Alamat itu tidak bisa dibagikan: 127.0.0.1 artinya komputer ini sendiri, jadi bila klien membukanya, browser klien mencari aplikasi di komputer klien. Panduan ini memberi tiga cara agar klien bisa membukanya.

Pilih cara

Saran: pakai A untuk demo, lalu B saat klien setuju. Ingin OpenCode yang mengerjakan semuanya, dari server kosong sampai online? Lihat Dari VM kosong sampai online.

A. Pratinjau dari komputer Anda (tunnel)

Saka membuat penghubung keluar dari komputer Anda ke internet, jadi tidak perlu IP publik atau membuka port di router.

1. Pasang agent Saka di komputer yang menjalankan aplikasi. Linux: lihat Tambah server. Windows: jalankan OpenCode dan aplikasinya di WSL2, lalu pasang agent di WSL2 (panduan WSL2). Mac: lihat bagian khusus Mac di bawah.
2. Izinkan alamat tunnel di Vite. Vite versi baru menolak alamat selain localhost ("Blocked request. This host is not allowed"). Tambahkan di vite.config:
   vite.config.ts

   export default defineConfig({
     // ...pengaturan lain tetap
     server: { allowedHosts: ['.hack.id'] },
     preview: { allowedHosts: ['.hack.id'] },
   })

3. Jalankan versi build, bukan mode dev (lebih cepat dan ringan untuk klien):
   Terminal

   npm run build
   npx vite preview --port 4173

   Mode dev (npm run dev, port 5173) juga bisa, tetapi setiap halaman lebih lambat dibuka dari jauh.
4. Di panel, menu Tunnel: isi nama (mis. demo-toko), pilih server komputer Anda, pilih aplikasi web lain, isi port 4173, lalu Buat alamat.
5. Kirim https://demo-toko-app.hack.id ke klien. Alamat baru ditinjau tim Saka dulu (biasanya cepat), dan Anda dikabari lewat Telegram.

Minta OpenCode mengerjakannya. Bila Saka sudah tersambung ke OpenCode, cukup tulis:

Izinkan host .hack.id di server dan preview vite.config, jalankan npm run build lalu vite preview di port 4173, kemudian buat tunnel Saka bernama demo-toko ke port 4173 di server laptop saya dan beri tahu alamatnya.

Pakai Mac?

Agent Saka hanya berjalan di Linux, jadi di Mac cara A butuh mesin virtual dulu. Ada dua jalan:

• Paling mudah: lewati komputer Mac, pakai cara B. Buat server kecil lewat akun DigitalOcean, Vultr, atau IDCloudHost langsung dari Saka (Buat server dari akun cloud, ±US$6 per bulan), lalu pasang aplikasinya dari Git. Mac Anda tidak perlu menyala dan tidak perlu mesin virtual; klien tetap bisa membuka kapan saja.
• Tetap dari Mac Anda (cara A):
  1. Buat mesin virtual Ubuntu dan pasang agent Saka di dalamnya: Jalur C: Mac lewat Multipass.
  2. Jalankan Vite di Mac dengan tambahan --host agar bisa dijangkau dari mesin virtual (bila macOS menanyakan izin koneksi masuk untuk node, pilih Allow):
     Terminal Mac

     npm run build
     npx vite preview --host --port 4173

  3. Cari alamat Mac dari sisi mesin virtual:
     Terminal Mac

     multipass exec saka -- sh -c "ip route | awk '/default/ {print \$3}'"

     Hasilnya biasanya 192.168.64.1.
  4. Di menu Tunnel: pilih aplikasi web lain, port 4173, dan isi Di perangkat lain di jaringan dengan alamat dari langkah 3.
  Cara ini belum saya uji langsung di Mac, jadi bila gagal, kabari lewat tombol Minta fitur di panel. Mac dan mesin virtual harus tetap menyala dan tidak tidur selama klien membuka alamatnya.

B. Online permanen dari Git

1. Simpan kode ke GitHub/GitLab/Gitea. Minta OpenCode: "inisialisasi git, buat .gitignore, commit, dan push ke repo baru". Repo privat juga bisa (Saka memberi deploy key).
2. Di panel: Situs, Buat situs, Aplikasi dari Git, isi alamat repo dan cabang, pilih server dan domain. Proyek Vite, Next.js, Express, dan lainnya dikenali otomatis lewat Railpack; bila ada Dockerfile, itu yang dipakai.
3. Arahkan A record domain ke IP server. HTTPS dipasang otomatis. Belum punya domain? Pakai alamat nama.IP-dengan-strip.sslip.io sebagai domain situs, mis. toko.159-223-87-126.sslip.io: HTTPS otomatis tanpa mengatur DNS, cocok untuk demo (untuk produksi pakai domain sendiri). Alternatifnya tunnel untuk alamat nama-app.hack.id.
4. Kunci API dan rahasia lain diisi di kartu Variabel lingkungan, bukan di kode.
5. Pasang webhook (petunjuknya di halaman aplikasi): setiap push langsung ter-deploy tanpa jeda, dan rilis yang bermasalah bisa dikembalikan dengan satu klik.

Revisi dengan klien: nyalakan Pratinjau pull request. Setiap perubahan yang Anda ajukan lewat pull request mendapat alamat sendiri untuk dicek klien sebelum digabung ke versi utama.

C. Situs statis

Untuk aplikasi yang tidak punya backend sendiri (semua jalan di browser):

1. Jalankan npm run build. Hasilnya folder dist.
2. Di panel: Situs, Buat situs, pilih Statis, isi domain.
3. Unggah isi folder dist ke folder www lewat SFTP (data login di halaman situs, mis. dengan FileZilla).

Aplikasi satu halaman (React Router dan sejenisnya) yang membuka alamat dalam seperti /produk/12 lebih aman lewat cara B, karena server statis menjawab 404 untuk alamat yang bukan berkas.

Dari VM kosong sampai online: serahkan ke OpenCode

Bila Saka sudah tersambung ke OpenCode, seluruh jalan dari server kosong sampai alamat HTTPS bisa dikerjakan OpenCode. Anda hanya mengerjakan beberapa hal yang memang harus dari Anda:

Kalimat pembuka yang bisa Anda tempel di OpenCode:

Panggil alat panduan_deploy dari Saka dulu dan ikuti urutannya. Bawa proyek di folder ini online di server Saka supaya klien saya bisa membukanya lewat alamat HTTPS. Tanya saya dulu soal repo, domain, dan server. Jangan menulis kunci atau sandi di chat.

Alat panduan_deploy memberi OpenCode urutan langkah dan aturan yang sama dengan halaman ini.

Bila Anda membuat VM Ubuntu sendiri

1. Buat VM Ubuntu 22.04 atau 24.04 di penyedia mana pun: minimal 1 vCPU dan 2 GB RAM, dengan IPv4 publik. Di firewall penyedia, buka port 22, 80, dan 443.
2. Minta OpenCode memanggil server_tambah, atau buka panel: Server, + Tambah server. Anda mendapat satu baris perintah.
3. Masuk ke VM (ssh root@IP-SERVER atau konsol web penyedia), tempel perintah itu, lalu tekan Enter. Server muncul di Saka dalam beberapa detik, dan sejak itu OpenCode mengurusnya lewat Saka tanpa SSH lagi. Server baru langsung dilindungi Perisai Saka.

Yang perlu diperhatikan pada aplikasinya

• Tidak ada disk tetap. Berkas yang ditulis aplikasi (database SQLite, unggahan) hilang setiap deploy. Pakai database terkelola (klaster Saka atau database luar) dan penyimpanan objek S3 untuk unggahan. Aplikasi hasil AI sering memakai SQLite secara bawaan: minta OpenCode beralih ke PostgreSQL.
• Port dan alamat. Aplikasi mendengarkan di variabel PORT dan di 0.0.0.0, bukan hanya 127.0.0.1.
• Build produksi, bukan server dev (npm run dev). Tanpa Dockerfile, jenis aplikasi dikenali otomatis.
• Rahasia (kunci API, sandi database) diisi lewat kartu Variabel lingkungan atau situs_env, bukan di kode atau repo.

Sambungkan Saka ke OpenCode

Buat token di panel (Pengaturan, Token API), lalu tambahkan di opencode.json proyek Anda (atau ~/.config/opencode/opencode.json):

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "saka": {
      "type": "remote",
      "url": "https://app.saka.work/mcp",
      "headers": { "Authorization": "Bearer <token>" }
    }
  }
}

Setelah itu OpenCode bisa membuat tunnel, memasang aplikasi dari Git, dan memantau deploy lewat Saka, dengan persetujuan Anda untuk aksi yang mengubah server. Jangan commit berkas yang berisi token ke repo publik. Daftar lengkap alat: Sambungkan AI (MCP).