Deploying a nodeJS Application on Azure App Service using ACR

Published in

MS Club of SLIIT

12 min readFeb 26, 2022

Hi, I am Isuru Pathum Herath. In this blog, let’s talk about how to deploy a nodeJS application on Azure App Service using Azure Container Registry.

This is the high-level architecture we follow today.

Here you can see the above image shows the steps that the app deployment is going with. Let me explain the way we go on.

First, the developer pushes his/her code to the version controlling system. It will trigger to run the pipeline in Oracle Wercker. The pipeline will build the docker image that we want to push to the Azure Container Registry (ACR). After building the docker image, it will be pushed into the ACR by the pipeline. After ACR got the new version of the image. It will be automatically deployed in Azure App Service. All the steps of the Oracle Wercker Pipelines are monitored and notified if there is a failure or successful deployment to Slack.

After integrating the above architecture, the developer only needs to push their code to the version controlling system. Everything will be automatic until the app is deployed in Azure App Service.

What you will learn

Version Control
Oracle Wercker
Build a docker image using Wercker
Push the built docker image to ACR
Deploy the application on Azure App Service on ACR

Now let’s move on with our practical tutorial. But not only the practicals I want to explain tools and technologies I use here a little bit. I hope it will be helpful to get a better understanding of what we actually go through..!

Version Control

The method of recording and controlling changes to software code is known as version control, sometimes known as source control. Version control systems (VCS) are software tools that aid software development teams in managing source code change over time. You and your team are able to work together using a version controlling system. It makes it so easy to manage your code together without conflict code with each other. There are many version control systems today but I will mention only the most popular version controlling systems here.

Examples: GitHub, GitLab, Bitbucket,

Git is used as the tool we always used for version control.

I use GitHub as the version controlling system in this blog.

Now you know why version control is used and what we are going to use. Let’s create a React Application before continuing our tutorial.

Create a React Application

React is a front-end JavaScript toolkit for creating user interfaces using UI components that is free and open-source. Meta and a community of individual developers and businesses support it. React may be used to create single-page or mobile applications as a foundation.

If you want more details about full-stack web development, click here to read more about Full Stack Web Application Development with applying engineering principles and practices.

Let’s move on!

I am using Visual Studio Code (VS Code)as the compiler to continue this blog. If you have already created a NodeJS application, you can skip this step.

Open VS Code and get the terminal. Then Search for VS code on your computer and open it.

Go to files → New Folder and select a folder as the project location.

After opening the folder you selected, the VS code will show the folder name like this.

Now open a terminal on VS code in the terminal → new terminal.

Now type the below command to create a react app. This command will download all default node modules that they need to the react application.

Make sure that you have to install node JS on your computer.

npx create-react-app .

After downloading all the components. Start the application.

npm start

You can see the react application is running on port 3000 in localhost.

Cool..! You created your react application. Now let’s push this to GitHub.

Push the source code to GitHub

First We need to create a repository on Github. Open your GitHub account and create a new repository.

Go to Your Repositories

Click New

Now fill in details and click create repository.

Now the repository has been created.

Now let’s move our source code into this repository. Follow me.

Right-click on the folder that the react project has created. Then open gitbash.

Make sure to install gitbach on your computer.

Use the following commands to push your code to the GitHub repository you created.

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin <your repository url>
git push -u origin main

After running all the codes. Refresh your GitHub repository. Then you can see the source code has been pushed to the GitHub repository you created.

Now you know how to create a GitHub repository and How to push your code from the local computer to the GitHub repository.
Now let’s create an Oracle Wercker pipeline to build a docker image, push the docker image to the ACR.

Create Oracle Wercker Pipelines

I recommend you to follow this blog that I have written about Deploying a NodeJS Application on Heroku for the basics of Wercker Pipelines.

After creating an application on Wercker, you can see your application like this.

Now let’s create the wercker.yml file inside our project. This file contains the all necessary steps, commands, and pipeline details for the Oracle Wercker tool.

Make sure to create the YAML file on the root folder.

box: node
build:  
  steps:    
    - npm-install    
    - script:        
        name: echo nodejs information        
        code: |          
            echo "node version $(node -v) running"          
            echo "npm version $(npm -v) running"

Use this code segment to run npm install and check the node version and npm version using the Wercker Pipeline.

Write the code inside your wercker.yml file and push the code to GitHub.

Save the file and follow the below-mentioned commands to push to GitHub.

git add .
git commit -m "created wercker yaml"
git push

Then go to Wercker again. You can see a pipeline is running like this.

After running the pipeline you can see everything is fine. If the pipeline is failed it shows a red color line without the green.

Now we need to build the docker image. To do that use the below code segment inside the wercker.yml file.

build-docker-and-push-to-acr:  
  steps:    
    - internal/docker-build:
        dockerfile: Dockerfile
        image-name: credit-bill-frontend
    - internal/docker-push: 
        image-name: credit-bill-frontend
        username: $USERNAME   
        password: $PASSWORD 
        registry: azurecontainerisuru.azurecr.io 
        repository: $USERNAME/credit-bill-frontend

Don’t commit this!. We have to do a few things before committing this code.

Look at the code. We must provide a Dockerfile to build the docker image. So first let’s create the Docker file.

Create a fine name “Dockerfile” in the root same as we created the wercker.yml file.

And this is the code we want to use to create a docker image.

FROM public.ecr.aws/docker/library/node:16.14.0-alpine3.14 AS build_image
RUN apk add --no-cache nodejs npm
WORKDIR /isuru
COPY package.json ./
RUN npm install
COPY . .
RUN npm run buildFROM public.ecr.aws/docker/library/node:16.14.0-alpine3.14
WORKDIR /webapp
COPY --from=build_image /isuru /webapp/
EXPOSE 3000
CMD [ "npm", "start" ]

Then again see there are some username, password, and registry fields are there. To have the username and password and the registry URL we need to create an Azure Container Registry in Azure Cloud. Now let’s move to do it.

log in to the Azure Portal using this link https://portal.azure.com/
Now search for “Container Registries” on the search bar.

3. Click on “Container Registries” and You will see the container registries page.

Here I still don’t have a container registry.

4. Click on “Create” or “Create container registry” to create a new container registry.

You will see a new window to provide some details to create a container registry.

First is the Basic Information.

Create a resource group
Enter a name for the registry
Select a location
Select the package you want

Next, go to Networking. But nothing here to change.

Now go to Encryption. Same as before we are fine with default settings.

Now let’s go to Tags. But I’m not going to use tags in here. If you wish to use tags, use them.

Now Review + Create. This will take some time to validate your setting and then you will be able to create the registry by pressing Create button.

After validation is passed. Click Create. This may take a few seconds or minutes according to the connectivity and some other reasons.

Congratulations..!

Now your container registry has been created successfully. Go to Resource now.

Now go to repositories to check whether is there any repository inside.

But you can see that this is empty because we didn’t push any docker image to our newly created container registry.

Now we want to find the username and password that we must provide in the Wercker Pipeline.

Go to Access Keys
Enable Admin User

Here you are able to see the username and two passwords. You can use any password. I am going to use 1st one.

Now we found the username and password. But where to apply those?

We have only one pipeline named “build” in the application we created in the Wercker tool. That is the one we used to run the first pipeline.

But for now, we have another pipeline named “build-docker-and-push-to-acr”.

We are going to create that pipeline now. Inside that pipeline, we mention the username and password as Pipeline environment variables.

Go to Wercker and select workflows.

Here you are able to see the all pipelines. As I mentioned earlier. There is only one pipeline is there named “build”. Let’s create our new one.

Click on Add new pipeline and fill in the details with going next.

The name must be the name of the pipeline mentioned in the wercker.yml file.

After creating the pipeline you can add pipeline environment variables.

before pushing, the code to GitHub make sure to change the registry URL in the wercker.yml file.

After adding the variables. Go to workflow again to bind the new pipeline to the “build” pipeline.

Click on the plus button (+) and follow the below steps.

Add a new pipeline to the current workflow

registry: isurupathumherath.azurecr.io

It can be used in the Overview of the container registry.

Now it is time to push your code to GitHub.

git add .
git commit -m "added dockerfile and updated wercker yaml file"
git push

No go back to the Wercker tool and see that you can see 2 pipelines are started to run.

After the pipelines are running successfully. Now go to the Azure Container to see whether our docker image has been pushed successfully.

Yes..! It is pushed to ACR successfully.
It’s time to deploy our application on Azure App Service with ACR.

Deploy NodeJS Application in Azure App Service with ACR

Search for the “App Service” and open the App Service

After opening the app service you can see there is no app is running for now.

Let’s create a new app.

Click the “Create” or “Create app service” button.

Make sure to select Docker Container as Publish. Now let’s go to Docker.

Select Option as Single Container
Image Source is Azure Container Registry
Then select your container registry and the name of the image you pushed.

Now Create + Review.

Now you are able to create the application.

After the app is created. Go to Resource.

Now try this URL that you can access to your React Application. Yes..! It is working now.

Deployed React Application on Azure App Service

But what happens if you push a new version of your code. To make continuous deployment, there are some configuration settings to configure.

Go to Deployment Center. And under settings, you can see Continous Deployment. Turn ON it and Save.

Now you can try to change the source code and let it deploy automatically.

I am going to add my name to the react application and push it to GitHub. Let’s see will it work.

In the logs of the Azure App we created, it is deploying the new version of the application using the docker image we pushed to the ACR

This may take some time to deploy the new version. We can see the new version of our application after the deployment is completed successfully.

Here we go…! We are successfully deployed our new version.

Integrate Slack Notification to Oracle Wercker Pipelines

A blog for slack integration is coming soon..! I will attach the blog link to this blog after publication.

Congratulations..! Now it’s time to deploy your own application. Good Luck!
Let’s meet in another blog. See you guys. Bye!