Understanding and setting up CI-CD of Node.js web app on containers through VSTS on Azure (#5 of 5)

Welcome to 5 Part blog Series that covers Azure DevOps, this is 5th part.

Part 1 - Introduction of Azure DevOps and Basic terminologies.

Part 2 - Understanding and setting up CI/CD for Python App on Azure

Part 3 - Setting up CI / CD of .NET Core running on Linux  on Azure

Part 4 - Setting  up CI / CD of .NET application using Azure App Service.

Part 5 - Setting up CI / CD of Node.js application using Azure App Service.

Continuous integration and continuous deployment has become one of the most common use cases of Microservices early adopters. CI/CD merges development with testing, allowing developers to build code collaboratively, submit it the master branch, and checked for issues. This allows developers to not only build their code, but also test their code in any environment type and as often as possible to catch bugs early in the applications development lifecycle.
Here we will be setting up CI / CD through VSTS on Azure and will understand various options and features that VSTS offers,for the purpose of demo we will be creating a ASP.net Core web app running on containers on Azure.
Step1. Login into Azure Portal and click on create a resource and Select DevOps Project.
1-logintoAzurePortal.PNG

Step 2. Now Select Node.js Application Type and click Next.
2-SelectingNodeJsFramework.PNG

Step 3.  Now we will select Express.js as Node Framework and click next
3- ExpressJSFramework.PNG

Step 4. I want to deploy my app on Containers on Azure so select Web App for Containers and click next.
4-SelectWebApponContainers.PNG

Step 5. Here we can select existing VSTS account or we can also create a new VSTS code Repository , enter NodeJsOnAzureContainers as the project name , select Azure Subscription give the name of Web app and select location of Web App and click Done as shown below.

4-AppConfigurations.PNG

Step 6 After some time you can see following Azure Resources in your Azure Subscription.

6-AzureReosurces.PNG

7-NodeJSonVSTS-2.PNG


Step 7 Now I am opening my newly created VSTS account  codeonvsts.visualstudio.com

7-NodeJSonVSTS.PNG


Step 8 . Not  only this also open your newly created Web app that is running on Azure Containers , in this case my node.js web app is running on this URL https://pythondjangoapp.azurewebsites.net

8-WebsiteReady.PNG


Step 9. From step 7 above click on “Work” section and let me create a task for me to update the Heading of this newly created Website. After clicking on “Work” I am landed to this page and I have to create “New Work item” as shown below.

9-Taskinvsts.PNG


Step 10. Enter task details as shown below and click on save and then click on Code->Files Menu at the left

10-CreatedTask.PNG


Step 11.  Now Udpate the code as shown below open index.pug file under views folder , click on edit icon on the right file is editable now , update the line no 17  as shown below and click on commit while committing select work items as the one you created earlier.

11-CodeUpdated.PNG

12-CodeCommit.PNG


Step 12 . Since our CI process is already in place , now click on Builds menu from the left and you can see that a new build is triggered for this change as shown below.

13-CI-Pipeline.PNG


Step 13: Click on the highlighted build no. as shown in above image and you can see all the step performed by CI pipeline as shown below, you can see that build is completed successfully.

14-CICompleted.PNG


Step  14 : Now go to Release menu from left and you can see a new Release is triggered as shown below and now click on Release-2 hyperlink.

15-CD.PNG


Step 15 : Here you can see that a CD is in Progress.

15-CDInProgress.PNG

And after few seconds release gets completed.

16-Success


Step 16 :Now lets open the Python Web App again and see that the app is updated.

17-WebsiteUpdated.PNG

Step 17: Do not forget to mark your task as done and close it.


Hope You enjoyed this 5 Blog Series.

Part 1 - Introduction of Azure DevOps and Basic terminologies.

Part 2 - Understanding and setting up CI/CD for Python App on Azure

Part 3 - Setting up CI / CD of .NET Core running on Linux  on Azure

Part 4 - Setting  up CI / CD of .NET application using Azure App Service.

Part 5 - Setting up CI / CD of Node.js application using Azure App Service.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.