Computer Science & Information Systems

Cloud Computing – Lab Sheet

Module 5.1
Objective
In this demo you will build, debug, and deploy a simple “Hello World” ASP.NET Application using Windows Azure and have
the application running on the web in less than 5 minutes
a. Key Technologies
b. Steps to be performed
c. Creating the Hello Windows Azure application
d. Deploying the application

1) Key Technologies
This demo uses the following technologies:
 .NET Framework 4.0
 Visual Studio 2010
 Windows Azure Tools for Microsoft Visual Studio (includes SDK)

1
 2) Steps to be performed

2
 3) Creating the Hello Windows Azure application

Action Screenshot
1. Start Visual Studio 2010
Install the Windows Azure SDK and the
Windows Azure Tools for Visual Studio
Launch Visual Studio 2010 and create a new
project
2. Select File -> New Project
There is a category of projects – Cloud
Services
3. Select the Cloud Service project type
4. Select the Windows Azure Cloud Service
template
We have a new template called “Windows
Azure Cloud Service”
5. Name the solution HelloAzure
Let’s name our new project HelloAzure and
rename the WebRole1 to
HelloAzure_WebRole
6. Click OK to launch a wizard
This template launches a wizard that allows us
to select the type and programming language
for a role within our project.

3
7. From the wizard, add the ASP.NET Web
Role in C#

8. Select the added Role and click the edit

icon.

9. Rename from WebRole1 to

HelloAzure_WebRole

4
10. Wait for the new solution to be created
 Visual Studio will now create a new
solution
 This solution will contain two projects
 The first project named
HelloAzure_WebRole is a standard
ASP.NET project
 The second project is a new Cloud Service
project

11. Double click on the Default.aspx page to

open it in the design view

 This Cloud Service project references to

our ASP.NET project. It also contains a
configuration file that defines the model for
our Windows Azure solution. We’ll take a
look at this model in just a few minutes.

5
12. Expand the Toolbox
 First, let’s build our HelloAzure web page.
13. Drag and drop an ASP.NET Label Control
 Let’s open the default web page
 Now we’ll add a standard ASP.NET label control to
our default page.
14. Change the Font->Size property for the new label
to XX-Large

 Let’s go ahead and adjust the font size on the label

15. Right click on the design surface and select View

Code from the context menu to view the
Default.aspx.cs code behind file.
16. Add code in the Page_Load event to set the text for
the label
 Now let’s add a bit of code to display the text “Hello
Windows Azure” in the label

17. Open the ServiceConfiguration.cscfg file

 Look at the model that defines our Windows Azure
application. Navigate over to the HelloAzure Cloud
Service project and open the
ServiceConfiguration.cscfg file
 This configuration file defines the roles for our
Windows Azure project. As you can see here, it
also defines the number of instances per role.
 Let’s simply change the number of instances here to
2

6
18. Select Debug->Start Debugging
 Now let’s start the application in debug mode or just
press the familiar F5 button.
19. NOTE: It will take 30-90 seconds until the
devfabric starts.
 This will cause the ASP.NET project to be compiled
into a .NET assembly, just as normal. This will then
start the Windows Azure Development Fabric.

20. Once the devfabric starts, expand the HelloAzure

application in the devfabric and expand the
WebRole
 The Development Fabric, or simple devfabric, is a
simulated environment for developing and testing
Windows Azure applications on your machine.
21. Select the WebRole and show the two instances
that are running
 Here you can see the Development Fabric UI.
 Notice that we have a new deployment containing
our HelloAzure application
 If we expand the WebRole for the HelloAzure
application we can see that there are two instances
for this role.

7
22. Switch over to Internet Explorer to show the
application
 Here we can see our simple ASP.NET web
application and the text “Hello Windows Azure”

23. Switch back to Visual Studio

24. Set a breakpoint on the line that sets the label text.
 Let’s quickly switch back over to Visual Studio and
set a breakpoint

25. Switch back to Internet Explorer and refresh the

page.
26. Switch back to Visual Studio to see the breakpoint
27. Press F5 to continue execution
 Notice that we can drop into Visual Studio to debug
our project and step through lines of code – just as
we normally do.

28. Stop the application by closing Internet Explorer

8
 4) Deploying the application

Action Screenshot

1. Switch back to Visual Studio

2. Right click on the HelloAzure project
and select Publish from the context
menu
 So you’ve seen how we can build and
debug simple web applications for
Windows Azure with the new Visual
Studio extensions and the SDK
 Now let’s deploy our HelloAzure
application to the cloud
 Let’s switch back to Visual Studio
 To deploy our app, first let’s right click
on the HelloAzure Cloud Service
project and select Publish
 This will compile and build the solution.
It will also create a new service
package, essentially a zip file,
containing the assemblies and
configuration files for the solution.

3. Copy the path where the service

package was published from the
Windows Explorer address bar.
 Once the publish process is complete,
Visual Studio will open the directory
where the service package was

9
 created
 It will also launch the default browser
and navigate to the Azure Services
developer portal
 Let’s copy the path to this file

4. Switch over to the browser window that

was launched during the Publish
process
 Now let’s login to the Azure Services
management portal using our Live ID.
Note: You should have created a
developer account in the Azure
Services developer portal to deploy
new applications to Windows Azure or
use Windows Azure Storage Services.

5. Select the PDC08 CTP Project

 Here you can see the developer portal
that includes all the Windows Azure
platform services linked to the
navigation tab on the left here.
 We need to select our PDC project

10
6. Click on the New Service link
 Here you can see the developer portal
and the projects that I have already
configured.
 Let’s create a new project.

7. Click on the Hosted Services project

type
 Next we’ll select the type of project we
want to create in the developer portal.
 In this case we want to deploy an
application to run in Windows Azure,
so we’ll select Hosted Service.

8. Give the Service Label like Hello

Azure.
9. Press the Next button.
 Next let’s give our project a name.

11
10. Enter a sub-domain name and press
the Check Availability button.
 On the next step we can specify a sub-
domain for the application.
 With the current CTP, your application
will be hosted at CloudApp.net
11. Continue this process until you find an
available sub-domain.
 Let’s enter a sub-domain name and
check the availability.
12. Press the Create button to create the
new project.

13. Click on the Deploy button below

Staging.
 You can now see your new project in
the developer portal.
 Notice that with a Windows Azure
project, there are two environments:
Production and Staging.
 Now let’s deploy our application into
the staging environment.

12
14. Browse to the directory where you published the solution. ,

 On the next page we can browse to the service package that

we published from Visual Studio
15. For the App Package, browse or enter the full path to the
HelloAzure.cspkg file. You can paste in the path you
copied earlier.
16. For the configuration file, browse or enter the full path to the
ServiceConfiguration.cscfg file located in the same
directory.
 We also need to browse to the ServiceConfiguration file that
was also published from Visual Studio. You might recall that
this file defines the roles and number of instances per role
17. Enter a label for the deployment, such as Hello Azure Demo
 Finally, we’ll give the deployment a label and start the
deployment.

18. Click the Deploy button

13
19. Wait for the service package to be uploaded. Once it is
uploaded, you will be redirected to the project details page.
 At this point, the service package will be uploaded to the
Azure Services Developer Portal

20. Wait until the package is has been deployed.

 Once the package has been uploaded, the assemblies, ASPX
pages, and configuration files will be extracted.
 This can take a few minutes.

14
21. Click the Run button to start the HelloAzure application.
22. NOTE: This process will take anywhere from 3 – 10 minutes.
 Once the package is deployed, we can then start the
HelloAzure application.
 When we click the Run button, this is when the real magic
happens.
 At this point Windows Azure will start up virtual machine
instances for each of the roles.
 In the case of our HelloAzure application, as you can see we
have two instances allocated for the WebRole.
 Once the instances are started, then our application – the
assemblies, ASPX pages, etc. that we uploaded earlier – will
be deployed into each of the instances.
 This process will take a few mintues.

15
23. Click on the Web Site URL for the Staging environment.
 Once the application is running in staging, we can now
access it using the temporary Website URL generated below.

24. View the HelloAzure web site in the new browser window
25. Close the browser window.
 Here we can see our Hello Windows Azure application
running in Windows Azure – it’s publicly exposed on the web!
 In fact, you could even access it now if you could enter this
long, temporary web site URL.

16
26. Click on the sync button between the Production and Staging
environments
 Let’s see how we can move our application from staging to
production.
 We’ll click on the sync button and confirm that we want to
move the switch the staging environment with production.

27. You will be prompted to confirm that you want to switch to the
production environment. Press the OK button when
prompted.
28. NOTE: This can take a few minutes to start the production
environment.

29. You should now see that the production environment is

running.
30. Click on the Web Site URL below the Production
environment.
31. NOTE: It may take a few minutes for the DNS entries to be
updated.
 You can now see that the production environment is running.
 Let’s now browse to our application running in production.

17
32. You should see the web page with the text Hello Windows
Azure dialog.

 Finally, you can see that our simple, Hello Azure application
is running in the production environment.
 Notice that the URL is the sub-domain on cloudapp.net that
we specified when creating the project in the Azure Services
Developer Portal.
 If you have internet access you can browse to this site now.

18
Summary
In this lab you saw three key things:
1. How to build and debug web applications using the familiar ASP.NET programming model and the new Windows Azure SDK and
extensions to Visual Studio.
2. How to use the Azure Services Portal to create projects, deploy applications, and manage the staging and production environments.
3. How to deploy, start, and manage a Windows Azure application through the Azure services Developer portal. We created and ran a new
application in the cloud.

1. References:
i) https://www.microsoft.com/handsonlabs
ii) For additional demos of the Windows Azure platform, please visit http://www.azure.com.

19