CI/CD Pipeline using Azure DevOps — Azure build pipeline using Classic Editor

SoumyaAmte
6 min readJul 12, 2024

--

When we say DevOps, understanding CI/CD is fundamental. However, beyond grasping the principles of CI/CD, it’s crucial to know the implementation of a CI/CD pipeline in the real-world scenario and how to integrate and deploy an application effectively using pipelines.

As a cloud and DevOps enthusiast, I believe that hands-on implementation of simple projects is the best way to learn. Therefore, I am writing a blog series to guide fellow learners through the easiest implementation of DevOps practices. This series will guide you step-by-step to understand the high-level structure of a CI/CD pipeline, the key elements of Azure DevOps, and how to implement build and release pipelines using a demo project.

Part 1: Azure Build (CI pipeline)

What is Continuous Integration and its high-level architecture?

A Continuous Integration (CI) pipeline, also known as a build pipeline, is a set of automated processes that streamline the integration of code changes from multiple developers into a shared project. It ensures that code is regularly merged, built, tested, and validated, providing rapid feedback to developers. This process helps to identify and fix integration issues early, improving the quality and reliability of the software.

High-Level Architecture of Azure Build Pipeline

Key components of a build (CI) pipeline using Azure DevOps include;

1. Azure Boards — It is a service provided by Azure DevOps that helps teams plan, track, and manage their software projects. It offers a rich set of capabilities for work item tracking, project management, and team collaboration. Azure Boards is designed to support various development methodologies, including Agile, Scrum, and Kanban.

2. Source Code Management (SCM):
Azure Repos: The pipeline starts with a source code repository where developers commit their code. Azure Repos provides Git repositories for source control, enabling collaboration and version management.

3. Automated Builds
Azure Pipelines
: The CI pipeline automatically triggers a build process whenever new code is committed. Azure Pipelines compiles the code, resolves dependencies, and creates build artifacts.

4. Automated Tests:
Azure Pipelines: After the build, Azure Pipelines runs a series of automated tests, such as unit tests, integration tests, and static code analysis. These tests ensures that the new code does not break existing functionality and meets quality standards.

5. Build Artifacts (Package and Publish)
Azure Artifacts
: The output of the build process is a set of build artifacts, such as binaries, libraries, or Docker images. Azure Artifacts stores these artifacts for further use in the deployment process.

Demo project to implement Azure Build (CI pipeline) using Classic Editor

To start with our project we are required to perform some prerequisite steps, which include;

  1. An Azure App Service in Azure Portal to host the application.
  2. Login to the Azure DevOps portal using — https://dev.azure.com.
  3. Create an Organization and a Project within that organization.

To start with our build pipeline we would need an application code in the Azure Repos. For this project, we will be using a sample “YouTube Clone” which you can download from git using the below commands.

  1. Run the below commands in VS code, Git bash terminal
    mkdir AzureDevOps
    cd AzureDevOps
    git init
    git clone https://github.com/piyushsachdeva/Youtube_Clone

2. To push the application code in Azure Repos, copy the push command from the DevOps portal and run in VS code as mentioned below. Then refresh the portal again to see the application code in our Azure repos repository.

Steps to perform in Azure DevOps portal
Steps to perform in VS Code to push the code in Azure repos
YouTube Clone application code in Azure Repos

3. Creating the CI pipeline using Azure Build.

Go to Pipeline >> Create Pipeline >> select classic editor >> select source as “azure repos git” , also select your Team Project and Repository from the drop down.

4. Azure DevOps provides various in-built templates but for this project, we will select an “Empty Job” and configure Tasks, Variables, and Triggers for our pipeline.

5. In Tasks, define the name of the Pipeline, Agent pool which is a group of machines that run your pipeline jobs, helping to manage and scale your builds and deployments, and Agent Specification ( It defines the type of machine (e.g., OS, software configuration) on which your pipeline jobs will run.)

6. Update the name of “Agent Job”. Add tasks npm install, npm build and publish artifact, under the Agent Job as shown below.

7. In the task “Publish artifact” change the “path to publish” and “Artifact name” if required.

8. Though we will create a detailed release (CD) pipeline later, we can also integrate the deployment part into this pipeline itself. For this we need to add “Azure App Service Deploy” in the task and add the “Azure App Service” details which we created in the prerequisite step.

9. The next part of the Build pipeline is to set Variables and Triggers.
Variables
in a build pipeline store values that can be reused throughout the pipeline, allowing for dynamic and flexible configurations.
Triggers in a build pipeline define conditions under which the pipeline will automatically start, such as when code is committed to a repository or on a scheduled basis.
We will keep this project simple and won’t make any changes in the Variable and we will trigger the pipeline manually.

10. At last, we can “Save and Queue” the pipeline.

You can check the status and logs under jobs in the pipeline. It will take around 15–20 minutes to run the pipeline. Here we can see the output, the pipeline has run successfully and one artifact is produced named “drop”.

Pipeline Output
Artifact created

Now this completes the Integration/build part of the Pipeline but as we added the deployment part in this pipeline we can see the application running. For this, we will check the output of “Azure App service deploy” from our recently deployed pipeline results. Find the App service Application URL and hit in the browser.

YouTube Clone Application

And that’s how we can see the application running through Azure Build Pipeline!!!

Creating the pipeline using “Classic Editor” fits very well for understanding the basic structure of the CI/CD pipeline and its implementation through Azure DevOps. But, in real-world scenarios, it is not a preferred method. Thus, in the next part, we will go through the implementation of the build pipeline using “YAML” and understand a few more Azure DevOps concepts.

Stay Tuned! : )

--

--