Creating

fallsnowpeasInternet and Web Development

Nov 12, 2013 (4 years ago)

196 views

NSWI152
-

V
ývoj cloudových aplikací


Filip Zavoral, Jaroslav Keznikl, Tomáš
Pop

http://ulita.ms.mff.cuni.cz/pub/predn/NSWI152/

Průběh semestru, požadavky


Průběh semestru


0/2 Z, průběh semestru nepravidelný


některé týdny cvičení
-

'
Guided Tour
'

v
SW2


některé týdny praxe
-

samostatná práce


Platformy


Windows Azure


Filip Zavoral


cca 3 týdny cvičení
-

instalace, deployment, multi
-
tier aplikace


cca 3 týdny praxe
-

vlastní aplikace


Google App Engine


Jaroslav Keznikl


2 týdny cvičení


2
-
3 týdny praxe


1 týden cvičení Map/Reduce


Amazon Elastic Cloud


Tomáš Pop


2
-
3 týdny cvičení + praxe



Znalosti


NSWI150 Virtualizace a cloud computing


speciálně část týkající se cloudů


http://
data.ksi.ms.mff.cuni.cz/svn/NSWI150pub/index.html


C
#
, ASP.Net, Python


běžné věci na základní úrovni, copy
-
and
-
paste


Účty


Microsoft Account
(
Window
s Live ID)


http://
windows.microsoft.com/en
-
US/windows
-
8/microsoft
-
account#1TC=t1


Google Account


Amazon Account


!!
platebn
í

karta

-

strhnou 1
$


telefon

-

zavolaj
í na ověření identity


Virtuální stroje


VMware
vSphere
C
lient /
W
eb
C
lient


Windows
,
VS11
,
.Net

4.5

Prerekvizity a požadavky

Windows Azure


Filip Zavoral

Microsoft Azure

Windows Azure Cloud Components

Pl
á
n


Studijní
materiály,
odkazy
, harmonogram


http://ulita.ms.mff.cuni.cz/pub/predn/NSWI152
/
(Ulita


Výuka


NSWI152)


Příprava prostředí


Virtual Machines


Instalace SDK, WATK


Aktivace Windows Azure


Window
Azure Management
Portal


HelloWorld


Příprava infrastruktury


Windows Azure Training Kit


Hands
-
on
Labs / Web Sites / Building and Publishing... / Lab Manual


Vytvoření,
deployment a spuštění aplikace


GuestBook


Vícevrstvá komplexnější reálná aplikace


Web role, worker role, queues, blob, tables


Vlastní aplikačka


Individuálně nebo komplexnější aplikace ve dvojici


L
i
b
o
voln
ý jazyk: .Net, Java, Php, Node.js, Python ...

Příprava prostředí


Virtual Machines


VMware vSphere Client


bobr.ms.mff.cuni.cz

-

SIS login /
pwd


vSphere Web client


https://
bobr.ms.mff.cuni.cz/vsphere
-
client


[
VCenter
]
VM: BOBR / VIRTLAB / Cloud / Students


Nastavit
IP
10.2.
1
.
x
x




Grupík


Subnet
255.255.0.0, GW 10.2.0.1, DNS 195.113.19.71/77


RDP: acheron.ms.mff.cuni.cz:102
xx


Power Options
-

never sleep


Windows Azure SDK pro VS 2012


http
://www.windowsazure.com/en
-
us/develop/net/tutorials/get
-
started/


Aktivace Windows Azure


http://
www.windowsazurepass.com/azureu


Window Azure Management Portal


https://manage.windowsazure.com
/


Windows Azure Training Kit


http
://
ulita.ms.mff.cuni.cz/pub/predn/NSWI152/azure/watk.exe


c:
\
azure
\
watk


Have a code

Redeem

Microsoft Azure Academic Licence


Cloud
Services


2
Small Instances for Web or Worker Role



Data Management


Two
1 GB Web Edition SQL Databases


35
GB of Storage


50,000,000
Storage Transactions



Data Transfers


16
GB Bandwidth (8 GB In, 8 GB Out)



Messaging


750
Service Bus Relay Hours


250,000
Service Bus Messages



Identity


100,000
Access Control
Transactions

HelloWorld


Windows Azure Training Kit


Hands
-
on Labs /
Web Sites
/
Building and
Publishing

...
/ Lab
Manual


Objectives


Create a
Web Site
from the Windows Azure Management
Portal


Use MS VS 2012
to build a new ASP.NET MVC 4
application


Deploy

the application using Web Deploy from Visual
Studio


Setup


watk
\
Labs
\
ASPNETAzureWebSitesVS2012
\
Source


setup.cmd
-

Run as administrator !


E0
:
Creating an MVC 4 Application using Entity Framework
Code


Task 1
-

Creating an ASP.NET MVC 4 Application in Visual
Studio


E1
: Publishing an MVC 4 Application using Web
Deploy


Task 1
-

Creating a New Web Site from the Windows Azure
Portal


Task 2
-

Configuring the Database
Server


Task 3
-

Publishing an ASP.NET MVC 4 Application using Web Deploy


Create Application


E0
: Creating an MVC 4 Application using Entity Framework Code


Task 1
-

Creating an ASP.NET MVC 4 Application in Visual
Studio


Create New Project


[1
-
2] Installed Templates, Visual C# Web, .
NetFramework

4.5,
ASP.Net

Web Application


[3] Internet Application


Model
-
View
-
Controller


Solution explorer: Models, Views, Controllers, ..., ...


Create Person Model


[4] Solution Explorer/Models: Add class Person


[5
-
6] Models/
Person.cs
:

add
properties, build

class
PersonContext

:
DbContext

{
DbSet
<Person
>
People
; }


Create Person Controller & View


[7
-
9]
Solution
Explorer/Controllers, Add Controller,
Scaffolding options

(!)

Controllers:
PersonController
, Views/Person: Create/Delete/... .
cshtml

@
Html.LabelFor


.
EditorFor



.DisplayFor



.Display
Name
For

.ActionLink


[10
-
11] Controllers/
PersonController.cs
:
see generated methods


Do not close Visual Studio



ASP.Net

MVC tutorials & hands
-
on labs


http
://www.asp.net/mvc/tutorials/hands
-
on
-
labs



Create Web Site & Database Server


E1
: Publishing an MVC 4 Application using Web Deploy


Task 1
-

Creating a New Web Site from the Windows Azure
Portal


Create Web Site


[1
-
3] Azure Portal, [dole] New,
Compute, Web
Site, Quick Create,
vlastn
í

URL


[4
-
6]
(wait)
Web Site menu

Scale
-

Free / Shared / Reserved

Dashboard

/ Monitor / Configure
-

... ...
explore

URL
-

try


Download Publish Profile


[7
-
8] Dashboard, [
vpravo
] Quick Glance, Download publish profile



Task
2
-

Configuring the Database
Server


Create Database Server


[1] SQL Databases, Servers, Add
-

remember

password!

Create db server, not database!


Quick Glance: URL, login


Allow Connection


[2
-
3] Database server / Configure / Allowed IP address, Save!


acheron.ms.mff.cuni.cz
-

195.113.18.36





Publish Application


E1
: Publishing an MVC 4 Application using Web Deploy


Task
3
-

Publishing an ASP.NET MVC 4 Application using Web
Deploy


Establish Connection


[
1] VS, Solution Explorer:
WebSite

(
rmb
) / Publish


[2] Profile / Import: Publish Profile


Test Connection


[3] Connection: Validate Connection, Next


Deploy Configuration & Create Database


[4] Settings: Databases,
PersonContext

[...]


[5
-
6] Destination Connection String: Server name, User, Password, new
db

name
-

OK, Yes


Publish Application


[7
-
8] Publish Web: Preview / Publish


[9
-
10] URL:
xxxx
/Person


E2
: Publishing an MVC 4 Application using
Git


Samostatně


E3
: Ftp Access


Quick Glance: Reset Deployment Credentials


ftp user = deployment user

GuestBook


Windows Azure Training Kit


Hands
-
on Labs /
Cloud Services

/
Intro to Cloud Services
-

for VS 2012

/
LabM


Objectives


Create
applications

in Windows Azure using
web roles
and
worker roles


Use Storage services including
blobs
,
queues

and
tables


Publish an application to Windows Azure Cloud Services


Setup


watk
\
Labs
\
IntroToCloudServices
-
VS2012
\
Source


setup.cmd
-

Run as administrator !



Exercises


E1: Building Windows
Azure
Application with Blobs and Tables


E2: Background
Processing with Worker Roles and Queues


E3: Publishing
a Windows Azure Application


GuestBook

Outline


E1
: Building Windows Azure Application with Blobs and
Tables


Task 1
-

Creating

the Visual Studio
Project


Task 2
-

Creating a
Data Model
for Entities in Table
Storage


Task 3
-

Creating a
Web Role
to Display the Guest Book and Process User
Input


Task 4
-

Queuing

Work Items for Background
Processing



E2
:
Background
Processing with Worker Roles and Queues


Task 1
-

Creating a
Worker Role
to Process Images in the
Background



E3
: Publishing a Windows Azure
Application


Task 1
-

Creating

a Storage
Account

and a Cloud Service
Component


Task 2
-

Publishing

the Application to the Windows Azure Management Portal


Task 3
-

Configuring

the Application to Increase the Number of
Instances


Task 4
-

Testing

the Application in the Staging
Environment


Task 5
-

Promoting

the Application to
Production


E1T1
-

Create Application


E1
: Building Windows Azure Application with Blobs and
Tables


Task 1
-

Creating the Visual Studio
Project


Create Cloud Service Project


[1
-
2]
Run VS 2012
as administrator

Windows Azure Compute
Emulator


[3
-
4]
Installed
Templates,
Visual C#
Cloud
,
.
Net

4.5,
W Azure Cloud Service
,
vyplnit


Create Web Service Web Role


[5] New W Azure Cloud Service, Visual C#,
ASP.Net

Web Role
>


GuestBook_WebRole


[6] Solution Explorer
-

explore


P
roje
c
t
s in Solution


GuestBook

-

service definition, local / production
configuration

of roles, .
cscfg


GuestBook
_
WebRole

-

ASP.Net

Web Application


GuestBook_WorkerRole
,
GuestBook_Data
, ...



Task 2
-

Creating a Data Model for Entities in Table
Storage


Task 3
-

Creating a Web Role to Display the Guest Book and Process User
Input


Task 4
-

Queuing Work Items for Background
Processing


E1T2
-

Data Model


Task
2
-

Creating a Data Model for Entities in Table
Storage


Key/Value Tables


Key/Value Table
-

scalable data storage




NSWI150


Table storage
API

WCF
Data Services
(
ADO.Net

Data Services Framework)

REST API

WCF Data Services Client Library
(
.Net

Client Library
)


MyEntity

:
TableServiceEntity

-

schema class


MyContext

:
TableServiceContext

-

table access


MyContext.IQueryable
<
MyEntity
>
-

table definition and mapping


Create Data Project


[1
-
2] New Project, Installed, Visual C#, Windows,
.Net

4.5,
ClassLibrary
,
GuestBook_Data


[3] delete Class1.cs


[4
-
5] Solution explorer,
GuestBook_Data
, Add Reference, Framework

System.Data.ClientServices
,
Microsoft.WindowsAzure.StorageClient


Create Schema Class


[6] Add Visual C# Items, Class,
GuestBookEntry.cs


[7] import
StorageClient

library


[8] inherit class from
TableServiceEntity

PartitionKey
,
RowKey
,
TimeStamp

E1T2
-

Data Model


Task 2
-

Creating a Data Model
... continued


Define Schema


PartitionKey



day
-

partitioning,
RowKey



reverse
time
-

sort
order


[9] default constructor
-

initializes keys


[10
-
11] other properties
-

data row
, save

Message,
GuestName
,
PhotoUrl
,
ThumbnailUrl


Create Context Class


[12
-
15]
GuestBook_Data
, Add Class,
GuestBookDataContext.cs

:
TableServiceContext

constructor
-

initialize with account info,
IQueryable
<
GuestBookEntry
>


[
16
-
17]

Add Class
GuestBookDataSource
.
cs

-

object bound to data controls


[18
-
19] add
storageAccount
, context, constructor


[20
-
24] finalize bindings, queries and initializations, save

results
=
from
g in
this.context.GuestBookEntry


where
g.PartitionKey == DateTime.UtcNow.ToString("MMddyyyy
")


select
g
;

var
results =
from g in this.context.GuestBookEntry


where g.PartitionKey == partitionKey && g.RowKey == rowKey


select g
;

var
entry = results.FirstOrDefault<GuestBookEntry>();

entry.ThumbnailUrl
= thumbUrl;

this.context.UpdateObject(entry
);

this.context.SaveChanges
();

[21,23]

LINQ queries

E1T3
-

Web Role


Task
3
-

Creating a Web Role to Display the Guest Book and Process User
Input


Create Application Page


[1] SE:
GB_WebRole
, Add reference to Solution /
GuestBook_Data


[2] delete automatically generated default page GBWR/Default.aspx


[3] Add existing item
watk
\
itcs
....
\
Source
\
Ex1...
\
Assets
\
*.*

page
already prepared
by
watk

-

code, images, styles

-

explore


Process Guest Entry


[4
-
6]
GB_WebRole
: Default.aspx
-

add using, declarations

note:
GuestBook_Data


[7] add
event handler

to
SignButton_Click

upload to blob, new table entry

GuestBookEntry
entry = new GuestBookEntry() {



GuestName
= this.NameTextBox.Text,



Message
= this.MessageTextBox.Text,



PhotoUrl
= blob.Uri.ToString(),



ThumbnailUrl
= blob.Uri.ToString()

};

GuestBookDataSource
ds = new GuestBookDataSource();

ds.AddGuestBookEntry(entry);

E1T3
-

Web Role


Task
3
-

Creating a Web Role
... continued


Load Page


[8] Timer1_Tick
-

periodical refresh


[9]
Page_Load

-

enable timer


Initialize Storage


[10] replace
InitializeStorage

default code by
watk

execute only once, read account settings, create and configure blob container






Create Storage


[11] SE: GB, Roles, GBWR Properties, Settings
-

Add Setting
DataConnectionString
, [...]


[12
-
13] Create
WAzure

Storage Emulator, save

emulator v
ramci

VS SDK, pro deployment se
dosadi

spravny

connection
string
-

nezapomenout


[14
-
16] Setup Environment
-

Global.asax.cs

-

using,
ApplicationStart

storageAccount

=



CloudStorageAccount.FromConfigurationSetting
("
DataConnectionString
");

blobStorage =

storageAccount.CreateCloudBlobClient
();

container
= blobStorage.GetContainerReference("guestbookpics");

container.CreateIfNotExist
();

E1T4
-

Queue & Run


Task
4
-

Queuing Work Items for Background
Processing


Declare and Initialize Queue


[1
-
2] Default.aspx class _Default
-

declare
queueStorage


[3]
InitializeStorage

-

add initialization code after blob

queue "
guestthumbs
"


Enqueue

Message


[4]
SignButton_Click

-

locate queue, form message,
enqueue

-

add code






Verification


R
un Application


Windows Azure Compute Emulator

(Development Fabric)


[1
-
3] F5 build & run
-

browser

system tray
-

Show Compute Emulator
, firewall
-

allow access


Storage Explorer


[4]

VS:
View/ServerExplorer
/
WAzureStorage
/
Develpment

-

table, b
lob

queue
=
queueStorage.GetQueueReference
("
guestthumbs
");

message
= new
CloudQueueMessage
(
string.Format
("{0},{1},{2
}",


blob.Uri.ToString
(),
entry.PartitionKey
,
entry.RowKey
));

queue.AddMessage
(message);

E2
-

Worker Role


E2
:
Background
Processing with Worker Roles and Queues


Task 1
-

Creating a Worker Role to Process Images in the
Background


Create Worker Role


[1
-
2] stop debugging, continue with the solution


[3
-
6]
GuestBook
, Roles, New Worker Role, add references


Programming Worker Role


[7
-
8]
WorkerRole.cs
:

add using,
WorkerRole
:

add queue and blob properties


[9]
OnStart

-

worker initialization

read
config
,
init

blob & queue, catch


[10]
Run

-

replace default body
-

main worker logic

fetch & parse
msg
, read blob, create thumbnail, write blob, update thumbnail

using
-

unmanaged
IDisposable

objects processing


[11]
ProcessImage

-

create thumbnail, save to output stream


Storage Service


[12] Create
WAzure

Storage Emulator
(


E1T3.12
-
13)


Verification


[1
-
6] Run
-

wait a moment, create an
e
ntry, wait a moment


[4] Server Explorer

-

explore data

E3T1
-

Create Storage and Component


E3
: Publishing a Windows Azure
Application


Task 1
-

Creating a Storage Account and a Cloud Service
Component


Create
Afinity

Group


[1
-
5] Portal/Networks: Create
VirtualNetwork

/
Afinity

Group




-

no other options


Create Storage


[6
-
7] New Data Service
-

Quick Create


[8
-
9] Create
unique!

URL
-

wait


[10
-
12] Manage Keys
-

store

Access Key


Create Cloud Service


[13
-
16] New Compute Cloud Service
-

the same URL as [8]
(if possible)


[17] do not close browser

-

explore


E3T2
-

Publish


Task
2
-

Publishing the Application to the Windows Azure Management
Portal


Deployment options


Visual Studio, PowerShell
WAzure

cmdlets
,
WAzure

Portal

other options


WAzure

Deployment Lab


Service Configuration


[1
-
3] continue with the solution

(or Ex3/.../GuestBook.sln)


[4
-
5
] update
ServiceConfiguration.Cloud.cscfg


!!!

GuestBook
/Roles/
GuestBook
_*Role/Properties/Settings
-

Connection String

[...] Manual

replace all 4 values (!) by Storage Account Key and Access Key
-

see
img


Generate Package


[
6
]

VS: GuestBook, Package: Cloud/
Debug

enable
NuGet

download

build
,

Begin
\
GuestBook
\
bin
\
Debug
\
app.publish
\
*
.cspkg
, .
cscfg


Upload Package


[7
-
1
5
] Cloud Service, Dashboard,
Staging
, Upload


[1
3
]

!

Deploy even if one or more roles contain a
single
instance

-

wait



Task
3
-

Configuring the Application to Increase the Number of Instances


Task 4
-

Testing the Application in the Staging Environment


Task 5
-

Promoting the Application to
Production

watk

zde

trochu

zmaten
ý, nejlépe
viz obrázek xml

nej
dřív vyzkoušet


v staging, potom
upgrade to production

!!!
Pozor

!!!

we
watk

chyb
í

upozorn
ění

Usefull

tools & practices


Useful tools


Storage explorer


http
://azurestorageexplorer.codeplex.com/



Practices


Using Trace


http
://
blogs.msdn.com/b/windowsazure/archive/2012/10/25/using
-
trace
-
in
-
windows
-
azure
-
cloud
-
applications
-
1.aspx


.
cscfg
:
Microsoft.WindowsAzure.Plugins.Diagnostics.ConnectionString



Local debugging


run
locally, remote data access



Displaying error codes and exceptions (web role)


web.config
:


<
system.web
>



<
customErrors

mode="Off
"/>