Deploying NodeJS apps with Azure App Services and Docker

NodeJS application with Azure App Services and Docker in DevOps

As part of an exciting project I am working on, I developed a Micro Service in NodeJS and used the DevOps to build/release the application with Docker in Azure App Services.

Pre-requisites

  • Knowledge of NodeJS and some knowledge of docker
  • Docker installed on your Machine (optional, for testing locally)
  • Visual Studio Code
  • DevOps (VSTS) account
  • Azure Account
  • Sign up to https://mlab.com/ and create a database

Our application

I am going to use this Boilerplate which allows you to enter items in a list, displays them and deletes them. I have some testing done using Jest, to showcase how the follow comes together and what my deployment strategy is.

Clone the code from https://github.com/shemseddine/risk-register

Push your codebase either to GitHub, or within DevOps.

Let’s head over to Azure DevOps.

Before we carry on with the rest of the tutorial, there are a few things we need to set up.

Prerequisite Steps

Step 1 — Create Azure Container Repository

Let’s head over to the Azure portal and create our registers Azure Container Repository. This is where all of our Docker images will live.

Our container registry setup in the Azure Portal

Step 2- Link our Azure Account to our DevOps account

There are two ways we can get our DevOps build to read and write to our container registry. Either by setting up an admin user (which I have left disabled above), or by linking our Azure Account with Our DevOps accounts.

I have opted in for the latter. Let’s head over to DevOps. In your Project Settings, let’s go to the Service connections under the Pipelines heading.

Let’s create a new service connection of type Azure Resource Manager

Choose your subscription and set your resource group from the drop down.

Now our build…

Our Build

We will create a new build with an empty template.

Ensure that the source is the GitHub repository you have deployed (or Azure Repos Git).

Let’s add a couple of steps to our pipeline.

We have 5 steps.

Step 1 — getting ready for testing

We simply install all of the packages in order for us to get our client ready for testing. Ensure that the working directory is client as that is were all of our testing is done in this case.

Step 2 — Run our tests

Next, we run our tests, again within the client repository. We run the npm command run test-ci which is defined in the client/package.json file.

This will run our tests and saves our results into a junit file which already has integration within DevOps (there may be other options to do this step).

Step 3 — Publish our test results

We will need to publish our tests results in order for them to appear in the Tests tab once the build is running.

The next two steps are Docker Specific. In order to follow along, ensure that you have followed the prerequisite steps.

Step 4 — Build our Docker image

We select our Azure Connection that we have set up earlier (Azure Register Resources) and the Azure container Registry (registers, yours may be called something different) from the drop down.

We set the action to be build an image, and specific where our Dockerfile is.

Step 5 — Publish our Docker image

Here again, I selected the subscription and the container register from the dropdowns.

For the action, we want “Push an image” to our container.

Next we set the image name. In our case, we left it with the default using the repository name (registers) and the the build id for the tag.

Let’s run our first build.

We need to make sure that the Agent Pool we set is a Linux Machine. I’ve chosen the one above (or you can choose your own machine that you have setup. Ensuring that it has all of the tooling for building and publishing Docker images).

There we have! (12th time the charm?). Let’s have a sneak peak at our our container register.

This is my repository (take a note of this). Let’s head to the access keys.

Also, take a note of your registry name and login server.

Our release

We are going to be deploying this application on Azure Web Apps. We can just link the target container to the web app without having to use DevOps. But most applications are not that simple and most of the times there are more than a single steps to deployments, (database upgrade etc).

For the sake of the flow that I am showing you here, I will be setting up a VSTS release pipeline for this.

Step 1- Creating the Release Pipeline

We want to create a new release pipeline based on the “Deploy Azure App Service” template.

We add our artifact (our build).

Now under Tasks. Let’s setup our release parameters.

Step 2 — Release Parameters

Let’s setup our release parameters.

First you need to pick the Azure Subscription we setup, Azure Register Resource. Next we need to set the App type to be Linux App.

For our App service name, we call ours registers.

Note, that if your repository is named differently or your container registry is named differently, make sure you change that if appropriate (I’m sure yours isn’t called shemseddine/risk-register).

Let’s run our release pipeline.

We successfully deployed our first Docker based application!

Let’s visit the site.

That’s our Risk Register!

Let’s add an entry…

Ooops! we can’t. Why? We we are saying we are using the localhost connection string for mongodb but there is no MongoDB server installed.

Let’s create an account with https://mlab.com (or any other mongo db server). Once you have your database, your connection string and credentials, we can add them to the application settings in our release pipeline.

In the Release Pipeline’s variables tab, let’s add our MongoDB variable. Pasting in your connection string in the Value.

Next let’s add pass that variable to our web app.

In the app settings, we will be setting the MONGODB parameter with the value from our variable MongoDB.

-MONGODB $(MongoDB)

Now let’s save this and release again.

I have successfully managed to add a new entry to my Risk Register!

Happy coding. You can find the full source here: