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