Situs Statis Kini Tetap Online Selama Dipublikasikan Ulang

Mempublikasikan ulang situs statis di Mythex dulu menghapus file yang sedang aktif lalu mengunggah build baru, sehingga selama proses unggah, sebagian pengunjung mendapat halaman 404 atau halaman yang skripnya hilang. Unggahan yang gagal bisa membuat situs kosong atau setengah baru. Sekarang build baru ditulis di atas yang lama, halaman diunggah terakhir, dan sisa file dibersihkan beberapa menit kemudian. Perbaikan kedua membuat publikasi ulang tampil dalam hitungan detik, bukan semenit, atau untuk file seperti logo, hingga sehari.

Bagaimana situs statis disajikan

Situs statis adalah situs yang hanya berupa file: halaman HTML, JavaScript, CSS, dan gambar. Saat Anda mempublikasikannya di Mythex, kami membangunnya, mengunggah hasilnya ke penyimpanan objek di dalam folder untuk situs Anda, lalu menyajikannya melalui jaringan edge, yakni server yang dekat dengan pengunjung dan mengambil file dari penyimpanan serta menyimpan salinannya untuk beberapa waktu. (Jika Anda baru mengenal ini, panduan kami tentang apa itu CDN menjelaskan idenya.)

Ada dua hal yang keliru: urutan perubahan file saat publikasi ulang, dan berapa lama salinan lama disimpan.

Masalah 1: unggahan mengosongkan situs lebih dulu

Publikasi ulang menghapus semua isi folder situs, lalu mengunggah build baru. Selama unggahan berlangsung, yang dalam tes lokal kami memakan 12 detik untuk situs 250 file, pengunjung yang permintaannya belum tersimpan di edge bisa mendapat 404, atau halaman HTML yang skriptnya mengembalikan 404.

Unggahan yang gagal lebih buruk. Folder sudah kosong, dan pada salah satu dari dua jalur unggah, index.html yang baru bisa mendarat sebelum file yang gagal. Publikasi yang dilaporkan gagal bisa meninggalkan situs setengah baru yang aktif.

Perbaikannya: tulis di atas, halaman terakhir, bersihkan belakangan

Jangan hapus lebih dulu. Build baru diunggah di atas yang lama.
Aset sebelum halaman. Sebuah halaman menyebutkan skrip dan gaya yang dibutuhkannya, jadi halaman diunggah terakhir. Sampai halaman baru mendarat, pengunjung mendapat halaman lama, yang menyebut aset lama, dan aset itu masih ada. Setelah halaman baru mendarat, aset baru yang disebutnya sudah berada di tempatnya.
Bersihkan sisa file belakangan. Sebelum unggahan, kami mencatat apa saja yang membentuk situs. Tiga menit setelah unggahan berhasil, apa pun dalam daftar itu yang tidak ditulis ulang oleh build baru akan dihapus. Tiga menit lebih lama daripada 60 detik yang bisa disimpan halaman di edge dan browser, sehingga pengunjung yang masih memegang halaman lama tetap bisa menemukan aset yang disebutkannya.
Jika ragu, jangan hapus apa pun. Jika daftar sebelum unggahan gagal diambil, tidak ada yang dibersihkan. File sisa tidak berbahaya, dan publikasi berikutnya akan membersihkannya. Menghapus tanpa tahu apa yang ada di sana adalah cara situs berakhir kosong.

Unggahan yang gagal sekarang membiarkan situs sebelumnya persis seperti semula.

Kami menguji ini dari ujung ke ujung secara lokal, memakai skrip unggah yang sebenarnya, rute unggah yang sebenarnya, dan penyajian penyimpanan, dengan pengunjung yang datang dengan cache edge yang dingin. Dengan kode lama, 55 dari 91 kunjungan rusak selama publikasi ulang dan 61 dari 92 selama publikasi yang gagal. Dengan kode baru, 0 yang rusak dari sekitar 3.500 kunjungan yang mencakup kedua jalur unggah, unggahan yang gagal, dan publikasi setelahnya, dan hanya file sisa yang dibersihkan.

Masalah 2: publikasi ulang butuh waktu terlalu lama untuk tampil

Bahkan saat unggahan berjalan lancar, perubahan lambat muncul. Edge menyimpan salinan halaman selama 60 detik dan salinan file lainnya selama sehari, dan memberi tahu browser untuk melakukan hal yang sama. File dengan nama tetap seperti logo.png, font, atau apa pun dari folder public/ bisa menampilkan versi lama hingga sehari setelah publikasi ulang.

Perbaikannya: salinan file berada di bawah build

Saat edge meminta API kami di mana sebuah situs berada, jawabannya sekarang menyertakan penanda build yang berubah setiap kali publikasi berhasil. Edge menyimpan salinannya di bawah penanda itu. Maka sebuah publikasi menjadi kumpulan kunci cache yang sepenuhnya baru segera setelah pencarian 30 detik di edge kedaluwarsa. Salinan lama tidak pernah ditemukan lagi, jadi edge bisa menyimpan salinan selama sehari tanpa pernah menyajikan salinan yang sudah lewat dari publikasi yang menggantikannya.

Browser mendapat dua aturan berbeda:

Output build yang di-hash, yaitu file seperti assets/index-CzLcxDO8.js yang namanya berubah setiap kali isinya berubah, disimpan selama setahun dan ditandai immutable. Di bawah nama itu, file tidak akan pernah basi.
Semua yang lain, yaitu halaman dan file dengan nama tetap seperti logo, ditandai no-cache, yang artinya “periksa dulu sebelum dipakai”. Jika tidak ada yang berubah, jawabannya adalah 304 Not Modified kecil tanpa isi, sekarang karena kami menghormati pemeriksaan If-None-Match dari browser.

Membedakan keduanya perlu hati-hati: file yang disalin dari public/assets/ mempertahankan nama aslinya, dan menyimpan assets/logo.png selama setahun akan mengunci logo lama selama setahun. Maka sebuah file hanya dihitung sebagai ter-hash jika berada di folder output build dan namanya memiliki segmen yang terlihat seperti hash, bukan kata biasa.

Secara lokal, halaman dan logo baru terlihat 6 detik setelah publikasi aktif. Sebelumnya, halaman butuh 60 detik dan logo sehari.

Dua perbaikan kecil di sepanjang jalan

Halaman kosong dari permintaan HEAD. Permintaan HEAD meminta header halaman tanpa isinya. Kami menyimpan respons kosong itu, sehingga pengunjung berikutnya ke halaman tersebut mendapat halaman kosong. Respons HEAD sekarang tidak lagi disimpan di cache.
Halaman nyata untuk “tidak ada apa-apa di sini”. Alamat tanpa aplikasi dulu menampilkan teks biasa “This published app is offline or the link was not found” dengan kode error 502. Sekarang alamat itu mendapat halaman yang layak, “There's no app here”, dengan status 404 dan tautan kembali ke Mythex untuk pemiliknya. Domain kustom yang tidak dikenal mendapat halaman yang sama.

Yang kami ambil dari ini

Urutan adalah bagian dari ketepatan. File yang sama yang diunggah dalam urutan berbeda menjadi perbedaan antara situs yang rusak dan situs yang berfungsi.
Hapus belakangan, dan hanya yang Anda tahu. Membersihkan dengan daftar yang diambil sebelum unggahan itu aman; mengosongkan folder dan berharap unggahan selesai tidak.
Cache berdasarkan versi, bukan waktu. Waktu kedaluwarsa adalah tebakan tentang kapan konten berubah. Kunci yang berubah mengikuti build adalah fakta.

Terkait: aplikasi yang sudah dipublikasikan kini tetap online saat Anda mempublikasikannya ulang. Info lebih lanjut tentang publikasi ada di dokumentasi.