En webbplats kan se enkel ut och ändå bestå av flera delar. Något bestämmer hur sidan ser ut. Något lagrar filerna. Andra delar ser till att rätt innehåll når din webbläsare på ett säkert sätt. Tillsammans brukar tekniken kallas en stack.

Här beskriver jag stacken bakom min portfolio och den här bloggen på kevinmalmgren.se. Det handlar om just de sidorna, inte om separata appar eller tjänster som jag kan länka till. AWS, Amazon Web Services, är molnplattformen där webbplatsens filer lagras och levereras.

Det du ser byggs med tre webbtekniker

HTML ger sidan innehåll och struktur. Där finns rubriker, stycken, bilder och länkar. CSS bestämmer utseendet, till exempel färger, typsnitt och avstånd. CSS gör också layouten responsiv, vilket betyder att den anpassas till både mobil och större skärmar.

JavaScript sköter interaktioner i webbläsaren. På webbplatsen används det bland annat för att kopiera mejladressen och för interaktiva projektexempel. Själva bloggtexten och de vanliga länkarna går att läsa och använda utan JavaScript. De här tre delarna kallas ofta frontend, alltså den del som besökaren möter.

Bilder på webbplatsen finns i WebP-format, och större bilder erbjuds i flera storlekar så att webbläsaren kan välja en lämplig fil. Typsnitten Archivo och Archivo Narrow levereras från webbplatsens egna filer, inte genom en separat typsnittstjänst. Det gör även bilder och typsnitt till delar av publiceringen.

Färdiga filer i stället för en appserver

Portfolion och bloggen är statiska. Det betyder att sidorna finns som färdiga filer innan du besöker dem. Innehållet behöver inte sättas ihop på nytt av en appserver för varje besök. Statisk betyder alltså inte att allt måste stå stilla eller sakna interaktion.

För de här sidorna finns inget eget API, alltså ett gränssnitt på en server som hämtar innehållet, och ingen databas som lagrar blogginläggen. Texterna ligger direkt i HTML-filerna. AWS har förstås servrar bakom sina tjänster, men jag kör ingen egen Node- eller Python-server för att visa portfolion och bloggen.

Adressen visar vägen, CloudFront levererar

När du skriver kevinmalmgren.se behöver webbläsaren först hitta rätt. DNS fungerar ungefär som en adressbok. Här hanteras domänens DNS med Amazon Route 53, där en post pekar domännamnet mot CloudFront.

DNS levererar inte själva sidan. När adressen har slagits upp gör webbläsaren en separat begäran om innehållet. Den går till Amazon CloudFront, ett nätverk som kan lagra kopior av filer på flera platser och leverera dem till besökare. En sådan tillfälligt sparad kopia kallas cache.

Anslutningen använder HTTPS, så trafiken mellan din webbläsare och CloudFront är krypterad. Certifikatet hanteras med AWS Certificate Manager, förkortat ACM. CloudFront-certifikatet ligger i AWS-regionen us-east-1. Besök via vanlig HTTP styrs om till HTTPS.

Originalfilerna ligger i privat S3-lagring

Bakom CloudFront finns Amazon S3, en tjänst för att lagra filer. Filerna ligger i en så kallad bucket i Frankfurt, AWS-regionen eu-central-1. CloudFront hämtar innehåll därifrån när det behöver det.

Den lagringen är inte öppet läsbar direkt från internet. Publik åtkomst är blockerad, och behörigheterna tillåter webbplatsens CloudFront-distribution att läsa filerna. Kopplingen använder Origin Access Control, ofta förkortat OAC. Det är ett sätt för CloudFront att identifiera sig när det hämtar filer från S3.

Skillnaden är viktig. Webbplatsen är offentlig, men lagringsplatsen bakom den är privat. Du läser sidorna genom CloudFront, inte genom att gå direkt till S3. Det ersätter inte inloggning för hemligt innehåll. Filer som CloudFront gör tillgängliga är fortfarande publika för besökare.

Så går en ändring från datorn till webben

Byggsteget använder Node.js för att kontrollera sidornas grundstruktur och kopiera webbplatsens filer till en byggmapp. Node är här ett verktyg före publiceringen, inte en server som väntar på besökare.

Publiceringen sköts separat av ett Python-skript som använder AWS CLI, Amazons kommandoradsverktyg. Skriptet förbereder en version, kontrollerar filreferenser och kan provköras utan att ändra något i AWS. Det genererar också webbplatskartan, sitemap, med adresserna till de publika sidorna.

Vid publicering sparas kopior av de befintliga sidorna innan nya laddas upp. Uppladdningen kontrollerar att de inte har ändrats sedan säkerhetskopian togs. Bilder, CSS, JavaScript och typsnitt får först egna versionsadresser. Därefter publiceras HTML-sidor som pekar på rätt version av filerna.

Cache gör sidan snabb, men kräver ordning

Versionsfilerna får sparas i cache i ett år och markeras som oföränderliga. En ny version får en ny adress i stället för att ersätta filen på den gamla adressen. HTML-sidorna har andra cacheinstruktioner som kräver kontroll innan en sparad kopia återanvänds.

Efter uppladdningen skickas också en cacheinvalidering till CloudFront. Det betyder att gamla kopior av de berörda sidorna ska sluta användas. Publiceringen behöver sedan kontrolleras genom den riktiga webbadressen. Artikeln, blogglistan, webbplatskartan och tillhörande filer ska gå att hämta och stämma med den nya versionen.

En enkel grund med tydliga gränser

För texter och projektpresentationer ger upplägget få rörliga delar. Det finns ingen egen appserver eller databas att uppdatera för bloggen. Samtidigt behövs fortfarande rätt behörigheter, fungerande publicering och koll på kostnader för lagring och trafik. Molnet är inte automatiskt gratis eller felfritt.

Inloggning, kommentarer och personligt sparade uppgifter ingår inte i den här lösningen. Sådant skulle kräva ytterligare tjänster. För den här webbplatsen är grundkedjan däremot enkel att följa. Webbläsaren visar filerna, CloudFront levererar dem och privat S3-lagring håller originalen.

Vi lär oss genom att förstå delarna.
Kevin