Github Continuous Integration with AzureWebsites

In this short and quick tutorial, I am going to show on how to Integrate a Github Repository to AzureWebsites with continuous deployment. This tutorial also describes the general concepts of Github branching with best practices.

Here is the conceptual idea what we want to achieve –

image

 

=======================================================================================================

Create a Github Repository

=======================================================================================================

Lets get started by creating a Github Repository by login to Github –

image

Enter relevant details for creating a repository –

image

Once repository created, we will land up with following summary.

image

 

=======================================================================================================

Clone the repository to local

=======================================================================================================

Now lets get the master (which is origin) to our local by cloning the Github repository.

Open Git Shell for Windows by clicking below icon (which should be coming along with Github tools for Windows installation).

image

It will open PowerShell console and by default point to the local location where Github has been pointed too (Configuration of local location is pretty straight forward which can be done at the time of installation of Git tool for Windows).

image

Now we need to get GitHub Clone URL. Check out below screen shot.

image

Use the following command to clone the repository –

image

 

=======================================================================================================

Create Visual Studio 2013 Solution

=======================================================================================================

Now lets create a Visual Studio 2013 MVC Application Solution.

image

image

Created Solution is shown below –

image

 

=======================================================================================================

Commit and Push VS Solution to Github Master

=======================================================================================================

Lets make a commit to the Master branch (with the solution which we created above) by using following commands.

image

Once all files are added to the commit, we will execute commit operation.

image

Finally we make a Git push to master.

image

 

=======================================================================================================

Create a new AzureWebsite

=======================================================================================================

Login to Windows Azure Subscription and create a new AzureWebsite as shown below –

image

Once created we can see the website publish options as shown below -

image

 

=======================================================================================================

Setup Continuous Integration to AzureWebsite from Github

=======================================================================================================

Click on ‘Setup Deployment from Source Control’ as shown below –

image

Select Github as the provider for Source code.

image

An Authorize prompt will be displayed as follows –

 

image

On successful authorization, we can select the appropriate repository as shown below –

image

Once linking of repository completes, a successful message will be displayed as shown below –

image

As our master branch is already committed with default production code, it should trigger the initial deployment. we can check out the initial continuous deployment activity by navigating to Deployments tab of AzureWebsite.

image

Now we can navigate to – http://contoso-business.azurewebsites.net/ and can check out website.

image

 

=======================================================================================================

Create Develop branch out of Master

=======================================================================================================

Let us extend our Source Code versioning to a much better way. Say in real world, nobody directly works on Master code base and deploy it to Production. Instead we will create a Develop branch. The main concept of behind this Develop branch is to stabilize code in this branch and then merge it with Master.

image

=======================================================================================================

Extend Develop branch with Alice and Bob feature branches

=======================================================================================================

Create an Alice branch –

image

Create a Bob branch –

image

Now let us modify Home page in Alice branch and About page in Bob branch. This is more realistic scenario, as one developer might be working on a particular feature and other developer might work on another feature.

=======================================================================================================

Alice branch changes and Merging

=======================================================================================================

Lets say we need to change the home page ASP.Net text to PHP.

image

Changes are made using Visual Studio. Then we can make a Git status to see a file has been modified.

image

Lets commit the changes to Alice branch.

image

Now lets push the new home page feature to Develop branch from Alice branch.

image

Now we can push the changes to Develop branch.

image

Finally to trigger continuous integration of AzureWebsite we need to merge Develop branch to Master.

image

As master branch is up to date, a new Deployment is triggered in AzureWebsite and it is been completed as shown below –

image

 

=======================================================================================================

Bob branch changes and Merging

=======================================================================================================

First lets get onto the Bob branch and get the latest from develop branch.

image

Then make the changes to About Page. For simplicity we are going to change ‘About’ title to ‘About Me’ using Visual Studio.

image

Once the changes are done, make a Git status to check the changes.

image

Now commit the changes to Bob branch.

image

Now merge the changes in Bob branch to Develop branch.

image

Push the changes to develop branch.

image

Finally to trigger continuous integration of AzureWebsite we need to merge Develop branch to Master.

image

As master branch is up to date, a new Deployment is triggered in AzureWebsite and it is been completed as shown below –

image

=======================================================================================================

Check changes in AzureWebsite

=======================================================================================================

Alice Change –

image

Bob Change –

image

=======================================================================================================

Next Steps

=======================================================================================================

With the above integration flow, we completed the main tutorial on how to perform branching, merging and continuous deployment to production environment using Github version control provider.

As the next steps we can extend this tutorial by providing remote repositories for users so that they can collaborate and merge works using different feature branches. Stay tuned.

You may also like...