Can I Use Git to Deploy my ASP.NET Website to Microsoft Azure?

Why is it that some people seem to just “get” the whole cloud publishing thing? While others are left floundering, wondering how to take advantage of all that great stuff? Are you one of those?

Maybe you’re just learning how to code. Or you’ve been in this game for a while but never needed to publish a website to the cloud yourself. You’ve heard of Git - that’s a distributed source control system, isn’t it? Never used it though. How would you connect it to Azure anyway?

These cloud systems, like Azure, BitBucket and Github, make all of this a breeze. There’s a bit of setup involved to begin with. Once that’s done, it’s a simple case of:

• making some changes
• committing them to Git
• pushing them to BitBucket
• deployment magic happens

So far, we’ve seen a simple way to publish a website to Azure. The website in question is the DataTables and Web API example site, which I covered in a previous series. You can grab the code from here: Using DataTables with Web API. Stick it in a safe place and we’ll come back to it later.

In this article, we’re going to make things a little more complicated. We’re throwing source control into the mix as well. We’ll be using Git, a popular, distributed version control system. We’ll also be using BitBucket, from Atlassian (the chaps that brought you JIRA, but don’t let that put you off!). This allows us to store our code changes in the cloud. We could have used GitHub, but I prefer the workflow in BitBucket. We’ll be setting things up so Azure grabs our website changes and puts them live itself. There’ll be no manual deployment from Visual Studio this time. As soon as we push code changes to BitBucket, they’re deployed to our website in Azure.

So what do we need to do to make this happen?

1. Install Git and a Git client (GitKraken) to keep track as we make changes to our code.
2. Create a BitBucket account and repository to manage those changes in the cloud.
3. Connect GitKraken to BitBucket.
4. Create a webhook in Azure, so Azure can pull the changes from BitBucket and update our website.
5. Some changes! We’ll add the website to our Git repository. We’ll then push it to BitBucket to see everything in action.

Let’s look at each of these in turn. All of these instructions are for machines running Windows. If you’re using Linux or a Mac, you can still follow along, but you’ll have to modify some steps a bit for your own environment.

Step 1: Install Git

We’ll start by installing Git itself. Head on over to the Git for Windows install site and download the latest version of Git. Start the install process, ensuring that Windows Explorer Integration is checked. Leave the PATH and line ending settings as their defaults. You can also stick with the defaults on the extras screen. You could enable Git Credential Manager, but it’s not vital. It’s useful if you use HTTPS to communicate with BitBucket. We’ll configure SSH in a moment, so you don’t need it. More on that later.

The Credential Manager stores your username and password. This means you don’t have to enter them every time you push code using HTTPS. Hit Next a couple more times and then Install.

Now that we’ve got Git installed, let’s install a fancy Git client to manage our files. There are many Git clients around. The install we just completed includes Git GUI, which is fine. My personal favourite, which we’ll be using for this article, is GitKraken. Hit the big download button to grab the installer and kick off the install process. While it’s installing, we’ll create a BitBucket account and repository.

Step 2: Create BitBucket Account and Repository

Head back to the browser and wander on over to BitBucket. Click the big Get Started button in the header. Enter some account details and then check your inbox for a verification email. Once you click that link and choose a username, you should be all set.

Once you’ve finished the signup process, you should see an empty dashboard. Let’s add something to make it a bit more interesting. Click the Create repository link. If you expand advanced settings, you can add a description and enable extra goodies like issue tracking and a wiki if you so choose.

If you’re confused by what forking is, it’s not a gardening term or a euphemism. In fact, it’s a way to copy a repository. You can fork a repository, then play around and make changes in your own, isolated copy. If you want to contribute some changes back to the original repository, you can. You submit a pull request. This notifies the repository owner that you’ve got some changes. They can review those changes and merge them into the main repository if they wish. We’ll examine how the pull request and merging process works in the next article.

Now we need to put some bits in our bucket, so to speak. We’ll be adding the project code on our local machine, so for now, we’ll just add a .gitignore file. Click the “Create a .gitignore” button to get started.

View original article

We don’t need to add much at this stage. Just enough to stop us committing the contents of the bin, obj or Packages folders. Once you’ve updated the file, click the Commit button. You now have an active repository with stuff in!

Step 3: Connect GitKraken to BitBucket

Now you’ve installed GitKraken and created the BitBucket repository, it’s time to connect them together. Bring up GitKraken again, go to File > Clone Repo and select the BitBucket tab. Click the big, green Connect button.

You should see we’re not connected to BitBucket. Hit the big, green connect button, which will launch BitBucket in your browser. You need to confirm that GitKraken is allowed access to your BitBucket account. If all goes well, you should see a big success message from GitKraken.

Still with me? Bring GitKraken back up again and you should see that you’re now connected to BitBucket. That’s all you need to start using your BitBucket repo via HTTPS.

It’s very easy to configure SSH using GitKraken, so we’ll do that now as well. Click the big, green Generate SSH key button. This adds a new SSH public-private key on your local machine. You need to add the public key to your BitBucket account. Click the big, blue Copy button, which will grab a copy of the public key and open BitBucket for you. Once inside BitBucket, head for the account settings page if you’re not already there. Select SSH Keys and add your GitKraken key.

You should now be able to see your BitBucket repo from the Clone screen in GitKraken. Select it, enter a local path on your machine for the files and hit Clone.

Step 4: Create Azure Webhook

So far, we’ve got a Git repository in the cloud for managing our code changes. We’re setting things up so that Azure deploys those changes straightaway. For that to happen, we need a webhook. They’re easy to set up. We’ll be creating a link between BitBucket and Azure. We’ll tell Azure which branch it needs to watch for changes. In our case, it’s the master branch. This is what then happens:

• We make some changes on our master branch
• We push them to BitBucket
• Azure sees those changes because it’s watching the master branch via the webhook
• Azure then pulls the code from that branch, compiles it and deploys it to our website
  • If the code doesn't compile or there's a problem, the deployment fails. In this case, the website doesn't update.

Log in to your Azure portal and select your app service. Not got an Azure account or app service set up? The first article in this series should fix that for you. Here's that link again: Deploying an ASP.NET website to Microsoft Azure. Don’t worry, I’ll wait for you.

All sorted? Super, on we go. Select Deployment options from the left hand menu. Choose BitBucket as the deployment source. Authorise Azure to use your BitBucket account. Choose the BitBucket project we’ll be using and select the branch.

Once that’s done, you should see the initial .gitignore commit in the Deployment options panel. That means we’re all set up. We can now add the website to BitBucket and see all this in action!

Step 5: Make Some Changes

All that’s left now is to get our website into the repository. Then we can see all this in action. Remember that DataTables code from the start of the article? Let’s dig that out now and add it to the repository. Unzip the solution into the folder where you cloned the repo in GitKraken. Hop into GitKraken and you should see all of the files listed as Unstaged. Stage all of the added files, add a suitable commit message and commit the changes.

Now we’ll make a couple of changes. I’ve updated the page title in the Index action of the Home Controller. I’ve also changed it in the Home ActionLink in the layout page. You can change whatever you like! Make a change or two, add a commit message and commit. Now push your changes to BitBucket. Head back to the Deployment Options tab in your Azure portal. Wait a few moments and you should see another entry with your commit message.

To check whether it works, browse to your website and see your changes in all their glory. Done!