Setting up website deployment to Windows Azure Cloud Services

In the previous posts in this series we created an ASP.NET MVC website, added Twitter Bootstrap styling, and implemented basic database connectivity using a Micro ORM (SqlFu) and FluentMigrator for built-in database migrations. The advantages of building database migrations right into the application will become clear in this post, as we’ll be going to deploy the website to Windows Azure. This is going to be easy.

We start with our solution, it contains the MVC4 website project and a referenced project “Service.Contracts” that contains classes that are used in external communications.

Before setting up deployment to Azure, we need to decide which Azure service we are going to use. We can chose rel="noopener noreferrer" between:

Both these services run on the Windows Azure Cloud, and both are well-suited for hosting our ASP.NET MVC based website.

Azure Websites are a form of shared hosting: the website is running on web servers that are shared with other applications. This means the environment is more restrictive, you can’t change any machine settings because that could impact other websites running on the same host. Hosting with Azure Websites is the least-expensive option: for smaller websites that have light traffic it is even completely free. Azure Websites can be scaled-up to multiple dedicated machines for high volume websites.

On the other hand, Azure Cloud Services are a form of dedicated hosting. The virtual machine is never shared and it is possible to change its configuration, using a configuration script. There are API’s to interact with the Azure Cloud environment and do more advanced things. For this post I will deploy the website to an Azure Cloud Service, with the data going into a SQL Azure database.

Start by right clicking the web project and select “Add Windows Azure Cloud Service Project”. (If this option rel="noopener noreferrer" does not appear in your Visual Studio, you’ll need to install the latest Windows Azure .NET SDK for Visual Studio.

image 

This will create a new project, in my case it is called “Auction.Web.Azure”. This project also becomes the new default project in the solution. If you compile-run the project now, it will run inside the “Azure Emulator” environment.

image

If everything worked, you will see the Azure Storage Emulator being started, and then the web application showing up just like before, but now running inside a local emulator for Azure. You can check the status of the emulator by right-clicking the small Azure icon in the System Tray.

image

The emulator starts your website on port 80, the default HTTP port. If you get “Socket Exception (10013)”, that you probably have IIS or IISExpress running on port 80. Stop that service and then try again.

image

If you get a database error like “Cannot create database ‘DevelopmentStorageDb201210’”, then you can delete the development storage database (named ‘v11.0’ in my case, with Azure SDK 2.0) with the following sqllocaldb commands:

C:\ > sqllocaldb p v11.0
C:\ > sqllocaldb d v11.0

image

You can see the configuration of your Azure Development Emulator in:
C:\Users\[Your Account]\AppData\Local\DevelopmentStorage\DevelopmentStorage.[SDK Version].config

If everything went well, then you see the site come up at http://127.0.0.1/

image

And by clicking the Azure Icon in the System Tray, you can see the status of the Azure Compute Emulator and the Azure Storage Emulator.

image

image

The Emulators use the configuration that is specified in our newly-created Azure Cloud Service project. Everything is still at the default values, but we can, for instance, specify that we want our website to run on two virtual machines, and the emulator will start two IIS Express processes and run our website twice.
image

Double-click the Role item in the Solution Explorer to get to the Configuration screen. Then set the instance count to 2.

image 

Of course, this is an emulation for development and it will not start two real virtual machines, as the ‘real’ Azure Cloud Service will do, but this is still a good test.

If you specify two instances of your website, you can see that the Emulator starts two IIS Express instances of your website (at addresses 127.255.0.0:81 and 127.255.0.1:81 in my case) and then it creates a virtual loadbalancer at 127.0.0.1:80 that distributes incoming request to these two applications.

image

You can connect to the instances individually as well as to the load-balanced endpoint:

image image image

The Database
Our application uses a SQL Server database. Locally I have been using SQL Express for development. In the Azure environment we’ll be using SQL Azure, which is a special version of SQL Server 2012. It understands most normal SQL statements, except instructions that are managed by the Azure cloud environment, such as PARTITION.

The website reads the connection string from web.config. We need a mechanism for the application to specify a different connection string in the Azure environment. We will use a web.config transform to accomplish that.

In Solution Explorer, select the Solution, right-click and select “Configuration Manager…” in the menu.

image

Name the Configuration “Cloud” and do not check “Create new project configurations”.

image

Also create a “Cloud” configuration for the Web project. You now have a “Cloud” configuration on the solution level that uses a “Cloud” configuration on the Web project and Release configuration on the other two projects.
image

Now we can add a Config Transform to the web.config file inside the Web project.

image 
It will automatically be named “Web.Cloud.config”

image

We will put the database connection string in there after we have created a SQL Azure database. When running in the Azure Cloud, our website will use the transformed web.config, read the connection string to SQL Azure and connect to it. On startup of the web application, the built-in migration classes will then initialize the database scheme and seed the database with initial data.

Registering with Windows rel="noopener noreferrer" Azure

Before you can deploy to Windows Azure, you’ll have to get rel="noopener noreferrer" an account there. Goto http://www.windowsazure.com and click the “Free Trial” button to get started.

image

Register an account, then go to the Azure Management Portal.

image



Create the SQL Azure database
First, we will create the database. Because we have built-in migrations, we only need to provision an empty database for the web application.

Click “Create An Item” (or click the big “+ NEW” button in the Footer) and select “Data Services”, “SQL Database”, “Custom Create”.

image

Give the database a name, and click the next arrow. Then, specify a username and password, and a datacenter region for the server. Select the region closest to your users, and make sure all other Azure Services for your application will use the same region.

image

After confirming these settings, a database will be created. To connect our application, we’ll need to know the database connection string and copy it over to our Web.Cloud.config transform.

To get the connection string, click the database and then click the “View SQL Database connection strings for ADO .Net, ODBC, PHP, and JDBC” link.

image

Copy the ADO.NET connection string, and open the Web.Cloud.config transform. Uncomment the connectionStrings part and paste the connectionString in there. Enter the password you used before.


<?xml version="1.0" encoding="utf-8"?>
<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
<connectionStrings>
<add name="DefaultConnection"
connectionString="Server=tcp:qu5k007ato.database.windows.net,1433;Database=CloudAuction;User ID=cloudauction@qu5k007ato;Password={your_password_here};Trusted_Connection=False;Encrypt=True;Connection Timeout=30;"
xdt:Transform="SetAttributes" xdt:Locator="Match(name)"/>
</connectionStrings>
<system.web>
<compilation xdt:Transform="RemoveAttributes(debug)" />
</system.web>
</configuration>
view rawWeb.Cloud.config hosted with ❤ by GitHub


Create the Deployment package
Now that we have the database connection string, we are ready to prepare the deployment package for the application that we’ll deploy to the ‘real’ Azure Cloud.

There are three ways to deploy an Azure Cloud Service:

  • From Visual Studio, using Publish…
  • From the Azure Management Portal, using Package…
  • From Source Control

The last option is the most advanced, but it requires more steps to setup. We can do that later. To get started, I prefer the second method. It takes a few minutes to publish a package to Windows Azure, and when using Publish from inside Visual Studio you can’t interrupt the process or it fails. In my experience, creating a Package and then uploading it to the portal is more robust.

To create a package, right-click the Azure project and select “Package”. Select Cloud for both Service and Build configuration.

image

This will result in two files being generated for the deployment. Visual Studio opens an Explorer windows when these files are ready:

image

Now we will deploy this package to Azure.

Create the Cloud Service

Now, click “Create An Item” and select “Cloud Service”

image

I am naming my application “cloudauction”. It will become available as http://cloudauction.cloudapp.net/ after it is deployed, later we can this to another DNS name.

image

Now we will deploy the package we created earlier.

Click the Cloud Service you created and then click “New staging deployment”

image

Give the deployment a name (I would advise adding the date and time, or a build number in the name) and start the deployment process.

image 

Now, if everything went down correctly, you can now access the web application on the staging url. The staging URL is a random name that can be found in the management portal by going into the cloud service, dashboard.

Yes, my site comes up and is running!

image

Now we can swap the staging deployment to production, and then we can access the site at its production url.

image

There it is:

image

Troubleshooting
If something is wrong (which usually happens to me at first), you’ll receive an error on opening the staging url. The error message will be very generic, because Custom Errors are enabled by default. It will be difficult to get good error information.

To get better information we need to hook up Visual Studio to Azure. To do this, we will use the Publish function once. Right-click the Azure project, and select “Publish”. The first time this will bring up a dialog to connect to the Azure Subscription to Visual Studio. The subscription pulldown is empty, so click “sign in to download credentials”

image

Sign in (if you are not signed in already) and save the certificate.

image

Import the downloaded certificate in Visual Studio. Visual Studio will create a cloud storage service for uploading and downloading data. Configure the following dialog.

image

Then click publish. This will build and publish the website directly to Windows Azure Cloud Service. You can also open a remote desktop connection to the Azure server to check the site locally on the remote server. Use the Connect link in the footer of the Instances page to start the remote desktop connection.

image

Another thing that makes troubleshooting and testing your fixes much faster is using the Web Publish feature. This only works for single instance sites, so it is only usable for testing environments, but it is way faster than doing a real deployment, as this skips the whole packaging process and just rel="noopener noreferrer" copies all the files that are changed right to the server.
image

[This post is part of the series Development of a mobile website with apps and social features]