Deploying an ASP.NET Website to Azure in Visual Studio 2012 from a Git Repository directly

Posted by: Suprotim Agarwal , on 4/11/2013, in Category Windows Azure
Views: 31872
Abstract: Explore how to deploy our own ASP.NET WebSite in Visual Studio, using the Git plugin to commit the code to Git and see how we can connect Windows Azure to our repository

Azure Websites as we know is a ‘platform as a service’ offering allowing Azure subscribers to quickly deploy various type of web-applications. Using WebMatrix you can either pick from a huge Gallery of pre-built templates or build your own sites in ASP.NET and publish them to Azure.

Today we’ll investigate how we can deploy our own ASP.NET WebSite in Visual Studio, using the Git plugin to commit the code to Git and see how we can connect Azure to our repository, so that it picks up the latest build and deploys it. Before you proceed, make sure you have also read Git Integration in Visual Studio 2012 after Update 2

 


Connecting an Azure Web Site to a Git Repository

For simplicity sake, I’ll use one of our recent KnockoutJs articles Change Tracking and Committable data-binding using KnockoutJS and ASP.NET Web API whose code is already in GitHub.

Step 1: We’ll start with creating a web site on Azure. Log in to the Azure Management Portal, select “Web Sites” and from the bottom of the dashboard select New. Create a new web-site as shown below.

create-azure-website

Step 2: Once the Site Creation is completed, the dashboard will navigate to the following page. From the three options, select ‘Setup deployment from source control’ under ‘Integrate source control’.

new-azure-site-created

It will present us with the option to pick our source control. As we can see below, there are a lot of options.

Step 3: Select ‘GitHub’ and click on the next button.

select-github-source-control

Step 4: This will open up a new browser and if you are already logged in to GitHub, it will use the current credentials. If these are not the credentials you want, logout from this screen, the Authentication will show failed, now repeat from Step 3.

Once you are logged in to the desired GitHub account, click on the green Authorize button to allow Azure to connect to GitHub.

authorize-azure-on-github

Step 5: On Success, the popup browser will close and you’ll see a dialog similar to the following one. Choose the repository you wish to Deploy and click on the Complete button.

select-repository-to-deploy

Step 6: Once you hit Complete, you’ll see the following screens quickly flash by. Basically Azure will link to the project, deploy the latest build available and on success, make the site live with the latest binaries.

azure-linking-github

azure-deploying-github

azure-deployed-github

Step 7: Now if you click on the browse button at the bottom of the page, you’ll get a new browser with the newly deployed site. In our case it got deployed to http://knockoutchangetracking.azurewebsites.net/

deployed-site-v1

Updating code and pushing new code to Git

Now that we’ve deployed our code from Git to an Azure website, typically in a production scenario, we would continue to work with our code making improvements till we are ready to push to our remote repository and thus deploy to production.

Step 1: Let’s start with opening Visual Studio 2012 (with Update 2) and Git Support. As we can see, Visual Studio recognizes the git repo and shows everything is checked in.

source-in-visual-studio

Step 2: We update the ‘Critical Bug’ where the Heading of our app is incorrect and we change it from ‘ASP.NET Web API’ to ‘Knockout Change Tracking Demo’. Once the change is made, we run it locally to ensure things are working!

check-changes-locally

Step 3: Next we commit code to the local repository.

commit-changes-local-git

Step 4: Before pushing to remote server, I’ve used the snap-view feature of Windows to snap VS to the left and the Azure Dashboard to the right. Now I push to the server. Notice that moments after the push is completed, Azure detects the changes and starts deploying.

push-to-github

Step 5: Once the deployment is over, we see which deployment is the active deployment.

azure-deployed-github-v2

Step 6: Now when we click on the ‘Browse’ button at the bottom of the dashboard, we’ll see the new updated site heading.

deployed-site-v2

Rolling back busted deployments

Now as we all know, thing can break and hell can break loose if a deployment is broken for some reason. Azure Web Site’s Git Integration helps re-deploy old builds rather easily.

Step 1: On the deployment dashboard, hover over the older build and click on the ‘Expand’ button that comes on the Top Right corner. It will select and expand the build with the deployment details

previous-deploy-details

Step 2: At the bottom, you will see a REDEPLOY button. In our case a simple re-deploy will restore us back to the previous build. Things involving DB Scripts might need some additional automation effort on our side.

Well there you have it, from local code to Git repository to GitHub to Azure. A rather seamless journey thanks to Azure WebSites’ Git Integration.

Conclusion

Azure Web Sites’ Git and other source control integration makes life easy for Continuous Integration types of scenarios. This is something that can definitely be used for Build and Test environments. For production deployments additional checks and balances that are a norm in ALM should be followed.

Give me a +1 if you think it was a good article. Thanks!
Recommended Articles


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Tridip on Wednesday, April 17, 2013 9:17 AM
i am not familiar with Azure but like to know they take money to host asp.net apps or WCF to host there. please answer. thanks

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel