Om webbplatsen

”Skomakarens barn” är ett välkänt ordspråk och inte allt för sällan hamnar IT-konsulternas egna webbplatser i samma kategori. Men tack vare möjligheten att utnyttja moderna tjänster och komponenter i Microsoft Azure har vi på kort tid lyckats bygga en riktigt bra webbplats. Följ med i en djupdykning i hur det gick till.

Application Lifecycle Management

Att kontinuerlig integrera, testa och leverera kod är något de flesta IT-projekt eftersträvar. Vår erfarenhet säger att en viktig nyckel för att nå dit heter automatisering från början. När vi byggde webben avsatte vi första dagen till mobbprogrammering för att sätta upp och automatisera källkodshantering, bygge, release och test.

Kontinuerlig integration

Vi valde att använda Microsofts tjänst Azure DevOps, som vi vet är enkel att komma igång med och löser dessa problem. Den inbyggda möjligheten att lasttesta systemet vid varje release säkerställer bibehållen användarupplevelse även vid hög last. Smidig integration med Azure deplyment slots innebär att vi kan tillämpa blue/green deployment och nå minimal nertid vid driftsättning.

Utöver byggrelaterade tjänster ger DevOps även en riktigt bra hantering av krav i form av backlogg items. När lösningen sen går in i förvaltning kan den användas för buggrapportering.

Övervakning

Att från dag ett ha insikten om hur systemet mår brukar leda till bättre kvalitet och att eventuella felaktigheter upptäcks tidigt. För webben aktiverade vi väldigt tidigt loggning och övervakning av webb, lagring och databas.

Dashboards med monitorering

Tjänster som Application Insights, Azure Monitor och Google Analytics samlar in värdefull information som vi sedan kan analysera och visualisera i dashboards. Vi brukar hänga upp dessa på våra väggar för att snabbt få en överblick över hur systemet mår.

Infrastruktur

Något vi tidigt tänker på i våra projekt är hur lösningen ska förvaltas. Erfarenheten säger att det finns mycket tid och pengar att hämta i förvaltningen om lite extra tankeverksamhet plöjs ner i början. För att bygga en webbplats som blir effektiv i valde vi att helt och hållet satsa på PaaS och SaaS-tjänster i Azure. I och med det fick vi en lösning där Microsoft står för uppdateringar, backup och andra nödvändiga rutiner, och vi istället kan fokusera på att bygga en riktigt bra webb.

Eftersom vi såg behovet av flera miljöer, så som Utveckling, Test och Produktion, ville vi ha ett konsekvent sätt att konfigurera dessa. Något som blivit stort på senare tid och som möjliggörs genom molnet är ”infrastructure as code”. I Azure kan detta genomföras på lite olika sätt, och vi valde Azure ARM Templates. Det gav oss en versionshanterad infrastruktur där vi kände oss trygga i att alla miljöer konfigurerades automatiskt utifrån vår givna mall.

Komponenter på webbplatsen

Som grundplåt använder vi en Azure Web App för webbplatsen samt Azure SQL för datalagring. Med meddelanden i Azure Service Bus har vi möjlighet att kommunicera mellan webbinstanserna när vi skalar ut Episerver. SSL-certifikat och andra nycklar hanteras och uppdateras säkert genom Azure Key Vault. Bilder och andra statiska resurser lagras i Azure Blob Storage och levereras supersnabbt över HTTP/2 med hjälp av Azure CDN. Epostbekräftelser vid anmälan på evenemang skickas genom tjänsten SendGrid. Redaktörerna behöver kunna logga in och det gör de smidigt med single sign on genom kopplingen mot Azure Active Directory.

Sist men inte minst får vi i Azure Security Center en kontinuerlig och automatisk säkerhetsscanning av systemet för att säkerställa att vi följer rådande säkerhetspraxis.

Webb

En publik webb kräver sitt CMS och efter en noggrann utvärdering på vad marknaden hade att erbjuda föll valet på Episerver 11 med tillägget Episerver Forms för att hantera anmälningar till evenemang. Vi har byggt egna kontroller i Dojo till Episervers backend för att skapa en bättre redaktörsupplevelse som är anpassad efter vår sites innehåll.

Webben är konfigurerad att alltid köras över HTTPS, vilket också är ett krav för att köra HTTP/2, som vi gör för våra statiska klientsideresurser. Tack vare HSTS kan vi berätta för webbläsaren att forcera HTTPS för framtida besök.

För att ytterligare öka säkerheten skickar vi HTTP-headers så som X-Content-Type-Options, X-Frame-Options och X-XSS-Protection för att ge webbläsaren information om hur vår site får och inte får köras. Det förhindrar vissa aspekter av XSS och click-jacking.

Microsoft Surface

Genom ett App manifest samt ikoner ger vi en bättre upplevelse på moderna enheter där siten läggs till som favorit eller som en app på skrivbordet.

Utöver den sökmotoranpassade robots.txt har vi även en mänsklig version i form av humans.txt där vi samlat information om teamet och våra tekniker.

Har du otur och hamnar på en av våra felsidor (t.ex. ”Sidan hittades inte”) så piggar vi i alla fall upp med ett litet retrospel. Självklart håller vi koll på highscore med hjälp av Application Insights Custom Metrics.

Frontend

Mobile first är idag en självklarhet och så även på vår webb. Målet har varit att fungera bra i alla moderna webbläsare så som Google Chrome, Microsoft Edge, Mozilla Firefox och Apple Safari. Den flexibla layouten möjliggörs enkelt genom HTML5 och Flexbox.

Mobile first

Tack vare webpack och Autoprefixer har vi kunnat skriva modern CSS och fått bra stöd även för äldre webbläsare. För att underlätta felsökning av klientsideresurser så som SASS och JavaScript har vi implementerat Sourcemaps som en del i Webpackjobbet.

Något vi är extra stolta över är vår bildhantering. Alla våra illustrationer kommer i form av vektorbaserad SVG, vilket ger knivskarpa bilder även på högupplösta skärmar. De foton vi laddar upp utnyttjar möjligheter i HTML5 för en bättre användarupplevelse. Tack vare <picture> i kombination med srcset kan vi leverera olika bilder beroende på användarens skärmstorlek och upplösning. Stora och knivskarpa bilder på högupplösta enheter och lite mindre, lättviktiga bilder på t.ex. små telefoner. För att leverera rätt bild från servern tog vi hjälp av den suveräna tjänsten ImgIX som skalar om bilden på begäran.

Från början nyttjade vi jQuery för DOM-manipulation och AJAX, men tack vare att alla moderna webbläsare har bra inbyggt stöd för detta så kan vi nu köra VanillaJS. Fetch är ett väldigt smidigt sätt att arbeta med AJAX i webbläsarna.

Frågor på det?

Vi som byggt nya activesolution.se har lärt oss extremt mycket längs vägen och är väldigt stolta över resultatet. Tack vare möjligheten att sy samman riktigt bra komponenter i Azure har vi haft möjlighet att bygga en modern och robust site som klarar hög last med bibehållen prestanda.

Vill du vara med och bygga liknande lösningar åt våra kunder? Hör av dig så tar vi en lunch!

/Teamet genom Peter Örneholm, IT-konsult på Active Solution