Create Release Pipeline For Angular App Using Azure Devops

Introduction

 

The CI/CD (Continuous Integration/Continuous Deployment) is a star of the modern devops environment. It allows you to automate the building, testing, and deployment of applications. With Continuous Integration (CI), systems will trigger the build source and run test suites on each change or code checked in. If the build is passed at all the stages, it automatically deploys to multiple stages such as staging or production environments using a release pipeline. It is referred to as Continuous Delivery (CD). You can add multiple stages of software package validation.

 

In my previous article, I explained about creating the build pipeline and downloading the build artifact for Angular apps. The process of creating the build pipeline is nearly the same for all technologies but the tasks are different. In this article, I will explain how to create a release pipeline and host Angular applications on Azure.

 

Prerequisites

• You must have an account for Azure Devops account and Azure Portal
• Repo and required branches must be set up
• Build pipeline must be created (Refer to my previous article to create build pipeline)

Create App Service on Azure portal

Firstly, you need to create Azure App Service as Angular app is deployed on Azure app service by release pipeline. Following are the steps to create Azure App service.

 

Step 1

 

Login to Azure Portal 

Step 2

 

Select “Create a Resource” >> “App Services” from the left panel and click on “+Add” button from right panel. Alternatively, you can click on “Create app service” button.

 

 

Step 3

 

Fill in the required information to create the web app.

 

You need the following info to create a web app

• Subscription: select the subscription that you want to use to create app service
• Resource Group: Use existing resource group or create new resource group
• Name: Unique name of app service. You can browse your application using {appname}.azurewebsites.net
• Publish: select publish type either code or docker container
• Runtime Stack: select the technology stack. Angular app can be run on Node.js, so I have selected “Node 12 LST”
• Operating System: OS that use to host application. You can select either Windows or Linux.
• Region: select region in which you want to host app service
• App Service plan: select app service plan as per your requirement

 

After filling in all  the required information, click on “Review + create” button. It shows you the summary of option selected. Then click on “Create” button to create web app (app service).

 

 

Azure deploys your app service and provides you with a notification once it is deployed. After deployment, you can also edit some options.

 

 

To view / edit your app service, click on “All resources” and select your app service. The overview section contains details such as subscription, URL, FTP details, etc. The URL is used to access your deployed Angular app.

 

 

Currently, no application is hosted on app service so, it shows default home page of Azure platform.

 

 

Create Release Pipeline

To create new release pipeline, click on Pipelines >> Releases and select "New release pipeline".

 

 

It redirects to a template screen where you can select the template. To customize the template, select "Empty job". Here, you can select artifacts and stages. The artifact is a deployable component of the application and it can be produced by your build pipeline (Continuous Integration). The release pipeline deploys your artifact to multiple stages (also refer as environments such as staging, production, etc.)

 

 

To add artifact, click on “Add an artifact” and you need to provides following information.

• Source type: it is a source of artifact. There are multiple options for source type such as Build, Azure repos, Github, ect. Here, I have selected “Build” option.
• Project: Name of the project the contains the artifacts
• Source (build pipeline): Name of build pipeline
• Default version: default version that deploy on stages
• Source alias: name of the identifier

Click on “Add” button to add an artifact.

 

Next step is to add job and task to the Stage. One job under the stage has been created by default. You can add multiple jobs and multiple tasks under the job. To edit default job, click job link under the stage. 

 

The job is the logical group of tasks that define the run time target o which task can be executed. When you select job, you can find certain setting under the agent job section such as Display name, Agent pool, Agent specification, Demands, Execution plan, Artifact download, etc. The Agent specification contains the runtime environment on which the task can be executed.

 

You can add one or more task under the agent job. To add task, click on “+” on agent job section.

 

In this article, I am going to host Angular application on Azure app service. So, you need to select and add “Azure App Service Deploy” task from the available task options. In this task, you have to define mandatory properties.

• Display name: name of task
• Connection type: it is a service connection type that used for deployment. You can use Visual Studio created published profiles by selecting the “Publish profile” option
• Azure subscription: Azure resource management subscription for deployment
• App service type: it is a container for your web application
• App service name: name of your app service
• Package or folder: it is the path of your build artifact

There are many more properties under this task. You can set them as per your requirement.

 

 

Only one task is required to serve our purpose. Now click on “Save” to save the stage information and settings. You can test your release pipeline on an old build. To run the release pipeline manually, click on “Create release” button.

 

 

When you trigger the release pipeline manually, you have to define certain properties such as artifact version and then click on “Create” button.

 

 

Once you created release, you can see the current status on the stage.

 

 

 

You can also view the logs and status of each task of release. To view log and status, click on “Logs”. This option is available on hover of stage. Here, you can see the default task and custom task with their status. The log is very important for diagnosis.

 

 

You can also see details of each task by clicking on the task.

 

 

Once all tasks under the job have run successfully, your application is hosted on Azure App service.

 

 

Enable Continuous Deployment

You can enable / disable continuous deployment. To do this click “Continuous deployment trigger” button and on the  right side you can see the option to enable this.

 

 

Summary

 

In this article, you learned how to create a release pipeline using Azure Devops and host an Angular application to Azure app services.