Deploy an Express app to Azure App Service using CI/CD pipelines.
By: Jithin Zachariah
Tags: Deployment, Azure Devops, Ci Cd Pipeline, Expressjs, Azure

The simple 5 step process

Step 1: Create a sample express app

Given below is a sample express app (server.js) listening on port 3000. It has one endpoint “/” serving the message “hello from Azure”. Se

const express = require(‘express’);

const app = express();

const port = 3000; app.get(‘/’,(req,res)=>{

res.send(‘helo from Azure’)

}) app.listen(port, () => {

console.log(‘listening to the port: ‘ + port);

});

Step 2: Dockerize the express app

To dockerize the app we need to define a Docker file as follows.

FROM node:12 # Create app directory WORKDIR /usr/src/app # Install app dependencies COPY package*.json ./ RUN npm install # Bundle app source COPY . . EXPOSE 3000 CMD [ “node”, “server.js” ]

You can test your Docker file by running the command

docker build -t sample-express-app .

within the project root. This will generate the docker image “sample-express-app” which could be locally ran using the command

docker run -p 3000:3000 -d sample-express-app

You should be able to go to http://localhost:3000/ and see the message “helo from Azure”.

Step 3: Push the code to a remote repository

Use any popular version control system like GitHub, Azure Repos, etc. Your repository should look somewhat like this.

figure 4 : Repository files

Step 4: Create a build pipeline(CI) in Azure DevOps

Choose Pipelines from the left sidebar on Azure DevOps and click on Create Pipeline to get started.

figure 5 : New build pipeline

Select the correct repository where our code resides. In my case, I have pushed it to Azure Git Repos. Depending upon your selection you might have to authorize yourself to access the repository.

figure 6 : Choosing your version control system

figure 7 : Choosing your repository

After choosing the correct repository Azure will provide us with the most commonly used templates for the build pipelines. Here we are using the Docker pipeline having the tasks to build and push the image to the Azure container registry that we configure.

figure 8 : Choosing the build pipeline template

Next, we have to configure the container registry and the image name as shown below

figure 9 : Configuring container registry and the image name

Upon clicking validate and configure an azure-pipelines.yaml file will be created. We have to commit this file to your branch by clicking on the save button available in the drop-down next to Save and run. currently, we don’t want to run the build but just want to save it.

figure 10 : azure-pipeline.yaml file

Now our build pipeline setup is complete.

Step 5: Create a release pipeline(CD) in Azure DevOps

Choose the Releases option on the left sidebar and click on New pipeline to get started.

figure 11 : New release pipeline

We can select a template that has the release tasks already added. Since we are deploying our app to App service we choose the “Azure App Service deploy”.

figure 12 : Choosing the release pipeline template

We can see two things to configure one is the Artifacts section and the other is the Stages section. In the artifacts section, we can configure for which build should be the release triggered. Stages define the tasks that have to be carried as part of the release activities. Examples of some stages are Dev, QA, Prod, etc. First, we’ll configure the artifacts section.

figure 13 : Configuring the release pipeline

Upon clicking Add an artifact we can choose the build artifact. We choose the build artifacts from the build pipeline “Express CI-CD Demo” which we created earlier.

figure 14 : Choosing the build artifact

Next to the add artifact section, we can see a lightning bolt symbol which can be configured to automatically trigger a release as soon as a new build artifact is detected. We can enable it and use the filter if required to configure which branch’s build should trigger the release.

figure 15 : Configuring automatic release trigger

Now we have to define the tasks in the stage section, upon clicking it we have a setup shown below with one task(since we choose the template). Here we can configure the stage name. I choose Dev. Choose your Azure subscription used to create the app service. If you are not getting the subscription in the drop you might need to click manage and connect the service. After selecting the subscription select the app service (“express-demo-cicd”)

figure 16 : Configuring the azure subscription and the app service.

After choosing the app service we need to configure two more things. one is the container registry link which is “expresscicddemo.azureacr.io” and the image name which we configured in the build pipeline which is “expresscicddemoimage”.

figure 17 : Configuring the release tasks.

Now we have set up both CI/CD pipelines. Here I have triggered the build manually for the first time. After the build and release process, if I go to the web app URL we will receive the message “helo from Azure”.

figure 18 : Web app response

To demo the CI/CD process I’ll commit a change directly to the branch updating the message to “hello from Azure app service”. As soon I commit the changes a new build should have triggered.

figure 19 : Committing the code changes to the repo

Here we can see that a new build process has started.

figure 20 : New Build triggered

As soon as the build process is complete a new release is triggered.

figure 21 : New release triggered

After the successful release, We can go to the web app URL.