Teknik One Million Checkboxes yang diskalakan hingga 650 juta centang

Mencentang 650.000.000 kotak centang: menghadapi popularitas yang tak terduga

26 Juni 2024, situs web One Million Checkboxes (OMCB) diluncurkan

• Situs dengan 1 juta kotak centang global, dan ketika sebuah kotak dicentang, perubahan langsung tercermin ke semua pengguna
• Dalam 30 menit setelah peluncuran, ribuan pengguna mencentang jutaan kotak centang
• Trafik datang dari Hacker News, /r/InternetIsBeautiful, Mastodon, Twitter, dan lainnya
• Juga diliput oleh Washington Post dan New York Times
• Pada hari pertama, lebih dari 50 juta kotak centang dicentang
• Hingga situs ditutup dua minggu kemudian, lebih dari 650 juta kotak centang telah dicentang

Arsitektur awal

• Status kotak centang disimpan sebagai 1 juta bit (125KB)
• Klien menggunakan bitset untuk merender kotak centang dan memberi tahu server tentang status centang
• Server menggunakan Redis untuk memperbarui bit dan menyiarkannya ke semua klien
• Konten statis disajikan melalui nginx, sementara server Flask menangani status bitset dan koneksi WebSocket
• Redis berperan sebagai penyimpanan status sekaligus message queue

Prinsip penskalaan

• Batas biaya: menghitung biaya secara matematis agar bisa menskalakan secara serverless tanpa bangkrut
• Menerima solusi jangka pendek: mengasumsikan popularitas situs hanya sementara dan memilih solusi yang cepat
• Menggunakan teknologi yang sederhana dan self-hosted: hanya menambahkan teknologi yang bisa dijalankan dan di-debug sendiri
• Mengejar kesenangan: memprioritaskan kesenangan dibanding uang
• Mempertahankan sifat global: menjaga status tetap global agar semua pengguna bisa langsung melihat perubahan

Hari pertama: popularitas meledak

• Dalam 30 menit, beban server melonjak tajam
• Menyalakan server tambahan untuk membagi beban
• Memperkenalkan pembaruan batch untuk mengatasi masalah koneksi Redis
• Meningkatkan instance Redis terkelola dari Digital Ocean

Tidak ada rencana semalaman

• Menyusun rencana sambil memamerkan game Pacman pengenalan wajah di kamp ITP
• Membawa iPad dan menyalakan server dari sana
• Mengembangkan aturan penamaan server sambil mengoperasikan 8 VM worker
• Mengurangi jumlah proses Flask dan memperbesar ukuran batch pembaruan untuk menurunkan beban

Masalah bandwidth

• Tidak mempertimbangkan harga bandwidth Digital Ocean
• Mengurangi frekuensi snapshot status dan memperkecil ukuran pembaruan
• Menggunakan utilitas tc untuk membatasi jumlah data yang dikirim per detik

Hari kedua: terus bertumbuh

• Situs sempat down karena validasi input tidak dilakukan dengan benar
• Menambahkan replika Redis untuk membagi beban
• Proses Flask terus crash, sehingga dibuat skrip restart otomatis

Masalah pembaruan lama

• Terjadi masalah ketika klien menerapkan pembaruan lama sehingga status tampil salah
• Menambahkan timestamp untuk menjamin urutan pembaruan

Ditulis ulang dengan Go

• Backend ditulis ulang ke Go bersama seorang teman performance engineer
• Kinerja meningkat secara signifikan
• Serangan DDOS ditangkal melalui CloudFlare

Penutupan situs

• Diubah agar kotak centang membeku jika tidak segera di-uncheck
• Menggunakan Redis untuk mengelola status beku
• Situs ditutup setelah dua minggu

Hal yang dipelajari

• Ini adalah pengalaman kedua merilis server dengan backend yang "nyata" ke internet publik
• Memilih solusi jangka pendek ternyata merupakan keputusan yang baik
• Kembali menegaskan betapa kuatnya Redis dan nginx
• Menegaskan adanya hasrat orang-orang terhadap situs tempat mereka bisa berinteraksi secara anonim

Ringkasan GN⁺

• Artikel ini membahas masalah teknis yang muncul karena popularitas situs web yang tak terduga serta proses penyelesaiannya
• Menunjukkan bahwa arsitektur sederhana dengan Redis dan nginx pun dapat menangani trafik berskala besar
• Menjelaskan cara menyelesaikan masalah dengan cepat dan menstabilkan situs melalui solusi jangka pendek
• Membahas berbagai tantangan teknis seperti penulisan ulang ke Go dan pertahanan DDOS melalui CloudFlare
• Proyek serupa dengan fungsi sebanding antara lain proyek kolaboratif skala besar seperti /r/Place milik Reddit

[GN⁺]

Komentar Hacker News

• Bisa belajar banyak pelajaran dan pengetahuan historis

  • Membahas segala jenis gangguan dan titik kegagalan, tetapi masalah ruang penyimpanan tidak disebutkan
  • Saya tidak tahu Redis bisa menggunakan Lua, dan jadi tertarik untuk menggunakannya sebagai state pengganti
  • Masalah bandwidth layanan cloud adalah salah satu keluhan terbesar karena tidak ada batas keras untuk menghindari tagihan berlebih

• Tulisan yang luar biasa! Selamat juga untuk situs webnya, tetapi bagian yang paling patut dibanggakan adalah tulisannya sendiri

• Membangun situs ini dalam dua hari adalah pilihan yang bagus

  • Ini pelajaran penting yang perlu dipelajari para engineer di awal karier
  • Masalah scaling bukanlah masalah sampai benar-benar menjadi masalah
  • Pada titik itu, itu adalah masalah yang bagus, dan tidak sesulit yang dibayangkan untuk diselesaikan

• Proyek terkait terbaru:

  • "One Million Checkboxes" - tautan - Juni 2024 (305 komentar)

• Proyek yang menarik

  • Enam tahun lalu saya merilis aplikasi edit piksel kolaboratif bernama Pixmap di Android
  • Menggunakan queue untuk menerapkan setiap event ke gambar PNG, dan klien memuat PNG awal saat terhubung
  • Setiap event penggambaran piksel dikirim ke klien sebagai objek kecil
  • Saat initial load, kompresi gambar dimanfaatkan, dan change set-nya sangat kecil
  • Karena setiap event disimpan di log, gambar bisa "di-rewind"
  • Tautan demo

• Tulisan yang hebat - saya penasaran berapa biayanya

• Keyakinan bahwa orang-orang merindukan interaksi anonim yang terbatas terasa terkonfirmasi

• Sebagai pemula backend, saya penasaran apakah ada arsitektur alternatif yang lebih sederhana untuk proyek ini

  • Saya berharap ada cara yang lebih mudah untuk meng-host satu juta state dan menyinkronkannya dengan klien
  • Beberapa solusi dalam tulisan itu sulit dipahami
  • Pujian untuk penulisnya - proyek ini luar biasa

• Keren!

  • Saya penasaran apakah tulisan berikutnya akan berupa analisis statistik checkbox
  • Saya ingat sedih karena checkbox yang saya pilih hampir langsung dihapus centangnya

• Saya penasaran apakah game ini masih live

  • Saat saya membuka One Million Checkboxes, tidak ada satu pun yang dicentang, dan di konsol JS hanya terlihat pesan berikut
  • {"total":0,"totalGold":0,"totalRed":0,"totalGreen":0,"totalPurple":0,"totalOrange":0,"recentlyChecked":false}