Tips and Tricks

How to setup a Web App on Microsoft Azure

A how to guide to creating a Web App on Microsoft Azure, deploying it using Continuous Deployment and hooking it up to a database.

Author Avatar

Author: Tom McClean

Updated: 24 Jul 2016 12:56

Microsoft Azure offers a really simple way to deploy web based applications quickly. I have showed several people how to use this service so far so I wanted to write a short simple guide detailing how to get a working website online from scratch in Azure.

Microsoft Azure is an online service that provides cloud resources that enable you to host websites, applications and general instructure in a Microsoft Azure data centre. Letting Microsoft worry about maintaining the infrastructure, you just requisition which resources you need and deploy your code.

Once you know how to get a working website up on Azure it seems really simple, but the dashboard in Azure is not very intuitive, so it normally takes being shown or dedicating a lot of time to learning it in order to get something online the first time; hence the brief article. 

 

What will you need?

In order to complete this guide, you will need to have registered for Microsoft Azure and have access to the Portal. You can be on a Free Trial account if you want.

Typically you need to have several things in order to host a website. You need a website (code such as PHP, Html, ASP), A website host (In this case Microsoft Azure), a database (In this case a SQL Azure Database).

You will create a host and database as part of this guide, if you don't already have website code to deploy you could use an example I will provide later on.

You will need about 45 minutes to complete this guide. For each resource you create, you may need to wait a few minutes for it to complete its requisition process.

 

Creating a Database

The option I prefer for reasons of price and simplicity is to use SQL Azure. This is very much like typical SQL Server, but it does lack some features you might be used too. You can still connect to SQL Azure from SQL Server Management Studio but do not get access to SQL Agent and a few other things.

At the time of writing you can get a database from £4 a month, higher price tiers offer you more DTU's. DTU's are effectively a combination of CPU processing and Database transactions - the more DTU's the higher spec the database. The cheapest tier which we will use today offers 5 DTU's and 2GB storage.

In the Microsoft Azure Portal click the "+ New" button in the top left and then select "Data + Storage" in the subsequent menu. You will notice there are tons of different options available from databases to output caches. To proceed select "SQL Database".

In order to get the database online, we need to give it some basic information. Try to fill this out as best you can, I have listed some suggestions below if you aren't sure what to use.

  • Database Name: I tend to use the domain of the website - IE: tommcclean.me

  • Subscription: Select your typical subscription or free trial. This is where the database will be charged against.

  • Resource Group: Up to you what you want to do here, as long as you put all of todays resources in the same group its no problem. Typically you might use this to seperate different clients infrastructure.

  • Select Source: Blank Database

  • Server: If you do not already have a SQL Server, use the tool to create one. As part of doing this you will create an administrator so make sure to remember this.

  • Pricing Tier: I recommend the Basic Tier for this guide.

  • Collation: Keep the default option

Once complete, Microsoft Azure will requisition your database, so we can move onto the Web App.

 

Creating a Web App

Web Apps require an "App Service" which is what costs you money. Within an App Service you can host multiple Web Apps. We will create an "App Service" as part of this guide.

Within the Microsoft Azure Portal click the "+ New" button in the top left, then click "Web and Mobile" and select "Web App".

Like we did when we created our Database, we need to provide a few details in order to kick the process off. Some example inputs are suggested below.

  • App Name: The name or brand of your website - IE "TomMcClean" in my case. After you create your app - this will be part of the default domain name. So if you enter tommcclean, you will get www.tommcclean.azurewebsites.net as a default domain.

  • Subscription: Select the same subscription you used for the database.

  • Resource Group: Select the same resource group you used for the database.

  • App Service Plan / Location: Select one you already own or click to create a new one. The App Service plan encompasses more than one app - so maybe use a more generic name for this. I recommend the "S1 Standard" pricing tier.

Once you are ready - "Create" the resource, and we move on!

 

Allow Access to the Database from Home

This step is optional, but if you are like me in that you want to use SQL Server Management Studio to interrogate your database, you will need to allow your IP address through the SQL Server's firewall.

To begin click "All Resources" in the menu on the left side of the Portal.

Open the SQL Server you created a short while ago by clicking its name in the list. Once this has opened click "Settings" and then in the "Settings" pane click "Firewall".

Determine your own IP address by searching on google for "IP Address" and then enter this information into the Firewall settings screen. Give it a handy label like "Home" or "Work". If your IP Address is 86.187.32.130 for example you can enter this into both the "Start IP" and "End IP" or write your own range if you are confident enough in doing so.

Please note: that unfortunately most home Internet companies do not provide a static IP Address, so you may from time to time have to update your IP Address to retain access.

 

Setup the Deployment Source

A deployment source allows your web app to build your website code to the server whenever a check into source control is detected - I recommend this method over copying your files up as its quick and takes the risk out of your hands.

To start click "All Resources" again and open your web app. Now enter the "Settings" and look around for a setting called "Deployment Source".

Once the "Deployment Source" pane is open, click to choose a "Source". You can pull in code from a wide variety of places, so if you have a reliable code base to use please select the relevant option. If you don't have a code source handy, you can use one of mine by selecting "GitHub" as your source.

If you intend to use my code source, you need to star the following repository - https://github.com/tommcclean/PortalCMS

Next you typically need to authorise the source - such as GitHub so it can have access from Azure, The setup for each source is different so please follow the instructions.

Please Note: Every person I have helped (including me) who has used Visual Studio Online as their source, finds that once you start you need to wait for several hours before it lets you use it. Its terribly annoying - one reason I started using GitHub! However once you get through the initial pain - it won't hassle you again; ever.

Finally - if you can, click "Choose Project" and select "PortalCMS" or your own project from the list of options, choose the relevant branch or in the case of PortalCMS use [MASTER].

When you are finished, click "OK" and your Web App will start to install the code onto your website. This may take a few minutes so maybe a good time for a cuppa.

 

Connect your Web App to your Database

Your Web App already has access through the Firewall to your Database, so you just need to update your connection string information. You may choose to do this using a web configuration transform, I have started specifying my credentials in the Azure Portal recently as it means they do not need to be checked into the code base. Either way - lets continue.

Open your "Web App" from the "All Resources" pane again and open the "Settings" pane. Now look for "Application Settings".

Within "Application Settings" there are loads of things you can configure. But I tend to stick to one part of it.

Scroll down to the "App Settings" section of the page and you can set instructions to the "Deployment Service".

I tend to configure two things here for Portal CMS and other projects. I add an App Setting to transform my web configuration file by adding Key: "p:Configuration" and Value: "<Build Configuration>" such as "Release".

I also specify the connection string here to keep my code base clean of incriminating details. to do this add a "Connection String". For Portal CMS use "PortalEntityModel" as the name, for your own code base - take a look at the connection strings in your code base to see what connection name to use.

For the value you need to enter the connection string for your database along the lines of the below. This is all the information you have used so far.

data source=<SQLServerName>;initial catalog=<DatabaseName>;persist security info=True;user id=<SQLServerAdminUserName>;password=<SQLServerAdminPassword>;MultipleActiveResultSets=True;App=EntityFramework" providerName="System.Data.SqlClient" xdt:Transform="SetAttributes" xdt:Locator="Match(name)

 

When you have entered your settings, save them and head back to the "All Resources" screen in the top left. Now open your Web App again and look around the top of the pane for "URL". If you click on the link it should open your new website and by now your code should be deployed and hooked up to your database.

 

Fin

If you have followed these steps, you should now have a working website hooked up to a SQL Azure Database in Microsoft Azure. Let me know in the comments if this guide helped, or if you got stuck - ill see if I can help you along!

I have also stuck some screenshots from my end into the gallery, so take a look if you are stuck on one part.

 

Thanks for reading, Tom

You need to Login or Register to comment.

Tom McClean at 16 Jul 2016 23:21

I haven't written many guides before, so please let me know how you get on with this guide and how I can write them better in future. Cheers!

No Gallery Images

Sometimes we add relevant images to a photo gallery, but we don't have any for this post.

Portal CMS

Have you seen PortalCMS?

PortalCMS is my proudest personal project to date, it has taken a long time and a lot of effort, but its now more than I ever expected it to be. Find out why!

Blog

What am I working on these days?

This post is just a brief update about what I am spending my development time working on recently.

Technology

Introducing LogBook

I recently wanted to add some basic logging into an MVC Web Project, but all of the big offerings like Elmah and Log4Net are too bloated, so I decided to write a minimalistic logging tool of my own.

Tips and Tricks

Implementing Effort into a C# MVC Website to allow Unit Testing

I recently wanted to have the ability to write Unit Tests for a personal project, I picked Effort.EF6 to help. This post goes through the setup for "Effort" and why you should choose it.

Portal CMS

Navigation Improvements in Portal CMS

I recently developed some awesome new ways to manage the navigation in your Portal CMS website. Check out what is new in this post.

Portal CMS

Portal CMS - Developing the Theme Manager

This post takes a look at the development so far on a major feature for Portal CMS. The abilty to theme your websites easily to make them even more unique.

Portal CMS

Portal CMS - Release 1.0

The first stable release of Portal CMS is now available, so its a great time to start using Portal CMS for your own website or blog.

Portal CMS

Portal CMS Demo Website Now Available

I wanted to make it as easy as possible to try out Portal CMS. So I have setup a demo website you can login to and try it out!

Portal CMS

User Experience Improvements to the Portal CMS Page Builder

We recently made some changes to the Page Builder in Portal CMS to make it easier and quicker to use. Learn more about what has changed inside this post.

Blog

Summer Holiday in Thassos, Greece

I just returned from a holiday in Thassos in Greece, so I wanted to post up some photo's to show what I got up too!

Portal CMS

Editor Support Added to Portal CMS

Often you want to setup a website for somebody but you want to limit how much they can affect it without you, maybe you want to be responsible for the site, but they want to create content. Now you can in Portal CMS.

Technology

What is SendGrid?

As somebody who develops quite a lot of websites, I find that most of the time I tend to use a lot of the same technologies and services. A lesser known service which I have come to love is called SendGrid, heres why I love it.

Portal CMS

Inline Editing in Portal CMS

I recently releasd a huge change to the Portal CMS technology I have been working on. The ability to change content just like you do offline in Microsoft Office. No need to save changed, nor wait for changes to be made.

Portal CMS

Portal CMS - Promotional Website

I decided to make a standalone website for Portal CMS; the technology I wrote to sit behind this website and many others. Why not take a look and see what its about?

Blog

Website Relaunch

Welcome to my personal website. I am just in the process of relaunching it under my new technology called Portal CMS.

Tips and Tricks

Cost Effective Email Hosting for Custom Domains (Migrated)

This article takes a look at options for setting up multiple email accounts for multiple custom domains.

Portal CMS

Portal CMS - Page Builder Demo

Portal CMS is my latest technology, this article shows a video demonstration of the new technology in action.

Technology

Windows 10 - Initial Reaction (Migrated)

This article covers my initial reaction to Windows 10 after using it on my main computer for a few days.

Technology

Windows 10 - Coming soon (Migrated)

A brief look at the upcoming Windows 10 release and a look at the new features in the update.