Statické stránky zostávajú online aj počas opätovného publikovania

Opätovné publikovanie statickej stránky na Mythex predtým najprv zmazalo živé súbory a až potom nahralo nový build, takže počas nahrávania niektorí návštevníci dostali stránku 404 alebo stránku, ktorej chýbali skripty. Neúspešné nahratie mohlo nechať stránku prázdnu alebo len napoly novú. Teraz sa nový build zapíše cez starý, stránky sa nahrajú ako posledné a zvyšky sa odstránia o pár minút neskôr. Druhá oprava zaisťuje, že sa opätovné publikovanie zobrazí do niekoľkých sekúnd namiesto minúty — alebo, pri súboroch ako logo, až do jedného dňa.

Ako sa statická stránka podáva

Statická stránka je len súbory: HTML stránky, JavaScript, CSS a obrázky. Keď ju publikujete na Mythex, zostavíme ju, výstup nahráme do objektového úložiska do priečinka pre vašu stránku a podávame ju cez edge sieť — servery blízko návštevníkov, ktoré súbory načítavajú z úložiska a na istý čas si ich ukladajú. (Ak ste v tom noví, náš návod o tom, čo je CDN, vysvetľuje túto myšlienku.)

Boli nesprávne dve veci: poradie, v akom opätovné publikovanie menilo súbory, a to, ako dlho sa uchovávali staré kópie.

Problém 1: nahrávanie stránku najprv vyprázdnilo

Opätovné publikovanie zmazalo všetko v priečinku stránky a až potom nahralo nový build. Počas celého nahrávania — 12 sekúnd pri stránke s 250 súbormi v našom lokálnom teste — dostal návštevník, ktorého požiadavka ešte nebola uložená na edge, chybu 404 alebo HTML stránku, ktorej skripty vracali 404.

Neúspešné nahratie bolo horšie. Priečinok už bol prázdny a na jednej z dvoch ciest nahrávania mohol nový index.html pristáť skôr než súbor, ktorý zlyhal. Publikovanie nahlásené ako neúspešné tak mohlo nechať živú napoly novú stránku.

Oprava: zapisovať cez starý, stránky nahrať posledné, zvyšky odstrániť neskôr

Nemazať najprv. Nový build sa nahrá naprieč starým.
Assety pred stránkami. Stránka pomenúva skripty a štýly, ktoré potrebuje, preto sa stránky nahrávajú ako posledné. Kým nové stránky nepristanú, návštevník dostane starú stránku, ktorá pomenúva staré assety, a tie stále existujú. Keď nové stránky pristanú, nové assety, ktoré pomenúvajú, sú už na mieste.
Zvyšky odstrániť neskôr. Pred nahrávaním zistíme, z čoho sa stránka skladá. Tri minúty po úspešnom nahratí sa zmaže všetko z tohto zoznamu, čo nový build neprepísal. Tri minúty sú dlhšie než 60 sekúnd, počas ktorých môže byť stránka uložená na edge a v prehliadači, takže návštevník, ktorý stále drží starú stránku, nájde assety, ktoré pomenúva.
Ak si nie ste istí, nemažte nič. Ak výpis pred nahrávaním zlyhá, nič sa neorezáva. Zvyšné súbory nie sú škodlivé a ďalšie publikovanie ich vyčistí. Mazanie bez toho, aby sme vedeli, čo tam bolo, je spôsob, ako stránka skončí prázdna.

Neúspešné nahratie teraz nechá predchádzajúcu stránku presne taku, aká bola.

Testovali sme to od začiatku do konca lokálne, pomocou nášho skutočného skriptu nahrávania, skutočnej trasy nahrávania a obsluhy súborov z úložiska, a s návštevníkmi so studenou cache na edge. Pri starom kóde bolo 55 z 91 návštev pokazených počas opätovného publikovania a 61 z 92 počas neúspešného. Pri novom kóde bolo pokazených 0 z približne 3 500 návštev, ktoré pokrývali obe cesty nahrávania, neúspešné nahratie a publikovanie po ňom — a presne tie zvyškové súbory sa odstránili.

Problém 2: opätovné publikovanie sa zobrazovalo príliš dlho

Aj keď nahrávanie prebehlo v poriadku, zmeny sa zobrazovali pomaly. Edge uchovával kópiu stránky 60 sekúnd a každého iného súboru jeden deň a rovnaké pravidlo hovoril aj prehliadačom. Súbory s pevným názvom — logo.png, font, čokoľvek z priečinka public/ — mohli zobrazovať starú verziu až jeden deň po opätovnom publikovaní.

Oprava: kópie súborov viazané na build

Keď sa edge opýta nášho API, kde stránka býva, odpoveď teraz obsahuje značku buildu, ktorá sa zmení pri každom publikovaní. Edge ukladá svoje kópie pod touto značkou. Publikovanie sa tak stane úplne novou sadou kľúčov cache, len čo vyprší 30-sekundové vyhľadávanie na edge. Staré kópie sa už nikdy nenájdu, takže edge môže kópie ponechať jeden deň bez toho, aby poslal kópiu, ktorú nahradilo ďalšie publikovanie.

Prehliadače dostanú dve rôzne pravidlá:

Hashované výstupy buildu — súbory ako assets/index-CzLcxDO8.js, ktorých názov sa zmení vždy, keď sa zmení obsah — sa uchovávajú rok a sú označené ako immutable. Pod týmto názvom nemôžu byť zastarané.
Všetko ostatné — stránky a súbory s pevným názvom, ako logo — sú označené no-cache, čo znamená „over pred použitím“. Ak sa nič nezmenilo, odpoveďou je malé 304 Not Modified bez tela, odkedy rešpektujeme kontrolu If-None-Match prehliadača.

Rozlíšenie týchto dvoch vyžaduje opatrnosť: súbor skopírovaný z public/assets/ si ponecháva svoj názov a uchovanie assets/logo.png na rok by starý logo zafixovalo na rok. Súbor preto považujeme za hashovaný, iba ak je v priečinku výstupu buildu a jeho názov obsahuje časť, ktorá vyzerá ako hash, nie ako bežné slovo.

Lokálne bola nová stránka a logo viditeľné 6 sekúnd po tom, ako publikovanie prešlo live. Predtým to bolo 60 sekúnd pri stránke a jeden deň pri logu.

Dve menšie opravy po ceste

Prázdne stránky z HEAD požiadaviek. Požiadavka HEAD žiada hlavičky stránky bez tela. Ukladali sme tieto prázdne odpovede, takže ďalší návštevník danej stránky dostal prázdnu stránku. Odpovede HEAD sa už neukladajú do cache.
Skutočná stránka pre „tu nič nie je“. Adresa bez aplikácie dostávala obyčajný text „This published app is offline or the link was not found“ s chybovým kódom 502. Teraz dostane riadnu stránku „Tu nie je žiadna aplikácia“ so stavom 404 a odkazom späť na Mythex pre vlastníka. Neznáme vlastné domény dostanú rovnakú stránku.

Čo sme si z toho odniesli

Poradie je súčasťou správnosti. Tie isté súbory nahrané v inom poradí sú rozdielom medzi rozbitou a funkčnou stránkou.
Mazať neskoro a len to, čo poznáte. Mazanie podľa výpisu urobeného pred nahrávaním je bezpečné; vyprázdniť priečinok a dúfať, že nahrávanie dobehne, bezpečné nie je.
Ukladať do cache podľa verzie, nie podľa času. Časy expirácie sú odhad, kedy sa obsah zmení. Kľúč, ktorý sa mení s buildom, je fakt.

Súvisiace: vaša publikovaná aplikácia teraz zostáva online, kým ju opätovne publikujete. Viac o publikovaní nájdete v dokumentácii.