Köra en Blog på Azure Data Lake

Jan 4, 2021 · 8 min läsning · Azure · Azure Data Lake · Azure Storage · Azure CDN ·

Obs! Det finns nu en ny tjänst, Azure Static Web Apps som är ännu bättre än Azure Data Lake för att drifta websajter. Denna blogg kör nu på Azure Static Web Apps och jag skall snart försöka skriva en bloggpost om det.

Är det möjligt att köra en blogg på Azure Data Lake/Azure Blob Storage? Ja, absolut! Just denna blogg är faktiskt ett exempel på det. I denna artikel skall jag beskriva hur du kan bygga en website i Azure Data Lake, inklusive dynamiska saker såsom exempelvis ett kontaktformulär.

Först, ett par ord om varför du skulle vilja bygga din blogg på Azure Data Lake:

Det är billigt. Se på prislistan här.
Du får en supersnabb websajt.
Säkerheten är mycket hög.
Det är coolt!

Du behöver definitivt en del tekniska kunskaper och tid, men om du gillar att skapa saker i Azure så kommer du definitivt att ha ett roligt projekt!

Static Website Hosting i Azure

Det avgörande som gör detta möjligt är en ny funktion i Azure Data Lake som heter Static website.

Visserligen har det varit möjligt att köra en statistk website i Azure Data Lake redan tidigare, men Azure Data Lake static websites ger dig två väldigt viktiga funktioner:

Att kunna ha index (default) sidor. Exempelvis en sida i roten, http://www.yoursite.com/.
Att visa en användarvänlig not-found-sida när användaren skriver fel på en adress

Så som static website fungerar är väldigt enkelt. Det skapar en container med namnet $web, som är där du kan ladda upp vad som helst du vill publicera. Notera att URLs blir case-sensitive. Detta är för att blob namn i Azure Data Lake alltid är case-sensitive.

Det finns några saker att tänka på om du vill använda det i verkligheten:

Hur du lägger till en custom domain
Hur du hanterar typiska server-side saker som ett kontaktformulär
Hur du editerar/updaterar din websajt

Custom Domain

Förmodligen vill du använda ditt eget domännamn för din websajt, som exempelvis www.yoursite.com. Den automatiska adressen som du får från static website-funktionen är inte särskilt vacker. Det finns dock inte någon inställning för custom domains, så hur löser du detta?

Lösningen är att använda Azure CDN (Content Delivery Network).

Azure CDN

Syftet med Azure CDN är att öka hastigheten och minska belastningen på dina webservers genom att cachea ditt innehåll i ett globalt nätverk av servrar. När användare besöker din websajt så får de innehållet levererat från närmaste cache istället för att läsa direkt från din webserver.

Azure CDN finns tillgängligt i olika produkterbjudanden, med olika funktioner. Jag rekommenderar att du väljer Premium Verizon eftersom det har en regelmotor. I regelmotorn kan du göra sådant som URL rewriting och URL redirection.

Azure CDN är billigt och enkelt att komma igång med. Det kan även bespara dig kostnaden för ett HTTPS certificat för din domän, eftersom det kan beställa och hantera certifikat utan kostnad.

URL rewriting och URL redirection

Om du inte är försiktig så kan din websajt hamna i sökmotorer under flera olika domäner. Detta är för att sökmotorer kan hitta din websajt på originaladressen (den autogenererade adressen ifrån Azure Data Lake static website).

För att förhindra sökmotorer från att indexera a websajt så finns robots.txt. På din custom domain så bör den säga OK. På andra domäner så bör den säga Disallow.

Men vänta... Hur kan du få robots.txt att bli olika för olika domäner?

Det är här URL rewriting kan åstadkomma magi. Här är ett exempel på hur jag använder det för www.how2code.info:

På liknande sätt så kan du göra URL redirection. Exempelvis för att omdirigera från http till https:

Få fram din "customer origin"

Du behöver byta ut "customer origin" /80103ADC/cdn-how2code-www mot din egen. Det enklaste sättet att få fram din customer origin är att skapa en ny regel (som du sedan slänger bort), väljer "Origin" och sedan "Customer Origin". Därefter så dyker din customer origin upp i en drop-down-lista.

Azure Cdn Verizon finding the Customer Origin

Cache-Control

Om du använder en CDN så blir cachning extra viktigt. Detta är för att din CDN behöver veta om den skall ladda om innehåll eller inte.

Utan Cache-Control så kommer förfrågningar att gå från CDN till din Data Lake varje gång. Detta är väldigt onödigt och kommer att slöa ned din websajt.

Det finns två sätt att hantera Cache-Control. Antingen kan du hantera cachning direkt i blobbarna i Azure Data Lake, eller så kan du hantera det med hjälp av regelmotorn i CDN.

Min rekommendation är att hantera cachningen direkt i blobbarna. Cache-Control är tillgängligt som en egenskap på dina blobbar. Tyvärr visas det inte i portalen, men du kan enkelt hantera det genom PowerShell, C#, REST API, etc. Du kan också enkelt kontrollera resultatet från en webbrowser och bör då se något sådant här:

En sak till... I Azure CDN så finns det också en inställning som heter Query-String Caching. Azure Data Lake static website ignorerar alltid querysträngar, så för bästa cachning så bör du välja "standard-cache" mode. Detta är default läge.

Content-Type

Content-type är nödvändigt för att web browsers skall visa/hantera innehåll korrekt. Vanligtvis hanteras det av webservrar, men med Azure Data Lake static websites blir det nödvändigt att hantera själv.

Om du laddar upp filer i portal, så kommer Azure att tilldela en a content-type/MIME type baserad på filändelsen. Exempelvis:

text/html för en .html fil
image/jpeg för en .jpg fil
audio/mpeg för en .mp3 fil

När du laddar upp på andra sätt (exempelvis genom PowerShell eller C#), så behöver du sätta content-type själv. Det är enkelt åtkomligt som en property på dina blobbar och du kan även se det i portalen.

Att hantera content-type i PowerShell är liknande hur du hanterar andra properties, som cache-control. Denna artikel beskriver hur du hanterar properties.

Lägga till ett Kontaktformulär

Ett kontaktformulär är ett typiskt exempel på sådant som bör hanteras server side:

Emailservrar behöver vanligtvis inloggningsuppgifter. Dessa bör inte exponeras i ett klientscript.
Kanske meddelandet skall skrivas till en databas? Då är det ännu viktigare att inte inloggningsuppgifterna till databasen exportas i ett klientscript.
Du kanske gör anti-spam kontroller i ditt kontaktformulär. De bör heller inte hanteras i ett klientscript.

Azure Data Lake Storage static websites är... statiska. De erbjuder inte något stöd för server side kod. Så du har två alternativ:

Använd ett tredjeparts kontaktformulär som hanteras på en tredjepartsserver. Till exempel Formspree.
Skriv en Azure Function, eller liknande, för att köra din kod server side.

Azure Functions (Serverless Compute) är enkla att skapa och väldigt billiga i drift. De kan skapas i portalen eller med hjälp av exempelvis Visual Studio Code. Här är ett exempel.

Att anropa en Azure Function från JavaScript kan göras på flera olika sätt, beroende på browser kompatibilitet. I detta exempel så använder jag XMLHttpRequest för maximal browserkompatibilitet.

 1var xhr = new XMLHttpRequest();
 2xhr.open('POST', 'https://func-how2code-web.azurewebsites.net/api/SendMail');
 3xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
 4xhr.onreadystatechange = function () {
 5	if (this.readyState === XMLHttpRequest.DONE) {
 6		if (this.status == 200) {
 7			window.location.href = '/en/contact/thankyou';
 8		} else {
 9			enableButton();
10			alert('An error occured. Please try again later.');
11		}
12	}
13}
14xhr.send(JSON.stringify({ "email": email, "name": name, "subject": subject, "message": body }));

Azure Functions är ett bra sätt att utöka din static website med server side kod och de kan skrivas i ditt favoritspråk (C#, JavaScript/Node.js, PowerShell, etc).

Redigera/uppdatera din websajt

Azure Data Lake static website inkluderar inte någon editor liknande WordPress. Du behöver skapa och underhålla Html-koden själv.

Det är inte supersvårt att skapa en lättanvänd utvecklingsmiljö för din websajt.

Du kan köra något sådant som WordPress lokalt på din dator. Där finns plugins tillgängliga som kan konvertera din websajt till statiska filer. Dessa filer kan laddas upp till din Azure Data Lake med hjälp av AzCopy, PowerShell eller liknande.
Du kan skapa din egen editor som automatiskt uppdaterar din Azure Data Lake.

Jag byggde min egen editor genom att först skapa en ASP.NET Core C# web application. Fördelen med detta är att du får alla bibliotek som krävs för att rendera html. I grund och botten har jag ett par html-mallar som jag applicerar på allt mitt innehåll. Innehållet lagrar jag i en särskild Azure Data Lake container, och html outputen skrivs till $web containern. Att göra förändringar i websajtens design är enkelt eftersom jag bara behöver uppdatera html-mallarna. Jag kör editorn lokalt, men den skulle enkelt kunna deployas som en app service om det behövs.

Ett ännu coolare sätt att designa en editor vore att bygga den i Vue.js, React, Angular eller liknande framework. På det viset skulle både websajten och editorn kunna köras som Azure Data Lake static websites.

Azure har även ett SDK för JavaScript! Med hjälp av detta SDK kan du till exempel:

Integrera dina web apps med Azure Active Directory Authentication (se till exempel här)
Komma åt skyddade Azure Functions.
Ladda upp och uppdatera blobbar

Ytterligare ett alternativ är att använda Blazor Webassembly. Enligt min erfarenhet så är det enkelt att köra i en statisk websajt och kan användas för att skapa en utmärkt editor. Detta skulle förmodligen vara mitt huvudalternativ om jag började om från början med denna blogg idag.