Perkembangan teknologi bernama komputer semakin canggih. Jika dulu dengan 4KB NASA dapat menerbangkan orang ke bulan, sekarang dengan RAM 16GB para pengembang di perusahaan Bank modern dapat menjalankan JVM tanpa khawatir akan java.lang.OutOfMemoryError: Java heap space.

Tumpukan teknologi yang dipilih pun beragam.

Ada geng boring technology yang relatif menggunakan LAMP Stack, dan ada geng bleeding edge yang menggunakan Container, Envoy, MongoDB, dan Rust.

Terlepas dari tumpukan teknologi apa saja yang dipilih—dan program apa yang dibuat—disini kita akan membahas satu hal: Tentang bagaimana para pengrajin kayu menggunakan kampak untuk menebang pohon.

Alias, bagaimana seorang pemrogram menggunakan komputer untuk membuat program.

RUN EVERYTHING IN CONTAINER

Literally everything.

Dari basis data, backend, frontend, dan juga, curl?

Teknologi yang menjalankan aplikasi dalam bentuk container yang paling populer adalah Docker. Docker memudahkan pengembang untuk menjalankan program tanpa perlu khawatir akan sistem operasi yang dipakai, dependensi yang digunakan, dan tanpa perlu bingung bagaimana melihat log setelah sudo systemctl start.

Docker (CLI) berantung dengan Docker Daemon, sebuah program (layanan) yang berjalan di belakang yang mengurus hal-hal terkait interaksi dengan Docker.

Seperti, jika kamu ingin melihat log dari container 8c83b0a9a761, maka ketika kamu menjalankan docker logs -f 8c83b0a9a761 Docker CLI akan berbicara dengan Docker Daemon untuk bisa menampilkan log dari container yang memiliki id tersebut.

Yang berarti, ada sebuah proses yang berjalan terus menerus yang pastinya menggunakan sumber daya dari komputer kita.

Docker menjadi saingan baru dari Chrome dalam memakan RAM.

Belum lagi ditambah aplikasi-aplikasi lain yang berjalan yang menggunakan Chromium juga, seperti Visual Studio Code; Hyper, Slack, Discord, Postman, Notion, dan masih banyak lagi yang ada di dock/taskbar kalian.

Tapi bukankah katanya pengguna hanya peduli dengan fitur, bukan?

Tulisan ini bertujuan untuk memindahkan beberapa beban yang ada di komputer kamu ke cloud komputer orang lain, remote server. Entah mesin virtual ataupun bare metal, intinya adalah kita akan menggunakan komputer yang diakses secara remote.

Jika kamu belum memiliki VPS (Virtual Private Server/server virtual pribadi), silahkan sewa di Linode dengan biaya paling minimal $5/bulan lewat link ini untuk bantu kita bayar server!

Yang akan dibuat

Disini kita akan membuat workspace yang berada di remote server namun dengan rasa local. Pemandangan dari luar nya adalah seperti ini:

Silahkan cek sendiri url tersebut (jika optimis)

Ya, itu adalah tampilan seperti Visual Studio Code yang berjalan di server dan diakses via browser.

Disini kita akan membahas 3 hal utama:

  • Mengatur server feels like home, anywhere
  • Mengatur VPN di server tanpa ribet
  • Mengatur VSCode berjalan di server (literally di server)

Mari kita mulai petualangannya!

Mengatur server feels like home, anywhere

Ini udah banyak tutorial yang bertebaran, intinya disini silahkan atur-atur sesuka dan sebutuh kalian. Jika butuh inspirasi, silahkan buka berkas bootstrap saya.

Jika belum ada inspirasi, gue akan coba bantu.

Pertama, install yadm. Ini berguna untuk mengatur konfigurasi-konfigurasi yang kalian punya dengan gaya version control: Berkas-berkas dilacak menggunakan program bernama git.

Jika sudah memasang yadm, silahkan tambahkan konfigurasi-konfigurasi yang kalian punya ke repositori yadm.

Apa saja yang perlu ditambahkan? Hmm... .zshrc, .bashrc, .tmux.conf, .gitconfig, dkk? Yang sekiranya sering kamu gunakan bila lebih sering menggunakan terminal.

Jika sudah, silahkan push ke remote repository yang nantinya akan di clone di remote server kamu.

Kedua, misal, kamu menggunakan neovim. Sedangkan di remote server kita belum ada program tersebut, kan? Ini ada dua pilihannya: Melakukannya instalasi secara manual atau membuat khusus untuk mengautomasi pekerjaan tersebut.

bootstrap file di yadm

Kalau saya pilih yang ke 2, membuat berkas bootstrap, memindahkan ~/.config/yadm/bootstrap ke ~/.yadm, lalu tinggal jalankan sudo yadm bootstrap yang sebenarnya hanya menjalankan apt, curl, dpkg, dsb.

Setelah selesai, seharusnya servermu sekarang sudah menjadi seperti komputer yang kamu biasa pakai deh!

Mengatur VPN di server tanpa ribet

Ini penting, karena siapa juga yang ingin komputernya diakses oleh orang lain?

Terlebih ketika kita terhubung dengan jaringan internet, siapapun yang terhubung ke jaringan tersebut dapat mengakses komputer kamu, meskipun hanya di port 80 ataupun 443.

Untuk mengakses remote server kita, biasanya menggunakan program bernama ssh atau Secure SHell yang menggunakan port 22 by design. Port tersebut by default terbuka kepada siapapun yang terhubung ke internet, dan hampir semua orang sudah tau itu.

Pengamanan terbaik yang bisa kamu lakukan adalah menolak akses ke port tersebut bila tidak memiliki public key.

Tapi ada lagi pendekatan lain yang bisa kamu lakukan: Menolak akses dari jaringan publik (internet) dengan cara hanya memperbolehkan akses melalui jaringan pribadi.

Ya, VPN atau Virtual Private Network.

Kita bisa menggunakan Wireguard, atau alternatif lain yang sesuai dengan selera kamu. Tapi disini kita akan menggunakan Tailscale, karena sesuai tagline nya: tanpa ribet.

Tailscale menggunakan Wireguard juga dalam teknologinya. Karena Wireguard menggunakan protokol UDP daripada TCP, koneksi secara teori dapat menjadi lebih stabil selain karena tidak ada handshake juga karena UDP tidak terlalu ketat dalam kejaminan paket yang dikirim dan diterima.

Dan sebagaimana penerapan VPN kebanyakan, data/paket yang dikirim dan diterima dalam bentuk ter-enkripsi dari ujung ke ujung, jadi tidak perlu khawatir akan orang gabut yang lagi merhatiin lalu lintas di jaringanmu.

Okaayy cara memasang Tailscale relatif sederhana—If you're Tailscale employee, tell your company to pay me, okay?—pertama daftar akun, kedua pasang Tailscale di setiap komputer yang kamu punya, ketiga, jalankan Tailscale nya.

Kamu akan mendapatkan alamat IP pribadi untuk setiap mesin yang terhubung ke akun Tailscale kamu. Nah, kamu bisa menggunakan IP tersebut sekarang, yang misal bila IP server kamu sebelumnya adalah 172.104.167.90 dan IP dari Tailscale nya adalah 100.96.111.97, maka lakukan ssh ke 100.96.111.97 daripada menggunakan yang 172.104.167.90.

IP yang diberikan oleh Tailscale

Jika kamu menggunakan ufw atau Uncomplicated Firewall (HARUS), silahkan tolak semua koneksi selain menuju port 80 dan 443 yang tidak berada di jaringan Tailscale.

Yang sederhananya, buat koneksi SSH hanya dapat dilakukan melalui jaringan pribadi Tailscale yang ter-asosiasi dengan akunmu (atau akun organisasimu).

Nantinya, jika di server kamu menjalankan yarn dev yang berjalan di port 3000, kamu tidak perlu lagi capek-capek SSH dengan port forwarding karena port tersebut dapat diakses di jaringan pribadi dengan port 3000, bukan di jaringan internet.

Next.js di development (yang biasa diakses melalui localhost:3000)

Gambar diatas adalah contoh menjalankan Next.js via next dev yang berjalan di remote server. Tidak perlu port forwarding, karena tidak alamat tersebut dapat diakses di jaringan pribadi.

Dan tidak perlu terlalu khawatir akan keamanan, karena jaringan tersebut tidak berada di jaringan internet :))

Tailscale ini cocok baik untuk kebutuhan personal ataupun bisnis.

Alternatif dari Tailscale adalah Google Beyondcorp, Cloudflare Access, atau apapun itu yang menggunakan model keamanan Zero Trust.

Mengatur VSCode berjalan di server (literally di server)

Sebelumnya, kita bisa menggunakan VSCode "seperti" di server menggunakan kumpulan ekstensi bernama "Remote Development" yang closed-source.

Sederhananya, ekstensi tersebut membuat koneksi SSH ke server, lalu berkomunikasi dengan apa yang ada di server seperti membuat proses melalui terminal, memodifikasi berkas, menjalankan debugger, dsb.

Tapi tetap, kamu harus menjalankan VSCode di klien kamu.

Pertanyaannya, bagaimana bila kita bisa menggunakan VSCode full di server dan dapat diakses melalui peramban?

Kita akan menggunakan project bernama code-server yang berlisensi MIT!

Pengalamannya hampir serupa seperti menggunakan GitHub Codespaces, CodeSandbox, dsb bedanya ini berjalan di server kita sendiri!

Mengapa kita menggunakan VSCode (ehm bisa gak sih kita sebut dengan Monaco Editor aja?) disini karena sebagai frontend engineer™ yang kita butuhkan sebenarnya hanyalah peramban, bukan?

Oke oke, mari kita pasang si code-server.

Kalau boleh saran, jalankan si code-server nya langsung di host, jangan dalam container. Selain karena harus setting-setting lagi, juga karena overhead aja.

Pertama, jalankan perintah ini:

curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run

Dari keluaran yang muncul dilayar, silahkan jalankan satu-satu.

Pendekatan diatas cocok untuk orang yang skeptis, kalau kamu orangnya yolo dan gampang percaya, silahkan gunakan perintah ini aja:

curl -fsSL https://code-server.dev/install.sh | sh

Oke setelah itu—untuk cek ombak—silahkan jalankan code-server lalu berhentikan proses. Proses tersebut buat membuat konfigurasi dasar untuk menjalankan code-server.

Sekarang kita akan buat self-signed certificate menggunakan mkcert.dev.

Silahkan pasang dulu mkcert diatas jika belum, di remote server dan di komputer lokal.

Jika sudah, kita buat self-signed certificate di remote server kita, dengan alamat IP yang diberikan Tailscale sebagai hostname nya.

Misal kita sedang berada di home, biar enak kita buat direktori certs di home via mkdir -p certs, lalu jalankan perintah ini di direktori certs:

mkcert <ip_dari_tailscale>

Setelah itu, kita ambil Root CA di remote server ke mesin kita untuk memasangnya.

Pertama, ambil dulu lokasi dimana si mkcert nyimpen si Root CA:

mkcert -CAROOT

Nah, klo di Ubuntu biasanya di ~/.local/share/mkcert, jika sudah dapat, kita salin direktori tersebut ke komputer lokal kita menggunakan ftp scp.

scp -r <user>@<ip_tailscale>:~/.local/share/mkcert $(pwd)

Jika sudah, kita pasang Root CA nya di komputer kita:

CAROOT=$(pwd)/mkcert -install

Sekarang, kita kembali ke remote server untuk dapat menjalankan code-server dengan mode TLS. Pertama, sesuaikan konfigurasi code-server seperti ini:

bind-addr: 0.0.0.0:8080
auth: password
password: <redacted>
cert: certs/<ip_tailscale>.pem
cert-key: certs/<ip_tailscale>-key.pem

Setelah itu kita jalankan dengan mode daemon tanpa membuat service, like a gentleman:

code-server --disable-telemetry > /dev/null 2>&1 &

Akses di peramban dengan alamat https://<ip_tailscale>:8080, seharusnya sekarang sudah bisa mengakses VSCode Monaco Editor di peramban kamu, bukan di komputer lokalmu!

Mengapa VSCode bukan Vim?

Karena gue kagak mau buka terminal di lokal HAHAHA.

Oke oke serius, alasan pertamanya adalah karena tim gue di kantor kebanyakan pakai VScode, jadi, ya, why not biar seragam.

Kedua, ini bukan Microsoft Visual Studio Code™ tapi code-server; Bukan di bangun diatas teknologi Open Source tapi memang ber-lisensi MIT, dan juga bukan aplikasi yang berjalan diatas Electron.

Ketiga, getting job done. Bagaimanapun ini hanyalah tentang tools.

Terakhir, key binding di code-server akan bentrok dengan yang ada di peramban.

Beberapa key binding seperti CTRL+{1,2,3,n} berjalan untuk pindah tab di VSCode, command+p, ctrl+`, dsb berjalan secara normal, tapi ada satu yang rada sampah: Command+w untuk menutup berkas, bukan menutup tab di peramban.

Padahal itu krusial banget, terlebih gue pakai Sublime Key Binding yang pindah tab pakai command+{1,2,3}, bukan CTRL.

Tapi disini gue pakai ekstensi VSCodeVim, jadi workflow keyboard-driven gue yang pakai command daripada shortcut tidak berubah, seperti gt, :tabe, hjkl, aiueo mejikuhibiniu tetap terpakai termasuk :q untuk close tab!

Vim is not going anywhere 😉

Mengapa pakai remote server?

Selain karena efisiensi, juga untuk isolasi!

Di tempat kerja gue (We're hiring!) setiap pengembang dapet jatah untuk menggunakan devbox yakni EC2 nya AWS. Ini cocok untuk yang pakai laptop kentang kayak gue yang kadang menjalankan Jest harus 3x trigger biar bisa passed.

Dan juga, berguna untuk membuat komputer pribadi gue terpisah dari kebutuhan kantor. Dari npm registry, docker registry, git config, docker containers, GPG & SSH key, sumber kode, dsb.

Dan yang paling pasti: Memindahkan beban.

Sekarang kalau gue kerja, cuma buka peramban khusus kantor (Brave).

Tinggal buka semua bookmark (Klik kanan Bookmark bar > Open All), selesai.

Tidak perlu buka VSCode, Hyper, Discord, Basecamp, dan aplikasi apapun itu yang seharusnya hanya tinggal di peramban. Command+tab gue cuma ke Finder dan Brave, yang litereli tidak pindah kemana-mana.

Di remote server gue bisa jalanin docker container sebanyak yang gue mau, dari postgres; mariadb, flask, nginx, blockchain, tensorflow, minecraft server, apapun lah pokoknya tanpa perlu khawatir jadi tidak responsif ataupun sampe ssd laptop meledak.

Dan juga, proses komputasi relatif lebih cepat (tergantung spek dong pastinya) seperti untuk jalanin jest; build project, compile2, mining bitcoin, dsb karena... no graphics make your brain should be more more more run faster, right?

Tantangan

Pertama, pastinya di keamanan.

Kita harus percaya dengan penyedia server yang kita gunakan tidak melakukan hal-hal kriminil seperti mencuri data kita langsung dari data center mereka yang kemungkinannya mungkin sangat kecil.

Namun kemungkinan tetaplah kemungkinan, bukan?

Meskipun Full Disc Encryption mungkin bisa sedikit membantu, tapi tetap, kita menggunakan server milik orang lain, kita hanya menyewa nya. Mereka memiliki hak "kepemilikan" meskipun secara hukum mungkin itu tidak bisa dibenarkan untuk bertindak sesuka mereka.

Gak tau ya, gue cuma coder bukan lawyer.

Jika kamu paranoid, silahkan gunakan server kamu sendiri di rumah, yang hanya bisa diakses di jaringanmu, atau menggunakan Tailscale agar bisa diakses juga darimana saja hahaha.

Oke oke, kedua, kita bergantung penuh dengan koneksi internet.

Jika tiba-tiba sedang down, baik isp mereka; sedang maintance data center, dsb, maka, ya, kita tidak bisa apa-apa selain menunggu. Maka dari itu harus pintar-pintar memilih VPS provider yang menjanjikan SLA 100% Uptime.

Dan tentu saja dengan koneksi internet kita juga!

Memangnya di tahun 2020, pengembang mana sih yang tidak bergantung dengan jaringan internet?

Terakhir, say goodbye to desktop environment. Unless?

Harusnya kita tidak membutuhkan Desktop Environment lagi karena... It's server, right?

Kan lucu klo buka browser di remote server via browser di local via protokol rfb udah kek pakai rabb.it.

Penutup

Penggunaan personal disini biasanya terkait side project(s) dan belajar-belajar sesuatu yang baru, dan alur kerja gue seringnya melalui terminal. Gue ada server yang khusus jalanin db karena kalau sekedar yarn dev dan bermain dengan Go gue rasa komputer gue masih kuat dan gue cuma ssh + forward port yang sekarang sudah tidak perlu karena sudah pakai Tailscale, yeay!

Penggunaan non-personal disini yakni terkait kerjaan profesional. Jika sebelumnya gue tinggal clone repo dotfiles gue, buka terminal (vim) dan browser, terus bekerja, sekarang tinggal buka browser dan buka tab menuju code-server gue.

Semenjak workflow pindah ke remote server ini merasanya sangat membantu.

Baterai laptop gue jadi makin lama habis karena gak menjalankan docker dan berbagai aplikasi electron, memori laptop gue gak banyak makan sumber daya karena bebannya gue pindahin ke komputer orang, dan disk space gue jadi lumayan aman karena sekali lagi, gue pindahin ke komputer orang hahaha.

Jika ada pertanyaan ataupun umpan balik, gue sangat terbuka! Silahkan bales di twit (harusnya tulisan ini di twit), di dm twitter (klo ini tar dibaca banyak admin), atau bisa dm gue langsung di Discord yang kadang slowres.

Terima kasih sudah menyempatkan waktu dan selamat berakhir pekan!