Serious Request met Windows Azure Michaël Hompus Principal Developer, Winvision

Michaël Hompus Principal Developer bij Winvision Specialisaties zijn SharePoint, Windows 8 Store Apps, Windows Phone 8 en Windows Azure E-mail: michael.hompus@winvision.nl Twitter: @eNeRGy164 Blog: http://blog.hompus.nl

Winvision In 2012 met Serious Request finalist voor beste Microsoft-oplossing voor goede doelen wereldwijd Onderwijs Zorg Goede doelen

Serious Request met Windows Azure Na deze sessie… …weten jullie hoe wij Serious Request met Windows Azure gerealiseerd hebben en welke problemen en oplossingen we hierbij zijn tegengekomen …kunnen jullie de tips en voorbeelden gebruiken om zelf een high available en high performance website op Windows Azure te hosten

Agenda Introductie De aanleiding De keuze voor Windows Azure Architectuur De bezoeker Groeien De kosten Linkjes Vragen

Eerst een inventarisatie Wie kent 3FM Serious Request? Wie heeft er online een plaat aangevraagd en/of gedoneerd in de afgelopen 2 jaar? Wie heeft er development ervaring met Windows Azure?

3FM Serious Request Sinds 2004 organiseert 3FM de actie “3FM Serious Request” Elke editie staat in het teken van een stille ramp die samen met het Nederlandse Rode Kruis wordt uitgekozen

De aanleiding

Het Nederlandse Rode Kruis Sinds 2009 levert Winvision een Microsoft-platform met SharePoint, Dynamics CRM en Dynamics AX aan het Nederlandse Rode Kruis Op dit platform worden regelmatig onderdelen toegevoegd om de processen bij het Rode Kruis te ondersteunen

De vraag van het Rode Kruis “We zoeken voor 3FM Serious Request een nieuwe leverancier voor de plaataanvraag website. Kan Winvision een module aan het platform toevoegen om online platen aan te vragen?”

Wat zijn de functionele requirements? Een formulier om platen aan te vragen Een formulier om alleen te doneren Het Rode Kruis wil content beheren Het Rode Kruis wil donaties exporteren 3FM wil de aangevraagde platen inzien Aangepast formulier voor het callcenter

Wat waren de eerdere ervaringen? Beschikbaarheid applicaties Zware load & aanvallen op de site Oorzaak: alle systemen stonden op dezelfde servers Veel bezoekers op de website ca. 500.000 unieke bezoekers & 60.000 donaties Veel verschillende browsers en devices Grote toestroom tijdens actie Exponentiele groei van bezoekers naar het einde toe Korte levensduur De actie is maar een week op de radio

Waarom Azure?

Waarom voor Windows Azure kiezen? Beschikbaarheid applicaties Loosely coupled architectuur in het “DNA” van de services Updates uitrollen zonder down time Veel bezoekers op de website ASP.NET MVC met Razor voor hoge productiviteit HTML5, CSS3 en jQuery voor compatibiliteit in browsers Grote toestroom tijdens actie Proactief meegroeien met de bezoekersaantallen Mogelijkheid om “onbeperkt” hardware toe te voegen Korte levensduur Datacenters gehost en gemanaged door Microsoft Geen hardware of licenties nodig

Architectuur Welke applicaties hebben we? Welke kenmerken heeft de front- en backend? Hoe verbinden we deze omgevingen? Wat zijn voor- en nadelen van ontkoppelen?

Welke applicaties hebben we? Website vraag een plaat aan Website voor directe donatie Website voor het callcenter Beheersite voor Rode Kruis Beheersite voor 3FM

Frontend Backend Vraag een plaat aan NRK Beheersite Blob Storage Directe Donatie Worker role Queues SQL Database Shared Cache Callcenter 3FM Beheersite

Welke kenmerken heeft de frontend? Anoniem verkeer Geen directe communicatie met de database Een transactie is afgerond als het bericht op de Queue staat Data wordt gelezen van Blob Storage en uit de Shared Cache Geoptimaliseerd om te schalen

Welke kenmerken heeft de backend? Geautoriseerd verkeer Redundantie in servers is er alleen voor beschikbaarheid Directe communicatie met de database Data wordt geschreven naar de Blob Storage en de Shared Cache Geoptimaliseerd om met data te werken

Hoe verbinden we deze omgevingen? Storage Queues Worker role SQL Database Blob Storage Shared Cache

Storage Queues Berichten worden pas van de Queue verwijderd als ze succesvol verwerkt zijn Indien de server crasht zal het bericht later door een andere server alsnog opgepakt worden Elke actie kost geld, ook als de Queue leeg is Tip: Gebruik een “back-off” strategie om in tijden van inactiviteit het aantal transacties te beperken

Back-off strategie voor queue’s int currentBackoff = 0; while (true) { List<CloudQueueMessage> messages = cloudQueue.GetMessages(1).ToList(); if (messages.Any()) { currentBackoff = 0; // Reset back off foreach (CloudQueueMessage message in messages) { cloudQueue.DeleteMessage(message); // We zijn klaar, verwijder het bericht } } else { // Er zijn geen berichten, ga 2 seconde langer wachten if (currentBackoff < 300) { currentBackoff = currentBackoff + 2 }; Thread.Sleep(TimeSpan.FromSeconds(currentBackoff));

Blob Storage Zowel beschikbaar voor privé als publieke bestanden Bestanden worden redundant opgeslagen Mogelijkheid om de bestanden geografisch redundant op te slaan (Amsterdam - Dublin) Je betaald voor transacties én opslag Tip: Zet bij een blob een goede Cache control header Tip: Je kan bestanden niet in de root opslaan, maar wel in een container met de naam “$root”

SQL Database (SQL Azure) Gelimiteerd in aantal concurrent connecties Je betaald voor de grootte van de database Microsoft levert availability van de service, geen (historische) back-up van je data Firewall configuratie om rechtstreeks toegang te verlenen Goede online tooling voor aanpassing en performance analyse Tip: Gebruik SQL Sync om je data te repliceren Tip: Gebruik DacServices om een back-up van je database te maken

Online SQL Database management

SQL Data Sync

Backup database naar blob storage CloudBlob backupFile = backupContainer.GetBlobReference(storageName); // Backup kan alleen naar een lokale file LocalResource localResource = RoleEnvironment.GetLocalResource(LocalStorageName); string filename = localResource.RootPath + backupFile.Name; DacServices services = new DacServices(connectionString); services.ExportBacpac(filename, "SeriousRequest"); backupFile.Properties.ContentType = "binary/octet-stream"; backupFile.UploadFile(filename); // Sla de back-up op blob storage File.Delete(filename); // Ruim de locale file wel weer op!

Shared Cache (AppFabric Cache) Gedistribueerde cache die overal vandaan te benaderen is, dus ook buiten je deployment Dit in tegenstelling tot de nieuwe cache role Gelimiteerd in aantal connecties en grootte Tip: Connecties moet je disposen! Tip: Je kan ook data cachen in (JSON) bestanden op Blob Storage, dit is véél goedkoper

Wat zijn voordelen van ontkoppelen? Vlak voor het begin van de actie kwam een verzoek voor 2 nieuwe koppelingen UPC MyOrder Voor elke import was het alleen nodig om een CSV-regel om te zetten in een bericht op de queue

Wat zijn uitdagingen bij ontkoppelen? Hoe garandeer je een unieke sleutel? Hoe voorkom je dat worker roles hetzelfde tegelijkertijd willen uitvoeren?

Hoe garandeer je een unieke sleutel? Guid.NewGuid() is redelijk uniek Uitdaging: “In het financiële systeem heb je maar 5 karakters aan ruimte voor je unieke sleutel” Decimaal zijn dat maar 100.000 unieke waarden Base36 levert 365 = 60.466.176 unieke waarden

Hoe garandeer je een unieke sleutel? Met een queue! Let op! Berichten op de queue verlopen na maximaal 7 dagen Tip: De NuGet package SnowMaker geeft batches van unieke id’s uit aan nodes en gebruikt een blob als lockmechanisme

SnowMaker sequence diagram

Betaalkenmerken genereren private void AddPaymentIds(CloudQueue cloudQueue) { for (int i = 0; i < Threshold; i++) long newId = SnowMaker.NextId("PaymentId"); Alphadecimal paymentId = new Alphadecimal((ulong)newId); string value = paymentId.ToString("5"); cloudQueue.AddMessage(new CloudQueueMessage(value), TimeSpan.FromDays(7)); }

Worker roles niet hetzelfde, tegelijk laten doen Je wil de Worker role redundant uitvoeren voor availability, maar dat betekent ook dat alle functionaliteit door meerdere servers tegelijk wordt uitgevoerd Tip: Zet je staging omgeving uit Tip: Gebruik een lease op een centrale Blob File als lock-mechanisme

Gebruik lease als lock-mechanisme CloudBlockContainer lockContainer = blobClient.GetContainerReference("lock"); CloudBlob lockFile = lockContainer.GetBlobReference("emailLock"); string leaseId = lockFile.AcquireLease(60); ProcessEmail(lockFile, leaseId); lockFile.ReleaseLease(leaseId);

Lock file op Blob Storage

Stuur een e-mail met SendGrid private void ProcessEmail(CloudBlob lockFile, string leaseId) { var transportInstance = Web.GetInstance( new NetworkCredential(username, password)); var mailMessage = Mail.GetInstance(); mailMessage.AddTo(toAddress); mailMessage.From = new MailAddress(fromAddress); mailMessage.Subject = subject; mailMessage.EnableGoogleAnalytics("sr12", "email", "", "", ""); mailMessage.Html = replacedBody; transportInstance.Deliver(mailMessage); lockFile.RenewLease(leaseId, 60); }

Verzonden e-mails met SendGrid 200 750 4.000 9.000 10.000 15.000 25.000 30.000 65.000 300 100 150 75 50 dec-16 dec-17 dec-18 dec-19 dec-20 dec-21 dec-22 dec-23 dec-24 dec-25 dec-26 dec-27 dec-28 dec-29 Requests Opens

De flow van een aanvraag Queue Betaalkenmerken Queue Request Confirm Betaling Bevestiging Worker rol Database Foto’s Michaël Hompus & Nu.nl

De flow van de Rode Kruis beheersite Database Worker rol Cache Blob storage

De flow van de 3FM beheersite Database Worker rol Cache

Veel bezoekers Hoe voorkom je manipulatie van data? Hoe kan je dataverkeer beperken? Hoe kan je meerdere form-factors ondersteunen?

Hoe ondersteun je alle browsers? Oude browsers kunnen best met HTML5 en CSS3 overweg zolang we “progressive enhancement” toepassen jQuery zorgt voor een goede abstractie om tegen de DOM aan te programmeren Wel een eigen versie van de jquery.validate plugin om met IE7 backwards compatibility mode van Internet Explorer overweg te kunnen De auteur van de jquery.validate plugin weigert om IE7BC mode te ondersteunen

Internet Explorer 10 Internet Explorer 7

Hoe bewaar je state in de client? Met een wizard moet je de state meenemen naar de andere stappen Gebruik de MvcSerializer uit MVC Futures State kan alleen signed, of encrypted en signed worden

Serialize State (View.cshtml) @using (Html.BeginForm()) { @Html.Serialize("state", Model, SerializationMode.EncryptedAndSigned) }

Serialize State (Output) <input name="state" type="hidden" value="CC1D907C69732C67A0850F661D39D576F4FAC714ABD06A93FA40BE430125196A2C71A2D74E6A2FDB23E796A6198BA9A3BDBE88D194256F804173C08029BE15D1082580898EF6B4DD67AB14E3523B6D1AA81E880C7E2832A34BC9C86B1565F40EC34C5D993727EAC3ACAC25976DF63AF4EE28FA20B082E5D1A1BDE492397206670A6A6F27D25AF4E432A2D682BF7E37ACF2B110B8B317CA69EA1F5247F076B8095D950B77D48B7307FAF0BAE020F57C57C00F07FB63F96AA31A7DB8C7F26032208CA7ABC9AA28F936501FA01B5BCF388B30A2A26188FE7B4BF6B1C8F50EB7480E66EDFAD2D8FCD249A41F5F16D2B9ABF27994DDAA3B23B3106DADDF81C8D5AD5580C08074C815A02030FFE9C3E20A16034F159F2F63DD29A6AF99B7CBB69FEA0CC30F84A81ACE28C6A7C8548B4AB3F7FF07614D920C82DFEDD0E1FE17675CA1E6E3E3955E7983EFC94DB9D7775C624D9FF637BA84932BDDEA9770D57C9F11957599B4B10915E3B9FB6FE85BBE133000F75B68F9E32EEC6A4412D1F72767D39CC1211846003767BFA43F3FE63F0858BD509B70407517C4DB34DFC8A20E039026BDE6D0BB4F871D4E9A18CD405C83E562756A04304C7AE7BA4721972BA2E41F0D963291AAF02FD2AA51B278CB0F5C7DF6C6752BDE7C642F98875CA1D9F4433CC85DBD0FA56DD2F2983704A63039C1313BFCE62B1D1C9A28E16AB63BA109EF2BA4590AA0810D5B587B5636409B87FC4581142DA163A600EC8255EE82BFEFCE774BFC03F79FD75D51EA3BB3E526EBF02CBB027E0510DA27152D87AE01C5C25724DB8A62B8EE81BD346189574D87D63F84065778D80267D133441A4B8453B5497E467AB766964EBBC53735848CC6602D90B3C6C26C1253213F85546E2625D6CF4776EFCDD176CB3D85597D5AF6D007136DAF736E5DE787C052CC23E20BE832CB0264AD5DB0B3C5F3199FDAD983138CB23DBC8CA538855BD0EF9E7C5A2725942DB236D819720540AE53E67B397CD6CECD286A1DD7FAD1E8526E6C6A452B044A11FE305CA60095900C51F2E0D2CC0C8E6E4F899E8E65AD734538F08E7B32F1EA7FCA78846BF0C87A7EB55A883D8E090C8899815AEA76F831F9489507D46ADA89B256C317168CC7023767DB2C69FF2B22A424E1D3349CE5104D121E32F48ABDB0C789411670FEB373DB7FA272040959D04A6082AC9A3417E00B833CE02DC49B452D3F83515F312FCE24F1DF7C9E18E15A78A7DDC06502A57011DAB9E3C2E869FB3FBC0BF8CE06C2BA943EEE1C6910DE4BDC17498A00618CFE621EA6222FC6E3F981C3F7594783A7AB74D67D0EECA3E474A8B1CFF3EB55A18B8531C230D89EA315B3FF69A04CD8D8575DFB641497A630E4DABEC3E58EC9A44D5F5DEAC64559EB21169A9D2CC4C7A923C4F40E275AFD4283299365D9091A832783689A1BFA8FC304B65E085DE35FD2087BC159A0A3A58C92D67BBD8455D643686BF36C0FA915F0CCC63499177585442FF7ED3D1AD63D5CAD4CE743B07FD4322F7CFFEC35722E1AE37EE4B994FB3E43D7874929AC33E1634FB469C323F5509A5158FDF2A428767589D46989BAD0CF35CB" />

Serialize State (Controller.cs) [HttpPost, ValidateInput(false)] public ActionResult Wizard(WizardViewModel updatedModel, string state) { ModelState.Clear(); var model = (WizardViewModel)new MvcSerializer().Deserialize(state, SerializationMode.EncryptedAndSigned); model.Betaling = updatedModel.Betaling; if (!TryValidateModel(model.Betaling)) { break; } return View(model); }

Hoe voorkom je manipulatie van data? Serverside validatie is een must Clientside validatie is een nice-to-have Voorkom cross-site request forgery met een AntiForgeryToken Tip: Indien de pagina in een IFrame komt (bijv. Facebook) is er een extra handeling nodig

Anti Forgery (View.cshtml) @using (Html.BeginForm()) { @Html.AntiForgeryToken() }

Anti Forgery (Output) <input name="__RequestVerificationToken" type="hidden" value="4U_xgmVmpHiOZSBnkpV8mPulShQ5nRvK2aAmwV31xLPqJQ721W67UTvQnk00Jal97mxzkLo8gn81tDI4PnQ2bNg4abg1" /> Cookie: __RequestVerificationToken=WgBwIxKirHqEO-L94t0T2FpFJcePf2xinI6MFxi6J5NuCQRExvj_duLa7KWGlARQ5VaB20siCSgxL_e0OOWrEnIcAYQ1

Anti Forgery (Controller.cs) [HttpPost, ValidateAntiForgeryToken] public ActionResult Wizard(WizardViewModel updatedModel, string state) { SetP3PCompactPolicy(); return View(model); }

Hoe beveilig je een site met SSL? Je wil voorkomen dat persoonlijke gegevens onderschept kunnen worden Je configureert de certificaten in je package in Visual Studio SSL certificaten moet je zelf uploaden, deze gaan niet mee met je package Tip: Je moet de hele chain uploaden

Visual Studio 2012 – Role properties Azure Management Portal

Hoe kan je dataverkeer optimaliseren? Gebruik in je rol IIS 7.5 of 8 voor “gratis” gzip compressie Compressie van JSON is niet standaard geactiveerd, dit kan je activeren met een startup task Tip: Gebruik een CDN voor libraries Tip: Controleer je site met een tool, bijvoorbeeld Google PageSpeed Insights PageSpeed Insights Imags lossless comprimeren, JS & CSS minify’en

ServiceDefinition.csdef <!-– Windows Server 2008 R2 --> <ServiceConfiguration ... osFamily="2" ...> <WebRole ...> <Startup> <!– Registreer start-up task --> <Task commandLine="EnableCompression.cmd" executionContext="elevated" taskType="simple" /> </Startup> </WebRole> </ServiceConfiguration>

EnableCompression.cmd %windir%\system32\inetsrv\appcmd set config /section:urlCompression /doDynamicCompression:True /commit:apphost %windir%\system32\inetsrv\appcmd set config -section:system.webServer/httpCompression /+"dynamicTypes.[mimeType='application/json; charset=utf-8',enabled='True']" /commit:apphost exit /b 0

Hoe kan je meerdere form-factors ondersteunen? Met ASP.NET MVC 4 zijn de “DisplayModes” geïntroduceerd De juiste view wordt dynamisch bepaald aan de hand van condities en de bestandsnaam Werkt ook voor partial views Let op! Er zit een bug in de RTM release, installeer de “Microsoft.AspNet.Mvc.FixedDisplayModes” NuGet package

“Desktop”

“Facebook”

“Mobile”

DisplayMode (Global.asax.cs) // Vervang de standaard Mobile DisplayMode IDisplaymode currentMobileMode = DisplayModeProvider.Instance.Modes .First(dm => dm.DisplayModeId == DisplayModeProvider.MobileDisplayModeId); DisplayModeProvider.Instance.Modes.Remove(currentMobileMode); DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("Mobile") { ContextCondition = MobileCheck });

DisplayMode (Global.asax.cs) public bool MobileCheck(HttpContextBase context) { HttpRequestBase request = context.Request; if (request.Browser.IsMobileDevice) // Standaard detecteert .NET een tablet ook als een mobile device bool isTablet = request.UserAgent.Contains("iPad") || (request.UserAgent.Contains("Android") && !request.UserAgent.Contains("mobile")); // Indien de gebruiker op de link “switch naar desktopsite” geklikt heeft bool forceDesktop = request.QueryString.AllKeys.Contains("mode") && request.QueryString["mode"] == "desktop"; return !isTablet && !forceDesktop; } return false;

3 DisplayModes voor de _Layout.cshtml file

OPSCHALEN Welke grootte VM kies je? Wat moet je weten bij het schalen? Hoe weet je dat je moet schalen? Hoeveel servers hadden we nodig?

Welke grootte VM kies je? Extra Small Shared CPU 768 MB 20 GB 5 Mbps €0,015/uur Small 1 CPU 1,75 GB 225 GB 100 Mbps €0,090/uur 6x Extra Small Medium 2 CPU 3,5 GB 490 GB 200 Mbps €0,1790/uur 2x Small “Very Small” instanties starten veel langzamer op

Wat moet je weten bij het schalen? Voor een hogere availability kan je beter meerdere kleinere VM’s gebruiken Je hebt minimaal 2 VM’s nodig voor de 99,95% garantie Je hebt minimaal 3 VM’s nodig voor de 99,95% garantie als je zelf een update uitrolt Updates worden standaard server-voor-server uitgerold Tip: Het gaat veel sneller als je alle machines tegelijk updatet maar doe dit alleen in staging

3 DisplayModes voor de _Layout.cshtml file

Hoe weet je dat je moet schalen? Gebruik de Windows Azure Diagnostics Trace Listener Performance counters IIS Logs Event logs Crash dumps Gebruikt blob en/of table storage Tip: Gebruik hiervoor een apart storage account

Performance logs opgeslagen op Blob Storage Paraleap AzureWatch

New Relic: Time consumption Response times

Management Portal: Blob Performance counter web role

Hoe is het verloop in donaties?

Hoeveel servers hadden we nodig? 2011 2012 Vraag een plaat aan 12 3 Directe Donatie 10 4 Callcenter Beheersite NRK 2 Beheersite 3FM Worker roles Staging 6 Piek 35 22 2011 Vraag een plaat aan 12 2012 3 Directe Donatie 10 4 Callcenter 3 3 Beheersite NRK 2 2 Beheersite 3FM 2 2 Worker roles 4* 2 Staging 2 6 Piek 35 22

De kosten Wat heeft de hosting ons gekost? Wat kost een donatie?

Wat heeft de hosting in 2011 gekost? Compute 598,29 Shared Cache 173,39 SQL Database 10,11 Network (Zone 1) 16,57 Network (Zone 2) 2,91 Storage Capacity 0,10 Storage Transactions 3,97 Totaal €805,34 Totaal €853,10

Hoe kunnen we 2011 en 2012 vergelijken? Pageviews 2011 1 miljoen Groei 2012 45% Donaties 2011 100.000 Piek donaties 2012 500 per minuut 2011 € 5,50 per 1000 donaties 2012 € 4,10 per 1000 donaties

Daarom voor Windows Azure kiezen! Beschikbaarheid applicaties Applicaties hebben elkaar niet beïnvloed, geen down time Dagelijks updates uitgerold Veel bezoekers op de website 1.500.000+ pageviews 160.000+ donaties verwerkt Grote toestroom tijdens actie Makkelijk kunnen opschalen tot 35 servers Korte levensduur Lage hosting kosten

Linkjes

Linkjes Email Video’s Twitter Microsoft Showcase Serious Request 2011 michael.hompus@winvision.nl Video’s Twitter Microsoft Showcase Serious Request 2011 https://twitter.com/eNeRGy164 http://aka.ms/xjvkqa Blog Microsoft Showcase Serious Request 2012 http://blog.hompus.nl http://aka.ms/xa1q10 Winvision Podcast http://www.winvision.nl DotNed Podcast 3FM Serious Request http://link.hompus.nl/dotnedpodcast http://seriousrequest.3fm.nl Nederlandse Rode Kruis http://www.rodekruis.nl

Linkjes NuGet Services SnowMaker SendGrid http://nuget.org/packages/SnowMaker http://sendgrid.com ASP.NET MVC Fixed DisplayModes NewRelic http://nuget.org/packages/Microsoft.AspNet.Mvc.FixedDisplayModes http://newrelic.com AzureWatch http://www.paraleap.com/AzureWatch Tools Azure Storage Explorer http://azurestorageexplorer.codeplex.com Cloud Storage Studio http://www.cerebrata.com/Products/CloudStorageStudio

Vragen?

Bedankt! Vul een feedback formulier in, dit wordt gewaardeerd!