Dia 1

Dia 2

Serious Request met Windows Azure Michal Hompus Principal Developer, Winvision

Dia 3

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

Dia 4

Winvision In 2012 met Serious Request finalist voor beste Microsoft-oplossing voor goede doelen wereldwijd OnderwijsZorgGoede doelen

Dia 5

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

Dia 6

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

Dia 7

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?

Dia 8

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

Dia 9

Dia 10

DE AANLEIDING

Dia 11

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

Dia 12

Dia 13

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?

Dia 14

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

Dia 15

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

Dia 16

WAAROM AZURE?

Dia 17

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

Dia 18

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

Dia 19

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

Dia 20

Vraag een plaat aanDirecte DonatieCallcenter Shared Cache Queues SQL Database Blob Storage NRK Beheersite3FM Beheersite Worker role FrontendBackend

Dia 21

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

Dia 22

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

Dia 23

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

Dia 24

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

Dia 25

Back-off strategie voor queues int currentBackoff = 0; while (true) { List 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)); }

Dia 26

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

Dia 27

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

Dia 28

Online SQL Database management

Dia 29

SQL Data Sync

Dia 30

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!

Dia 31

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 vl goedkoper

Dia 32

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

Dia 33

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

Dia 34

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

Dia 35

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 ids uit aan nodes en gebruikt een blob als lockmechanisme

Dia 36

SnowMaker sequence diagram

Dia 37

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)); }

Dia 38

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

Dia 39

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);

Dia 40

Lock file op Blob Storage

Dia 41

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); }

Dia 42

200 750 4.000 9.000 10.000 15.000 25.000 30.000 65.000 300 1001507550 dec-16dec-17dec-18dec-19dec-20dec-21dec-22dec-23dec-24dec-25dec-26dec-27dec-28dec-29 RequestsOpens Verzonden e-mails met SendGrid

Dia 43

De flow van een aanvraag Queue RequestConfirm Worker rol Database Queue Betaalkenmerken Betaling Bevestiging

Dia 44

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

Dia 45

De flow van de 3FM beheersite Database Cache Worker rol

Dia 46

VEEL BEZOEKERS Hoe voorkom je manipulatie van data? Hoe kan je dataverkeer beperken? Hoe kan je meerdere form-factors ondersteunen?

Dia 47

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

Dia 48

Internet Explorer 10 Internet Explorer 7

Dia 49

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

Dia 50

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

Dia 51

Serialize State (Output)

Dia 52

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); }

Dia 53

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

Dia 54

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

Dia 55

Anti Forgery (Output) Cookie: __RequestVerificationToken=WgBwIxKirHqEO- L94t0T2FpFJcePf2xinI6MFxi6J5NuCQRExvj_duLa7KWGlARQ5VaB20siCSgxL _e0OOWrEnIcAYQ1

Dia 56

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

Dia 57

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

Dia 58

Visual Studio 2012 Role properties Azure Management Portal

Dia 59

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

Dia 60 "> "> " title="ServiceDefinition.csdef ">

ServiceDefinition.csdef

Dia 61

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

Dia 62

Hoe kan je meerdere form-factors ondersteunen? Met ASP.NET MVC 4 zijn de DisplayModes gentroduceerd 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

Dia 63

Desktop

Dia 64

Facebook

Dia 65

Mobile

Dia 66

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 });

Dia 67

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; }

Dia 68

3 DisplayModes voor de _Layout.cshtml file

Dia 69

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?

Dia 70

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

Dia 71

Wat moet je weten bij het schalen? Voor een hogere availability kan je beter meerdere kleinere VMs gebruiken Je hebt minimaal 2 VMs nodig voor de 99,95% garantie Je hebt minimaal 3 VMs 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

Dia 72

3 DisplayModes voor de _Layout.cshtml file

Dia 73

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

Dia 74

Performance logs opgeslagen op Blob Storage Paraleap AzureWatch

Dia 75

New Relic: Time consumption Response times

Dia 76

Management Portal: Blob Performance counter web role

Dia 77

Hoe is het verloop in donaties?

Dia 78

Hoeveel servers hadden we nodig? 20112012 Vraag een plaat aan123 Directe Donatie104 Callcenter33 Beheersite NRK22 Beheersite 3FM22 Worker roles42 Staging26 Piek3522 Directe Donatie104 Callcenter33 Beheersite NRK22 Beheersite 3FM22 Workerroles4*2 Staging26 Piek35 2011 Vraag een plaat aan12 2012 3 22

Dia 79

DE KOSTEN Wat heeft de hosting ons gekost? Wat kost een donatie?

Dia 80

Wat heeft de hosting in 2011 gekost? Compute598,29 Shared Cache173,39 SQL Database10,11 Network (Zone 1)16,57 Network (Zone 2)2,91 Storage Capacity0,10 Storage Transactions3,97 Totaal805,34 Totaal853,10

Dia 81

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

Dia 82

Daarom voor Windows Azure kiezen! Beschikbaarheid applicaties Applicaties hebben elkaar niet benvloed, 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

Dia 83

LINKJES

Dia 84

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

Dia 85

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

Dia 86

VRAGEN?

Dia 87

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