@how2codeinfo | Svenska Svenska | English English

Köra en Blog på Azure Data Lake

Johan Åhlén by Johan Åhlén • Updated

Ä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:

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.

Azure Data Lake 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:

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:

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:

Azure Cdn Verizon rewrite rule

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

Azure Cdn Verizon redirect rule
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.

Azure Data Lake Cache-Control scenario

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:

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:

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:

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.

Azure Function How2Code

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.


var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://func-how2code-web.azurewebsites.net/api/SendMail');
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onreadystatechange = function () {
	if (this.readyState === XMLHttpRequest.DONE) {
		if (this.status == 200) {
			window.location.href = '/en/contact/thankyou';
		} else {
			enableButton();
			alert('An error occured. Please try again later.');
		}
	}
}
xhr.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.

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:

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.

Azure Azure Data Lake Azure Storage Azure CDN

More about Azure Storage

Aktivera Cachning på dina Azure Storage Blobs

More about Azure

Hur du kopierar en Azure SQL Databas till en annan prenumeration
Hur du Ansluter till ett SOAP API från Azure Data Factory
Hur Du Kör Din Azure Web App Från Zipfil