Statik Siteler Artık Yeniden Yayınlanırken de Ayakta Kalıyor

Mythex'te statik bir siteyi yeniden yayınlamak, eskiden yeni derlemeyi yüklemeden önce canlı dosyaları siliyordu. Bu yüzden yükleme sürdüğü sürece bazı ziyaretçiler 404 sayfası ya da betikleri eksik bir sayfa görüyordu. Başarısız bir yükleme siteyi boş ya da yarım yeni bırakabiliyordu. Artık yeni derleme eskisinin üzerine yazılıyor, sayfalar en son yazılıyor ve artıklar birkaç dakika sonra temizleniyor. İkinci bir düzeltme, yeniden yayınlamanın bir dakika yerine saniyeler içinde görünmesini sağlıyor. Logo gibi dosyalar için ise bu en fazla bir güne kadar sürebiliyor.

Statik bir site nasıl sunulur?

Statik site, yalnızca dosyalardan oluşan bir sitedir: HTML sayfaları, JavaScript, CSS, görseller. Mythex'te bir tane yayınladığınızda biz derlemeyi yapar, çıktıyı sitenizin klasörü altında nesne depolamaya yükleriz ve bir kenar ağı üzerinden sunarız. Kenar ağı, ziyaretçilere yakın sunuculardır; dosyaları depodan alır ve bir süre kopyalarını saklar. (Bu konuda yeniyseniz, CDN nedir rehberimiz fikri anlatır.)

İki şey yanlıştı: bir yeniden yayınlamanın dosyaları değiştirme sırası ve eski kopyaların ne kadar süreyle tutulduğu.

Sorun 1: Yükleme siteyi önce boşaltıyordu

Yeniden yayınlama, sitenin klasöründeki her şeyi siliyor, sonra yeni derlemeyi yüklüyordu. Yüklemenin sürdüğü süre boyunca (yerel testimizde 250 dosyalı bir site için 12 saniye) kenarda önbelleğe alınmamış bir istek yapan ziyaretçi 404 alıyor ya da betikleri 404 dönen bir HTML sayfası görüyordu.

Başarısız bir yükleme daha kötüydü. Klasör zaten boşalmıştı ve iki yükleme yolundan birinde yeni index.html, başarısız olan dosyadan önce yerleşebiliyordu. Başarısız bildirilen bir yayın, yarım yeni bir siteyi canlıda bırakabiliyordu.

Çözüm: Üzerine yaz, sayfaları sonda yaz, sonra temizle

Önce silmeyin. Yeni derleme eskisinin üzerine yüklenir.
Varlıklar sayfalardan önce. Bir sayfa ihtiyaç duyduğu betikleri ve stilleri adlandırır, bu yüzden sayfalar en son yüklenir. Yeni sayfalar gelene kadar ziyaretçi eski sayfayı alır; bu sayfa eski varlıkları adlandırır ve bunlar hâlâ oradadır. Yeni sayfalar geldiğinde, adlandırdıkları yeni varlıklar zaten yerindedir.
Artıkları sonra kaldırın. Yüklemeden önce sitenin neden oluştuğunu listeleriz. Başarılı bir yüklemeden üç dakika sonra, bu listedeki ve yeni derlemenin yeniden yazmadığı her şey silinir. Üç dakika, bir sayfanın kenarda ve tarayıcıda önbelleğe alınabileceği 60 saniyeden daha uzundur. Böylece hâlâ eski sayfayı tutan bir ziyaretçi, sayfanın adlandırdığı varlıkları bulabilir.
Emin değilseniz, hiçbir şey silmeyin. Yüklemeden önceki listeleme başarısız olursa hiçbir şey budanmaz. Artık dosyalar zararsızdır ve bir sonraki yayın onları temizler. Orada ne olduğunu bilmeden silmek, sitenin boşalmasının yoludur.

Başarısız bir yükleme artık önceki siteyi tam olarak olduğu gibi bırakır.

Bunu uçtan uca yerelde test ettik: gerçek yükleme betiğini, gerçek yükleme rotasını ve depo sunumunu kullanarak, kenar önbelleği soğukken gelen ziyaretçilerle. Eski kodla, bir yeniden yayınlama sırasında 91 ziyaretin 55'i bozuldu, başarısız bir yayında ise 92 ziyaretin 61'i. Yeni kodla, iki yükleme yolunu, bir başarısız yüklemeyi ve ardından gelen yayını kapsayan yaklaşık 3.500 ziyarette 0 bozuk ziyaret oldu ve tam olarak artık dosyalar budandı.

Sorun 2: Yeniden yayın görünmesi çok uzun sürüyordu

Yükleme sorunsuz olduğunda bile değişikliklerin görünmesi yavaştı. Kenar bir sayfanın kopyasını 60 saniye, diğer her dosyanın kopyasını bir gün tutuyor ve tarayıcılara da aynısını söylüyordu. logo.png, bir font ya da bir public/ klasöründen gelen her şey gibi sabit adlı dosyalar, yeniden yayından sonra bir güne kadar eski sürümü gösterebiliyordu.

Çözüm: Derlemeye bağlı dosya kopyaları

Kenar, bir sitenin nerede olduğunu API'mize sorduğunda, yanıt artık her yayın yerleştiğinde değişen bir derleme işareti içeriyor. Kenar kopyalarını bu işaretin altında saklıyor. Bu nedenle, kenarın 30 saniyelik arama süresi dolduğunda bir yayın tamamen yeni bir önbellek anahtarı kümesi olur. Eski kopyalar artık hiç bulunmaz. Bu sayede kenar, bir günlük kopyaları tutabilir ve onları değiştiren yayından sonra asla sunmaz.

Tarayıcılar iki farklı kural alır:

Karmalı derleme çıktısı: İçeriği değiştiğinde adı da değişen assets/index-CzLcxDO8.js gibi dosyalar bir yıl boyunca önbelleğe alınır ve değişmez olarak işaretlenir. Bu adla asla eski olamazlar.
Diğer her şey: Sayfalar ve logo gibi sabit adlı dosyalar no-cache olarak işaretlenir; bu, "kullanmadan önce kontrol et" demektir. Hiçbir şey değişmediyse, artık tarayıcının If-None-Match kontrolüne uyduğumuz için yanıt gövdesiz, küçük bir 304 Not Modified olur.

İkisini ayırt etmek dikkat ister: public/assets/ içinden kopyalanan bir dosya kendi adını korur ve assets/logo.png dosyasını bir yıl önbelleğe almak eski logoyu bir yıl boyunca sabitlerdi. Bu yüzden bir dosya yalnızca derleme çıktısı klasöründeyse ve adında sıradan bir kelime değil, bir karma gibi görünen bir parça varsa karmalı sayılır.

Yerelde yeni sayfa ve logo, yayın canlıya çıktıktan 6 saniye sonra görünür oldu. Önce sayfa için 60 saniye, logo için bir gündü.

Yol boyunca yapılan iki küçük düzeltme

HEAD isteklerinden boş sayfalar. Bir HEAD isteği, bir sayfanın gövdesi olmadan başlıklarını ister. Bu boş yanıtları önbelleğe alıyorduk, bu yüzden o sayfaya gelen bir sonraki ziyaretçi boş bir sayfa görüyordu. HEAD yanıtları artık önbelleğe alınmıyor.
"Burada bir şey yok" için gerçek bir sayfa. Hiç uygulaması olmayan bir adres, 502 hata koduyla düz metin bir "Bu yayınlanmış uygulama çevrimdışı veya bağlantı bulunamadı" yazısı alıyordu. Artık sahibi için Mythex'e geri dönüş bağlantısı olan, 404 durumlu, "Burada bir uygulama yok" yazan düzgün bir sayfa alıyor. Bilinmeyen özel alan adları da aynı sayfayı alıyor.

Bundan çıkardıklarımız

Sıra, doğruluğun bir parçasıdır. Aynı dosyalar farklı bir sırayla yüklendiğinde, bozuk bir site ile çalışan bir site arasındaki fark budur.
Geç silin ve yalnızca bildiklerinizi silin. Yüklemeden önce alınmış bir listeyle budamak güvenlidir; bir klasörü boşaltıp yüklemenin bitmesini ummak güvenli değildir.
Zamana göre değil, sürüme göre önbelleğe alın. Son kullanma süreleri, içeriğin ne zaman değiştiğine dair bir tahmindir. Derlemeyle değişen bir anahtar ise bir gerçektir.

İlgili: yayınladığınız uygulama artık yeniden yayınlarken de ayakta kalıyor. Yayınlama hakkında daha fazlası için dokümanlara bakın.