Simple multi-stage CICD YAML pipeline for Azure DevOps
This will be a step-by-step guide for creating a simple CICD pipeline in Azure DevOps. Before we start make sure you have an Azure DevOps account and Azure portal subscription.
In this article, I will be setting up the CICD pipeline to deploy a sample Angular+Node application to the Azure App service.
You will need to create the following resources to follow through the tutorial:
1. Azure app service
2. Azure Repo
3. Service Connection in Azure DevOps to deploy to the Azure App service
4. Sample Angular+Node app to deploy
Let’s start with the steps to create the deployment :
- I’ve created a sample Angular+Node app to deploy and its structure is as shown below-
The ‘backend’ folder has the Node app, and the ‘frontend’ folder contains the Angular app. You will also need to initialize a git repo here.
2. I have also created an ‘azure-pipelines.yml’ file. This file will define the stages to build the app and then deploy it to the correct environment.
In this file, I have 4 stages to perform different tasks.
- Stage 1: Build
In this stage, I’m installing the required packages and libraries. Then building the Angular app and move the build to the ‘backend/dist’ folder from where it will be served by my Node app. Then as we only have to deploy the ‘backend’ folder to the App service, we will zip the backend as an artifact and publish it to the artifact staging directory. - Stage 2: Maintainance Environment Deployment
This is a deployment stage, and we will be deploying the zipped artifact we created in the build stage. We will trigger this stage only if we are pushing changes to the MAINT branch, this is controlled by the condition in this stage. We also need to enter the ‘service connection name’ and the ‘app name’ in the deployment task to make the App service deployment. - Stage 3, 4:
These stages are similar to stage 2, the only difference is they check for changes in different branches and make the deployment to their respective App service/Environment.
3. Once the setup is done you have to push your Angular+Node project to the Azure repository that you created on Azure DevOps.
4. Then from the Azure pipelines you have to create a new pipeline. Select the repo that you have pushed the code to and select the ‘azure-pipelines.yml’ file for the pipeline.
5. Since we have put the trigger as ‘develop, MAINT, QA, PROD’ the pipeline will get triggered whenever you have any changes in those branches.
6. Make sure you have an ideal agent to execute the pipeline, if you don’t have any Agent set up then you will need to create a manually hosted agent to run your pipeline.
7. You could also set up an approval process in Azure DevOps for the deployment. This could be done by going to the environments section in the Azure pipeline and defining the approvers for each environment.
8. You can test the pipeline by pushing any change to the trigger branch and the pipeline should be automatically triggered. The pipeline will start its execution and the deployment will be made to the App service. The final result will look as shown below.
There you go! It’s that easy to build your own CICD pipeline. Drop a like and don’t forget to follow if you found the article helpful and keep building cooler stuff using DevOps!!
