Setting Up Continuous Deployments of an Azure Functions App

  • Estimated read time: 9 min read
  • Written by Chad Campbell on Aug 2nd 2017

Hi there! I'm Chad Campbell from Ecofic. You can find me on Twitter here. If you're new to this channel, please consider subscribing now. The purpose of this channel is to help you create better software and get it to more people. One way to help you meet this goal is with Azure Functions. In this video, I want to show you how to setup continuous deployments with Azure Functions. In my last video, I showed you how to create an Azure Function. That video can be seen here. After you create an Azure Function, you'll likely want to customize it to meet your needs. A fast way to add custom code is to develop your Azure Functions locally.

Azure Functions let's you download a function app's content, so you can work on it, on your local machine. You can then get the updated code back to the Azure Functions app via a source repository. To do this, I recommend setting up a continuous deployment of the code in a source repository. I'm going to show you how to do that in this video. The repository that we'll be using is available here.

Now, to begin, I'm going to visit the Azure Portal. In the last video, I added the "Function Apps" item to the services menu here at the bottom. When clicked, the list of function apps that I have are listed. The only function app that I've created is this "my-company-functions" app. When selected, an overview of the Azure Functions app appears in the main part of the portal. We can setup continuous deployment from the "Platform features" tab.

Connecting to a Source Repository

When clicked, the "Platform features" tab provides access to some some of the lower-level details of the function app. A detail within this context can be found in the code deployment category. This category has two options: "deployment options" and "deployment credentials". Since we're connecting to a GitHub repository, we're only interested in the "deployment options". For that reason, I'll go ahead and select it. When clicked, a log of the deployments for the function app will appear. This log is empty though since a deployment hasn't been configured.

To configure a deployment, click the "setup" button in the toolbar. Once selected, the "Deployment option" pane will appear. This pane will first ask you for the deployment source. This is another way of asking "where will your code come from". If I click this button, you'll see seven options presented. While your exact scenario may differ, GitHub is going to be used in this video. When clicked, the "Deployment option" pane is refreshed with details specific to connecting with GitHub.

The first option relates to authorization to GitHub. If you selected this, you would be presented with the option to change which GitHub account you're authenticating with. I'm ok with the account that's currently selected. For that reason, I'll move on to the organization option.

The organization option let's you choose which GitHub organization your repository is associated with. I've hosted the repository with my business account. For that reason, I'm going to choose my business name "ecofic". Once selected, I can move onto selecting the exact project.

To select the specific project, I'll click this option. Once done, I'm presented with all of the projects associated with my organization that I have access to. The repo for this video is named "my-company-functions". For that reason, I'll move my mouse over to it and select it. While I have the option of choosing a specific branch, I'm ok with using the "master" branch. Finally, setting up a performance test is beyond the scope of this video. For that reason, I'll simply click the "OK" button to connect to this source repository.

Once the connection has been successfully setup, a deployment will automatically begin. I recommend waiting to ensure that it deploys successfully since this is the first time. Once the deployment is successful, you can rest knowing that you're successfully getting code from a repo and deploying it.

Connecting to a source repository is only half of the story though. The other half involves getting the code that Azure Functions generates for you, and getting that into your source repo.

Getting Azure Functions App Code

To get the code for your Azure Functions app, you can click the "Overview" tab in the tab bar. Once there, notice the toolbar that appears. This toolbar has a button that says "Download app content". This button will prompt you to download the code generated by Azure Functions when you created the Azure Functions app. Since that's what I want to do, I'm going to click this button.

You'll notice that I'm presented with two options: "site content" and "content and Visual Studio project". The first option is just the code. The second option will create a zip with the code and a Visual Studio project. Since I'll be working in Visual Studio code, I don't need a project file included. For that reason, I'll leave the default choice selected.

The next option is to include the app settings. If you enable this option, a file named "local.settings.json" will be created. This file will not be encrypted when downloaded. For that reason, you should be aware of which settings will be downloaded prior to enabling this option. Remember, we're downloading this code with the intention of getting it into a source repo. You may not want these settings in your repo. If that's the case, you'll need to manually ignore this file from getting added to your repo. I'm going to leave this option disabled. Now, I'll click the "Download" button.

When the "Download" button is selected, a new tab will briefly appear in your browser. It will disappear and you'll see a zipped up package of your code in your downloads bar. If I look in the "Downloads" directory on my local machine, I can see the package there. I'm going to move this to a directory I've already created for this project called "Continuous Deployments" and extract the contents.

The contents of the zip file get placed in a directory that is named after my Azure Functions app. Notably, the contents do not include the repository details. Instead, we have to do that merge ourselves. This was the best way I could figure out how to do this at the time of writing this video. If you know of a better way, please share in the comments below. Still, I'm going to show you what that merge looks like.

Merging Code

First, I'm going to create a directory called "temp". This directory will be used to hold the repository that was connected to earlier. From the command-line, I'm going to navigate to the "temp" directory in the "Continuous Deployments" directory that I had already created for this project. Then, I'll clone the project from GitHub. Once cloned, I'll jump back to the explorer.

From here, I'll drill-down into the repository and clone all of the files. Next, I'll copy those files into the directory that was created when I unzipped the files provided by Azure Functions. When copying, I choose to skip the files with the same names in this case. The reason why is because we're working under the assumption of a successful deployment. Still, once the files are created, you can see the addition of the .git folder. This directory has all of the project's info as stored in version control. Now, we're ready to test our merge and continuous deployment together.

Testing the Merge and Continuous Deployment

I'm going to open Visual Studio Code and make a small change to the code to see if I've properly set all of this up. When Visual Studio Code opens, you'll see the most recent project I've been working on is opened. In fact, this code is associated with my Vue.js: Getting Started training course. If you're interested in it, you can check out the details here. There's even a free trial.

Still, I'm going to open the "my-company-functions" directory by visiting the "File" menu and clicking "Open Folder". I'll then select the "my-company-functions" folder. Once selected, you can see that I have the index.js file opened. This file is the file that Azure Functions generated for me. To test this whole setup, I'm going to change the word "Hello" to "Hi". We'll make our function app a little less formal :).

Now, I'll open the GitHub desktop app. You'll see that I already added the "my-company-functions" repository in here. I did this for the sake of time in this video. Now, I'm just going to commit these update to the "master" branch. Remember, the automated deployment configured earlier gets the code from the "master" branch. So, when I check this in, it should kick off an automated deployment. To check, I'm going to revisit the Azure Portal.

In the Azure Portal, you can see that I still have the download prompt open. I'm going to close it. Then, I'll revisit the "Platform features" tab and select "Deployment options". This gets us to the log of deployments for this Azure Functions app. As you can see, it was successfully deployed! We know this is the correct commit because, this text matches the text I entered into the GitHub desktop app.

That's how you can setup continuous deployment of an Azure Functions app. The app itself is pretty basic at this time. In the next video, I'm going to show you how to import Node.js packages into your Azure Functions app. This video is only relevant if you're building an app with JavaScript. Still, if this interests you, please make sure that you're subscribed to this channel.

I hope this video helps you create some better software with Azure Functions. If you'd like to learn other ways to create better software, please check out some of the training courses I've created by visiting here. Finally, if this video was helpful, please click the "thumbs up" below and share this video with others. This lets me know that I'm adding value to your day.

Thanks for watching and have a great day.

comments powered by Disqus

Chad Campbell
Chad Campbell

Chad is an independent software professional. He has been named a Microsoft MVP five times. His books have been translated into multiple languages and distributed worldwide. He holds a computer science degree from Purdue University, where he also studied psychology.

Chad has built sites, apps, frameworks, libraries, and platforms using Java, .NET, and Node. He's ran his own startups and has created software for Fortune 100 companies. In short, Chad knows how to create software. From ideation to delivery. From start-to-finish.