Οι στατικοί ιστότοποι μένουν online όσο ξαναδημοσιεύονται

Η ξαναδημοσίευση ενός στατικού site στο Mythex διέγραφε παλιά πριν ανεβάσει το νέο build, οπότε για όση ώρα κρατούσε το ανέβασμα κάποιοι επισκέπτες έπαιρναν σελίδα 404 ή σελίδα της οποίας τα scripts έλειπαν. Μια αποτυχημένη μεταφόρτωση μπορούσε να αφήσει το site άδειο ή μισό καινούργιο. Τώρα το νέο build γράφεται πάνω από το παλιό, με τις σελίδες τελευταίες, και τα περιττά αρχεία αφαιρούνται μερικά λεπτά αργότερα. Μια δεύτερη διόρθωση κάνει μια ξαναδημοσίευση να φαίνεται μέσα σε δευτερόλεπτα αντί για ένα λεπτό — ή, για αρχεία όπως ένα λογότυπο, μέχρι μία ημέρα.

Πώς σερβίρεται ένα στατικό site

Ένα στατικό site είναι ένα σύνολο αρχείων: σελίδες HTML, JavaScript, CSS, εικόνες. Όταν το δημοσιεύετε στο Mythex, το χτίζουμε, ανεβάζουμε την έξοδο σε αποθήκευση αντικειμένων κάτω από έναν φάκελο για το site σας, και το σερβίρουμε μέσα από ένα δίκτυο άκρων — διακομιστές κοντά στους επισκέπτες που παίρνουν αρχεία από την αποθήκευση και κρατούν αντίγραφα για λίγο. (Αν είστε καινούργιοι σε αυτό, ο οδηγός μας για τι είναι ένα CDN καλύπτει την ιδέα.)

Δύο πράγματα ήταν λάθος: η σειρά με την οποία μια ξαναδημοσίευση άλλαζε τα αρχεία, και το πόσο καιρό κρατούνταν τα παλιά αντίγραφα.

Πρόβλημα 1: το ανέβασμα άδειαζε πρώτα το site

Μια ξαναδημοσίευση διέγραφε όλα όσα υπήρχαν στον φάκελο του site και μετά ανέβαζε το νέο build. Για όσο κρατούσε το ανέβασμα — 12 δευτερόλεπτα για ένα site 250 αρχείων στη δική μας τοπική δοκιμή — ένας επισκέπτης του οποίου το αίτημα δεν ήταν ήδη στην cache του edge έπαιρνε 404, ή μια σελίδα HTML της οποίας τα scripts επέστρεφαν 404.

Μια αποτυχημένη μεταφόρτωση ήταν χειρότερη. Ο φάκελος ήταν ήδη άδειος, και σε μία από τις δύο διαδρομές ανεβάσματος το νέο index.html μπορούσε να μπει πριν από το αρχείο που απέτυχε. Μια δημοσίευση που αναφερόταν ως αποτυχημένη μπορούσε να αφήσει ζωντανό ένα μισό καινούργιο site.

Η διόρθωση: γράφουμε από πάνω, σελίδες τελευταίες, καθαρισμός αργότερα

1. Μην διαγράφετε πρώτα. Το νέο build ανεβαίνει πάνω από το παλιό.
2. Πρώτα τα assets, μετά οι σελίδες. Μια σελίδα ονομάζει τα scripts και τα styles που χρειάζεται, οπότε οι σελίδες ανεβαίνουν τελευταίες. Μέχρι να έρθουν οι νέες σελίδες, ο επισκέπτης παίρνει την παλιά σελίδα, η οποία ονομάζει τα παλιά assets, και αυτά είναι ακόμη εκεί. Όταν έρθουν, τα νέα assets που ονομάζουν είναι ήδη στη θέση τους.
3. Αφαιρούμε τα περιττά αργότερα. Πριν το ανέβασμα, καταγράφουμε από τι αποτελείται το site. Τρία λεπτά μετά από επιτυχημένο ανέβασμα, ό,τι βρίσκεται σε εκείνη τη λίστα και δεν ξαναγράφτηκε από το νέο build διαγράφεται. Τα τρία λεπτά είναι περισσότερα από τα 60 δευτερόλεπτα για τα οποία μια σελίδα μπορεί να μείνει στην cache του edge και του προγράμματος περιήγησης, οπότε ένας επισκέπτης που κρατά ακόμη την παλιά σελίδα μπορεί να βρει τα assets που ονομάζει.
4. Σε αμφιβολία, μη διαγράφετε τίποτα. Αν αποτύχει η καταγραφή πριν το ανέβασμα, δεν γίνεται καμία αφαίρεση. Τα περιττά αρχεία είναι αβλαβή, και η επόμενη δημοσίευση τα καθαρίζει. Η διαγραφή χωρίς να ξέρετε τι υπήρχε είναι ο τρόπος που ένα site καταλήγει άδειο.

Μια αποτυχημένη μεταφόρτωση αφήνει πλέον το προηγούμενο site ακριβώς όπως ήταν.

Το δοκιμάσαμε από άκρη σε άκρη τοπικά, με το πραγματικό script ανεβάσματος, το πραγματικό route ανεβάσματος και τη σερβιρισμένη αποθήκευση, και επισκέπτες με κρύα cache στο edge. Με τον παλιό κώδικα, 55 από 91 επισκέψεις χάλασαν κατά τη διάρκεια μιας ξαναδημοσίευσης και 61 από 92 κατά τη διάρκεια μιας αποτυχημένης. Με τον νέο κώδικα, 0 χάλασαν σε περίπου 3.500 επισκέψεις που κάλυπταν και τις δύο διαδρομές ανεβάσματος, μια αποτυχημένη μεταφόρτωση και τη δημοσίευση που ακολούθησε — και διαγράφηκαν ακριβώς τα περιττά αρχεία.

Πρόβλημα 2: μια ξαναδημοσίευση άργαινε να φανεί

Ακόμη και όταν το ανέβασμα πήγαινε καλά, οι αλλαγές φαίνονταν αργά. Το edge κρατούσε το αντίγραφο μιας σελίδας για 60 δευτερόλεπτα και κάθε άλλου αρχείου για μία ημέρα, και έλεγε το ίδιο και στα προγράμματα περιήγησης. Τα αρχεία με σταθερό όνομα — logo.png, μια γραμματοσειρά, οτιδήποτε από φάκελο public/ — μπορούσαν να δείχνουν την παλιά έκδοση για έως μία ημέρα μετά από ξαναδημοσίευση.

Η διόρθωση: αντίγραφα αρχείων κάτω από το build

Όταν το edge ρωτά το API μας πού βρίσκεται ένα site, η απάντηση περιλαμβάνει πλέον έναν δείκτη build που αλλάζει κάθε φορά που ολοκληρώνεται μια δημοσίευση. Το edge αποθηκεύει τα αντίγραφά του κάτω από αυτόν τον δείκτη. Μια δημοσίευση γίνεται έτσι ένα νέο σύνολο κλειδιών cache μόλις λήξει η αναζήτηση 30 δευτερολέπτων του edge. Τα παλιά αντίγραφα απλώς δεν ξαναβρίσκονται ποτέ, οπότε το edge μπορεί να κρατά αντίγραφα για μία ημέρα χωρίς ποτέ να σερβίρει ένα που ξεπέρασε τη δημοσίευση που το αντικατέστησε.

Τα προγράμματα περιήγησης παίρνουν δύο διαφορετικούς κανόνες:

• Έξοδος build με hash — αρχεία όπως assets/index-CzLcxDO8.js, των οποίων το όνομα αλλάζει όταν αλλάζει το περιεχόμενο — αποθηκεύεται για ένα χρόνο και σημαίνεται ως immutable. Κάτω από αυτό το όνομα δεν μπορεί ποτέ να είναι παλιό.
• Όλα τα υπόλοιπα — σελίδες και αρχεία με σταθερό όνομα όπως ένα λογότυπο — σημαίνονται no-cache, που σημαίνει «έλεγξε πριν τη χρήση». Αν δεν έχει αλλάξει τίποτα, η απάντηση είναι ένα μικροσκοπικό 304 Not Modified χωρίς σώμα, τώρα που σεβόμαστε τον έλεγχο If-None-Match του προγράμματος περιήγησης.

Το να ξεχωρίσουμε τα δύο θέλει προσοχή: ένα αρχείο που αντιγράφεται από το public/assets/ κρατά το δικό του όνομα, και η αποθήκευση του assets/logo.png για ένα χρόνο θα κολλούσε το παλιό λογότυπο για ένα χρόνο. Οπότε ένα αρχείο μετράει ως hashed μόνο αν βρίσκεται σε φάκελο εξόδου build και το όνομά του έχει τμήμα που μοιάζει με hash, όχι μια συνηθισμένη λέξη.

Τοπικά, η νέα σελίδα και το νέο λογότυπο φάνηκαν 6 δευτερόλεπτα μετά τη δημοσίευση. Πριν, ήταν 60 δευτερόλεπτα για τη σελίδα και μία ημέρα για το λογότυπο.

Δύο μικρότερες διορθώσεις στον δρόμο

• Κενές σελίδες από αιτήματα HEAD. Ένα αίτημα HEAD ζητά τις κεφαλίδες μιας σελίδας χωρίς το σώμα της. Αποθηκεύαμε στην cache αυτές τις κενές απαντήσεις, οπότε ο επόμενος επισκέπτης της σελίδας έπαιρνε κενή σελίδα. Οι απαντήσεις HEAD δεν αποθηκεύονται πια στην cache.
• Κανονική σελίδα για το «δεν υπάρχει τίποτα εδώ». Μια διεύθυνση χωρίς εφαρμογή έπαιρνε απλό κείμενο «This published app is offline or the link was not found» με κωδικό σφάλματος 502. Τώρα παίρνει κανονική σελίδα, «There's no app here», με κατάσταση 404 και τρόπο επιστροφής στο Mythex για τον ιδιοκτήτη. Τα άγνωστα προσαρμοσμένα domain παίρνουν την ίδια σελίδα.

Τι κρατήσαμε από όλο αυτό

• Η σειρά είναι μέρος της ορθότητας. Τα ίδια αρχεία ανεβασμένα με διαφορετική σειρά είναι η διαφορά ανάμεσα σε ένα χαλασμένο και ένα λειτουργικό site.
• Διαγράφετε αργά, και μόνο ό,τι ξέρετε. Το καθάρισμα με λίστα που πάρθηκε πριν το ανέβασμα είναι ασφαλές· το άδειασμα ενός φακέλου και η ελπίδα ότι το ανέβασμα θα τελειώσει δεν είναι.
• Κάντε cache με βάση την έκδοση, όχι τον χρόνο. Οι χρόνοι λήξης είναι εκτίμηση για το πότε αλλάζει το περιεχόμενο. Ένα κλειδί που αλλάζει με το build είναι γεγονός.

Σχετικά: η εφαρμογή σας που δημοσιεύεται μένει online όσο την ξαναδημοσιεύετε. Περισσότερα για τη δημοσίευση στην τεκμηρίωση.