Sayudha

12 Go Live

Properties2
descriptionMengunggah karya ThreeJS ke internet
tags3d, dasar

7 menit baca

Kita udah bikin teks 3D dengan seratus donat melayang. Sayang banget kalau cuma kita sendiri yang bisa lihat di localhost.

Sampai titik ini, kamu pasti pengen pamer hasil karyamu. Screenshot atau video sih lumayan, tapi teman dan keluarga bakal jauh lebih senang kalau bisa ngutak-atik sendiri, muter-muterin kameranya, mencet-mencet sendiri. Saatnya bikin karya WebGL kita hidup di internet.

Pilihan-pilihannya

Dulu, pilihan buat bikin website online itu dikit banget. Sekarang malah kebalikannya, saking banyaknya jadi bingung. Tapi ya itu bagusnya, banyak solusi yang praktis.

Kita bahas dua: cara tradisional (buat yang udah punya hosting), dan cara modern (buat yang mau cepat).

Cara Tradisional: Build Manual

Bagian ini buat kamu yang udah terlanjur punya hosting kaya OVH, 1and1, Gandi, atau hosting lokal yang uploadnya masih pakai FTP.

Yang paling penting dipahami: kamu gak bisa asal upload seluruh folder project. Folder node_modules/ dan file konfigurasi Vite itu bukan buat browser, itu buat komputer kita waktu ngoding. Browser gak ngerti apa-apa soal itu.

Jadi project kita harus di-build dulu, yaitu diolah jadi file HTML, CSS, JS, dan aset yang bisa dibaca browser biasa:

pnpm build

Perintah ini sebenarnya cuma ngejalanin script yang ada di dalam file package.json pada bagian scripts > build, yang udah ada sejak kita setup project di bab pertama.

Tunggu beberapa detik, terus bakal muncul folder /dist/ yang isinya file-file siap pakai. Isi folder itulah yang kamu upload ke hosting pakai FTP.

❌ salah, browser gak ngerti isi folder ini

node_modules/
src/
vite.config.js
package.json

✅ benar, cuma isi folder hasil build yang diupload

dist/
├── index.html
├── assets/
└── textures/

Dan satu lagi yang sering kelupaan: tiap mau upload versi baru, jalanin pnpm build lagi, walaupun folder /dist/-nya udah ada. Folder itu gak update sendiri. Banyak yang bingung “kok perubahannya gak muncul di website” padahal ya emang belum di-build ulang.

Setup hosting tradisionalnya gak kita bahas, karena di bawah ini ada cara yang jauh lebih enak.

Vercel

Vercel itu solusi hosting “modern” yang punya fitur continuous integration, yaitu otomatisasi proses tes, deploy, dan langkah-langkah pengembangan lainnya. Ramah banget buat developer dan gampang di-setup.

Dia bisa dipakai buat project yang rumit, tapi juga cocok buat website satu halaman sederhana kaya yang kita bikin di kursus ini.

Perlu dicatat, gak ada kerja sama apapun antara Bruno Simon (pembuat kursus) sama Vercel. Dia cuma emang suka pakai itu buat eksperimen-eksperimen kecilnya.

Alternatif bagus lainnya juga ada, kaya Netlify dan GitHub Pages.

Satu hal lagi: tampilan Vercel bisa aja agak beda dari yang dijelasin di sini, soalnya layanannya masih baru dan terus diperbaiki.

1. Bikin Akun

Buka vercel.com dan bikin akun.

Cara masuknya ada beberapa: connect lewat GitHub, GitLab, Bitbucket, atau pakai Email biasa.

Pilihan “connect” itu sebenarnya pilihan terbaik, karena salah satu fitur andalan Vercel adalah continuous integration. Kalau kamu belum kenal GitHub, GitLab, dan Bitbucket: itu tempat nyimpen repository Git kamu, alias tempat kebanyakan developer nyimpen kodenya.

Kalau kamu udah familiar sama Git, pakai aja cara itu. Nanti Vercel bakal ngambil repository kamu sendiri, bantu setup versi live-nya, dan otomatis nge-update tiap kamu push versi baru. Kamu bahkan bisa milih branch mana yang dipakai.

Buat yang belum familiar, tenang, kita pakai cara Email aja biar semua orang bisa ngikutin. Walaupun kamu lagi pakai Git, cara ini tetap jalan kok.

Klik pilihan Email, masukin alamat emailmu, ikutin langkah-langkahnya. Vercel bakal ngirim email konfirmasi berisi link. Klik link-nya, dan kamu langsung masuk.

2. Pasang Vercel ke Project

Vercel itu tersedia sebagai modul NPM yang bisa di-install global di komputer atau sebagai dependency di project.

Kita pilih yang kedua. Kenapa? Karena kalau nanti project ini dibuka di komputer lain, atau dikasih ke developer lain, mereka gak perlu install apa-apa lagi di komputernya. Semua kebutuhan udah nempel di project.

❌ kurang enak, kebutuhan project nempel di komputer, bukan di project

pnpm add -g vercel

✅ lebih enak, siapapun yang buka project ini langsung dapet Vercel-nya

pnpm add vercel

Habis install, kemungkinan bakal muncul peringatan vulnerabilities dan disuruh jalanin audit. Biasanya bisa diabaikan, karena umumnya itu false positive.

Tapi ada satu masalah: walaupun udah keinstall, perintah vercel belum bisa dipanggil langsung dari terminal. Yang bisa ngaksesnya cuma script di dalam package.json.

Jadi kita bikin scriptnya. Di file package.json, di bagian "scripts", tambahin script baru namanya "deploy" (jangan lupa koma setelah script sebelumnya):

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "deploy": "vercel --prod"
  }
}

Kenapa harus ada --prod? Karena kalau vercel dipanggil tanpa itu, kodenya diterbitin ke URL preview buat dites dulu sebelum benar-benar naik ke produksi. Fitur ini bagus, tapi buat sekarang kita gak butuh versi preview, kita mau langsung nongol.

Mulai sekarang, buat naikin project ke internet tinggal:

pnpm deploy

3. Deploy Pertama Kali

Pertama kali deploy, Vercel bakal nanya beberapa hal buat nyambungin ke akun kamu dan nyiapin project-nya. Ini langkah-langkahnya:

  1. Jalanin pnpm deploy di terminal.
  2. Pilih cara masuk. Kalau tadi kamu daftar pakai email, pakai tombol panah atas-bawah buat milih Continue with Email, terus tekan Enter.
  3. Tulis alamat emailmu. Vercel bakal ngirim email lagi, klik link-nya, dan terminal bakal otomatis lanjut sendiri ke langkah berikutnya.
  4. Konfirmasi setup folder ini. Pilih Y, tekan Enter.
  5. Pilih scope atau team. Satu akun bisa punya banyak. Kalau baru daftar, biasanya cuma ada satu, tinggal Enter.
  6. Hubungkan ke project yang udah ada? Karena ini project baru, tulis n, tekan Enter.
  7. Nama project. Vercel bakal nebak sendiri, tapi bisa diganti sesukamu. Boleh huruf kecil, angka, dan tanda hubung. Tekan Enter.
  8. Ubah pengaturannya? Vercel udah otomatis ngedeteksi semuanya berkat file vite.config.js kita, jadi tulis n, tekan Enter.

Selesai. Website-nya mulai di-deploy. Tunggu satu-dua menit, terus Vercel bakal ngasih URL versi live-nya, dan URL itu otomatis kesalin ke clipboard. Tinggal tempel di browser, dan karyamu udah bisa diakses siapa aja di dunia.

Pengaturan Lanjutan

Buka dashboard Vercel dan pastiin kamu udah login. Di situ semua project kamu kelihatan.

Klik salah satu project, dan kamu bakal bisa lihat preview-nya, informasi soal build terakhir, ngatur preferensi deployment, ngecek error yang mungkin muncul, dan lain-lain.

Kamu bahkan bisa masang domain sendiri di situ, tapi itu di luar bahasan kita.

Soal Harga

Tunggu, ini semua gratis?

Iya dan nggak.

Kalau kamu cuma mau pamer eksperimen WebGL keren ke dunia tanpa niat komersial, paket gratisnya (namanya Hobby) itu udah lebih dari cukup. Kamu bisa bikin project sebanyak apapun dengan semua fitur yang barusan kita pakai.

Tapi kalau ada niat komersial, atau butuh fitur khusus kaya teams, proteksi password buat preview, firewall, dan sejenisnya, kamu butuh paket berbayar.

Dan yang penting diinget: paket Hobby punya batasan bandwidth dan waktu build. Artinya kalau website kamu tiba-tiba rame banget dikunjungi, atau kamu deploy kekencengan sampai berkali-kali sehari, kamu bakal dipaksa pindah ke paket berbayar.

Daftar lengkap paket dan harganya ada di vercel.com/pricing.

Bagikan!

Sekarang gak ada alasan lagi. Bagikan karyamu ke dunia, dan jangan lupa pakai tagar #threejsJourney di Twitter.

Ringkasan

  1. Jangan pernah upload seluruh folder project ke hosting. Folder node_modules/ dan konfigurasi Vite itu buat komputer kita waktu ngoding, browser gak ngerti apa-apa soal itu.
  2. pnpm build mengubah project jadi file HTML, CSS, JS, dan aset biasa yang ditaruh di folder /dist/. Isi folder itulah yang diupload kalau kamu pakai hosting tradisional.
  3. Folder /dist/ gak update sendiri. Tiap ada perubahan, jalanin pnpm build lagi sebelum upload.
  4. Vercel itu hosting modern dengan continuous integration, gampang di-setup dan cocok buat project sederhana kaya punya kita. Alternatifnya ada Netlify dan GitHub Pages.
  5. Daftar pakai akun Git (GitHub/GitLab/Bitbucket) itu pilihan terbaik, karena Vercel bisa otomatis nge-update website tiap kamu push kode baru. Tapi lewat Email juga jalan kok.
  6. Install Vercel sebagai dependency project, bukan global, biar siapapun yang buka project ini gak perlu install apa-apa lagi.
  7. Perintah vercel gak bisa dipanggil langsung dari terminal kalau di-install di project. Harus dibungkus jadi script di package.json.
  8. vercel --prod langsung naik ke produksi, sedangkan tanpa --prod cuma naik ke URL preview buat dites dulu.
  9. Deploy pertama kali itu tanya-tanya banyak, tapi seterusnya cukup satu perintah pnpm deploy.
  10. Vercel otomatis ngedeteksi pengaturannya sendiri berkat file vite.config.js, jadi gak perlu diutak-atik.
  11. Paket Hobby itu gratis dan cukup buat pamer karya, tapi punya batasan bandwidth dan waktu build, dan gak boleh buat niat komersial.

Selesai sudah bab dasar-dasarnya! Bab selanjutnya kita masuk ke bab baru soal teknik klasik, dimulai dari Lights, biar kita gak cuma ngandelin matcap dan environment map lagi buat bikin objek kita kelihatan.

Tampilan Grafik

Tautan Balik