CI/CD Pipeline in Azure DevOps

Every industry is adapting the CI/CD model as it gives an advantage of faster & reliable deployments which makes your delivery model highly efficient. This article will explain to you how to set up a CI/CD pipeline in Azure using an angular application.

The main goal of DevOps is to provide faster & reliable deployments. you can achieve these using the below steps.

1. Check for the latest code pushed on the repository by the developers.
2. Build.
3. Test.
4. Deploy code to the server.

What is CI/CD Pipeline?

CI/CD pipeline is an automated list of the process which helps in continuous integration of code pushed by the developers, performing certain mechanism like building, running tests, code analysis, etc. at last deploying it to the production environment automatically. This helps to reduce manual mistakes & increases product releases.

Continuous Integration — In this process, when the code is pushed on the repository, CI is triggered to fetch the latest code and after the successful fetch, other processes are been executed like build & test.

Continuous Deployment — In this process, the latest build is been deployed to the server.

Goals

1. Setup Angular Project & Git Repository.
2. Create App service on Azure.
3. Create an Organization & Project on Visual Studio Team Service (VSTS).
4. Add Service Connections to integrate & deploy your GitHub project with VSTS.
5. Create a Build & Release Pipeline to Build, Test & Deploy your code.
6. Check your application.

Prerequisites

In this article, you’ll be working on an angular project.

If you don’t have Visual Studio Code IDE you can download it from here.
You should also have an Azure account, you can create a free account from here. To Push your code to the repository you will need a GitHub account & git bash, you can download git bash from here. For an angular project, you need to install Nodejs in your system.

Setting up an Angular Project & Git Repository.

To start with an angular project you need to run following command in CLI. This command will install the latest angular version globally.

npm install -g @angular/cli

After installing the angular you need to create a project by using below command in CLI. In the below command “new-app” is the project name.

ng new new-app
cd new-app //navigate to workspace i.e. project

Now after creating the project you have to run it using below command.

ng serve // project will run on default port 4200
or 
ng serve --port port_name //specify port of your choice

Now you can check your project running on http://localhost:4200/, port 4200 is a default port.

Figure 1: Running your angular application.

Now open the project in Visual Studio code editor to make some changes to it.

Figure 2: Opening the project in VS Code.

After opening the project in VS Code, I have changed the title from “Welcome to new-app” to “My first Angular Application”.

Figure 3: Title update.

Now I have made the changes that I required, now its time to put this on GitHub.

1. Create a new repository on GitHub and added a repository name after that click on “Create repository”.

Figure 4: Create a new repository.

2. Open git bash in the project and run the below commands.

$ git init // Initializing git in the project.
$ git add . // Adding all files.
$ git commit -m "First Commit" // Adding first Commit.
$ git remote add origin https://github.com/<username>/<repository_name>.git // Adding remote repository URL.
$ git push -u origin master // Pushing your code to the remote repository.

Figure 5: After pushing your code to the remote repository.

Creating App Service on Azure Portal.

To create an app service you have to visit Azure Portal. After that, you have to click on App Service and fill the required fields such as “Resource Group”, “App Name”, for “Publish” select “code” from the radio button, for “Runtime stack” select node “10.6” as we will be deploying an angular application, for “OS” select “Windows”, “Region”, “App service plan” & for “SKU and size” I will be using the F1 free plan available. Once done with all the fields click on “Review + Create” this will create your app service in a few minutes.

Figure 6: App service creation.

Once App is created click on the “Go to resource” button you will see your app service running.

Figure 7: After the successful deployment of an app service.

Figure 8: App service

Now click on “URL” to check the app service which you created in working or not. You will see the default page publish on the URL.

Figure 9: Default page.

Creating an Organization in Visual Studio Team Service (VSTS).

To create an organization in VSTS you have to visit https://dev.azure.com/,
this will redirect you to create organization page after that you have to provide the name of your choice and click on “continue” this will create your organization.

Figure 10: Create Organization.

Once you create an organization you will get an option to create a Project, give a project name, and select the visibility after that click on “create project” this will create an empty project.

Figure 11: Create Project.

Figure 12: VSTS project.

Add service connections to build & deploy your Github project with VSTS

It is very important to add a service connection between VSTS & Github as this helps VSTS to trigger CI whenever a new push is been done on the repository.

To achieve that connection you have to configure it in project settings at the bottom. Once you click “project setting” it will open a bunch of settings that you can configure in the project as per your requirements.

Figure 13: Project Settings.

Now click on “Service Connections” as we have to configure our GitHub repository to VSTS. After that, you will get a page to create your first service connection just click on the “Create service connection” button.

Figure 14: Service Connections

Figure 15: Create a service connection.

After clicking the service connection button search for Github & select it and click on “next”.

Figure 16: Select GitHub.

After clicking on next you will get a page to fill GitHub details, now click on “Personal Access token” and add your access token in the Authentication area after that click on “Verify” this will verify the connection between GitHub & VSTS also provide the name of the connection and at last click on “Verify & save” this will create a connection between GitHub & VSTS so now whatever is push on the repository it will be triggered by CI.

Figure 17: Connection between GitHub & VSTS.

Figure 18: GitHub Service Connection.

Creating a Build & Release Pipeline.

We are all set with the GitHub service connection now we can start designing the pipeline. The pipeline will be designed in two steps given below.

1. Build.
2. Release

We will start with the Build pipeline.

Select “Pipelines” and click on “Create Pipeline”.

Figure 19: Create a Pipeline.

Now click on “use the classic editor”.

Figure 20: Select Classic Editor.

Now you have to link your Github project so Select “Github” from the source and choose your repository & branch and click on “continue”.

Figure 21: Select GitHub & repository.

After setting your repository now click on “Empty job” this will set up the pipeline with zero agents.

Figure 22: Select Empty Job.

Now you have to click on “+” sign to add agents and search for agents as per your project requirements. Basically the pipeline works on agent so in our case, you have an angular application so you need agents like “npm” to install & built the project, “Archive file” for archive the files at last “Publish Build Artifacts” it is to copy files to the server. After adding all the agents you have to add all required fields as per agents.

Figure 23: NPM install.

Figure 24: Build Project.

Figure 25: Archive build files.

Figure 26: Copy files on the server.

After setting up the agents now you have to select the “Trigger” tab and tick “Enable Continuous integration” this will enable the CI, whenever new code is pushed on the remote repository. Once this is done click on “Save & Queue” it will trigger the CI and all the agents will run sequentially. If something fails in between the CI will stop with an error message and it will show which agent failed and what was the error. This method will reduce the risk of deploying a broken code to the server.

Figure 27: Enable CI.

Figure 28: Successful Build.

Now the Build pipeline is ready let’s move towards the Release pipeline.

To start with release pipeline click on “Releases” after that click on “New Pipeline”

Figure 29: Release Pipeline.

After that select the “Azure App Service Deployment” agent and click on apply.

Figure 30: Select the Deployment Agent.

Now you need to add the artifact which you got from build pipeline. Click on “Add an Artifact”, select the build pipeline and click on “Add”

Figure 31: Select Artifact from Build pipeline.

After adding artifact you need to enable CD so that once the CI is passed successfully the CD will trigger automatically.

Figure 32: Enable CD Trigger.

Now after enabling CD you need to select the “Azure Subscription” & “App Service name” where the Build will be deployed.

Figure 33: Select the Subscription & App service name to deploy.

Now click the agent and click on three dots […] on the “package & folder” option to select the build artifact.

Figure 34: Locating Artifact.

Click on “ok” after selecting the zip file.

Figure 35: Select the Zip file location.

Now click on “Save” after that click on “Create Release” at last click on “Create” this will launch your Release pipeline.

Figure 36: Release Pipeline.

After launching your release pipeline this will start deploying the build to the selected application.

Figure 37: Successful Deploy.

Checking your application on the server.

Now after successful release its time to check your application working on the server.

Figure 38: Application Running in Server.

Conclusion

You have successfully deployed your angular application on the server using the CI/CD pipeline. CI/CD plays an important role in the industry to increase production, reduces the server downtimes and manual efforts.