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

2.
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

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

4.
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

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

6.
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

7.
DE AANLEIDING

8.
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

9.
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?”

10.
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

11.
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

12.
WAAROM AZURE?

13.
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

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

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

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

17.
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

18.
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

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

20.
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

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

22.
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”

23.
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

24.
Online SQL Database management

25.
SQL Data Sync

26.
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!

27.
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

28.
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

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

30.
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

31.
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

32.
SnowMaker sequence diagram

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

34.
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

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

36.
Lock file op Blob Storage

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

38.
Verzonden e-mails met SendGrid
65.000
30.000
25.000
15.000
9.000 10.000
4.000
200 750 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

39.
De flow van een aanvraag
Queue
Betaalkenmerken
Queue
Betaling
Bevestiging Request Confirm
Worker rol
Database

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

41.
De flow van de 3FM beheersite
Database
Worker rol
Cache

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

43.
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

44.
Internet Explorer 10
Internet Explorer 7

45.
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

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

47.
Serialize State (Output)
<input name="state" type="hidden"
value="CC1D907C69732C67A0850F661D39D576F4FAC714ABD06A93FA40BE430125196A2C71A2D74E6A2FDB23E796A6198BA9A3BDBE88D1942
56F804173C08029BE15D1082580898EF6B4DD67AB14E3523B6D1AA81E880C7E2832A34BC9C86B1565F40EC34C5D993727EAC3ACAC25976DF63
AF4EE28FA20B082E5D1A1BDE492397206670A6A6F27D25AF4E432A2D682BF7E37ACF2B110B8B317CA69EA1F5247F076B8095D950B77D48B730
7FAF0BAE020F57C57C00F07FB63F96AA31A7DB8C7F26032208CA7ABC9AA28F936501FA01B5BCF388B30A2A26188FE7B4BF6B1C8F50EB7480E6
6EDFAD2D8FCD249A41F5F16D2B9ABF27994DDAA3B23B3106DADDF81C8D5AD5580C08074C815A02030FFE9C3E20A16034F159F2F63DD29A6AF9
9B7CBB69FEA0CC30F84A81ACE28C6A7C8548B4AB3F7FF07614D920C82DFEDD0E1FE17675CA1E6E3E3955E7983EFC94DB9D7775C624D9FF637B
A84932BDDEA9770D57C9F11957599B4B10915E3B9FB6FE85BBE133000F75B68F9E32EEC6A4412D1F72767D39CC1211846003767BFA43F3FE63
F0858BD509B70407517C4DB34DFC8A20E039026BDE6D0BB4F871D4E9A18CD405C83E562756A04304C7AE7BA4721972BA2E41F0D963291AAF02
FD2AA51B278CB0F5C7DF6C6752BDE7C642F98875CA1D9F4433CC85DBD0FA56DD2F2983704A63039C1313BFCE62B1D1C9A28E16AB63BA109EF2
BA4590AA0810D5B587B5636409B87FC4581142DA163A600EC8255EE82BFEFCE774BFC03F79FD75D51EA3BB3E526EBF02CBB027E0510DA27152
D87AE01C5C25724DB8A62B8EE81BD346189574D87D63F84065778D80267D133441A4B8453B5497E467AB766964EBBC53735848CC6602D90B3C
6C26C1253213F85546E2625D6CF4776EFCDD176CB3D85597D5AF6D007136DAF736E5DE787C052CC23E20BE832CB0264AD5DB0B3C5F3199FDAD
983138CB23DBC8CA538855BD0EF9E7C5A2725942DB236D819720540AE53E67B397CD6CECD286A1DD7FAD1E8526E6C6A452B044A11FE305CA60
095900C51F2E0D2CC0C8E6E4F899E8E65AD734538F08E7B32F1EA7FCA78846BF0C87A7EB55A883D8E090C8899815AEA76F831F9489507D46AD
A89B256C317168CC7023767DB2C69FF2B22A424E1D3349CE5104D121E32F48ABDB0C789411670FEB373DB7FA272040959D04A6082AC9A3417E
00B833CE02DC49B452D3F83515F312FCE24F1DF7C9E18E15A78A7DDC06502A57011DAB9E3C2E869FB3FBC0BF8CE06C2BA943EEE1C6910DE4BD
C17498A00618CFE621EA6222FC6E3F981C3F7594783A7AB74D67D0EECA3E474A8B1CFF3EB55A18B8531C230D89EA315B3FF69A04CD8D8575DF
B641497A630E4DABEC3E58EC9A44D5F5DEAC64559EB21169A9D2CC4C7A923C4F40E275AFD4283299365D9091A832783689A1BFA8FC304B65E0
85DE35FD2087BC159A0A3A58C92D67BBD8455D643686BF36C0FA915F0CCC63499177585442FF7ED3D1AD63D5CAD4CE743B07FD4322F7CFFEC3
5722E1AE37EE4B994FB3E43D7874929AC33E1634FB469C323F5509A5158FDF2A428767589D46989BAD0CF35CB" />

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

49.
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

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

51.
Anti Forgery (Output)
<input name="__RequestVerificationToken" type="hidden"
value="4U_xgmVmpHiOZSBnkpV8mPulShQ5nRvK2aAmwV31xLPqJQ721W67UTvQ
nk00Jal97mxzkLo8gn81tDI4PnQ2bNg4abg1" />
Cookie:
__RequestVerificationToken=WgBwIxKirHqEO-
L94t0T2FpFJcePf2xinI6MFxi6J5NuCQRExvj_duLa7KWGlARQ5VaB20siCSgxL
_e0OOWrEnIcAYQ1

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

53.
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

54.
Visual Studio 2012 – Role properties
Azure Management Portal

55.
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

56.
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>

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

58.
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

59.
“Desktop”

60.
“Facebook”

61.
“Mobile”

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

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

64.
3 DisplayModes voor
de _Layout.cshtml file

65.
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?

66.
Welke grootte VM kies je?
Extra Small Small Medium
Shared CPU 1 CPU 2 CPU
768 MB 1,75 GB 3,5 GB
20 GB 225 GB 490 GB
5 Mbps 100 Mbps 200 Mbps
€0,015/uur €0,090/uur €0,1790/uur
6x Extra Small 2x Small

67.
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

68.
3 DisplayModes voor de _Layout.cshtml file

69.
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

70.
Performance logs opgeslagen op Blob Storage
Paraleap
AzureWatch

71.
New Relic: Time consumption
Response times

72.
Management Portal: Blob
Performance counter web role

73.
Hoe is het verloop in donaties?

74.
Hoeveel servers hadden we nodig?
2011 2012
Vraag een plaat aan 12 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

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

76.
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

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

78.
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

79.
LINKJES

80.
Linkjes
Email
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

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

82.
VRAGEN?

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