In this project, We'll explore how to deploy an ANGULAR application using the Azure CI/CD Pipeline.
CI/CD helps us to achieving efficiency & reliability in our projects, Further-more this will help in saving time, effort and energy needed in constantly having to trigger the deployment ourselves.
Pre-requisities
An Azure account.
An Angular application ready for deployment.
Basic knowledge of Azure DevOps and Azure Portal
Basic knowledge of GitHub and git commands
Step 1: Set up an Azure DevOps Project
Navigate to Azure-DevOps and create a new project.
On the top right corner, click on “New Project”
Step 2: Configure the service connections
Navigate to the Azure devops portal, go to your new project page and click on the project settings at the bottom left of the page.
Note: If you don’t have a resource group yet, you may have to create it first.
Since, CI (Continuous Integration) and CD (Continuous Deployment) are two separate parts.
Continuous Integration:-
Let's start with CI part of CI/CD. In this section we will create a build using the pipeline feature. Open your project and navigate to "Pipelines" on the left panel as below.
Click on the "Create Pipeline" which will open the below page.
Since this is a github project and our code is pushed there, we will be selecting github as shown
NOTE: You may have to login into your github account if you haven’t already done so.
trigger:
- main
resources:
- repo: self
variables:
# Container registry service connection established during pipeline creation
dockerRegistryServiceConnection: 'aa452d2b-1c4f-4daa-9cf3-f1f66a183c46'
imageRepository: 'thesamikshanginxwebapp'
containerRegistry: 'phpacr.azurecr.io'
dockerfilePath: '$(Build.SourcesDirectory)/Dockerfile'
tag: '$(Build.BuildId)'
# Agent VM image name
pool: Angular-AP
stages:
- stage: Build
displayName: Build and push stage
jobs:
- job: Build
displayName: Build
pool: Angular-AP
steps:
- task: Docker@2
displayName: Build and push an image to container registry
inputs:
command: buildAndPush
repository: $(imageRepository)
dockerfile: $(dockerfilePath)
containerRegistry: $(dockerRegistryServiceConnection)
tags: |
$(tag)
Save and run
Got an error of permission
sudo usermod -aG docker $USER
Once the pipeline has successfully build and push our image to the Azure Container Registry, now we have to deploy our application.
Continuous Deployment
For deploying our application we need to create a Web App.
Login into the azure portal and search for app services , click create and then click on Web App in the drop down menu.
Use the same resource group as the one used earlier. Resource Groups will help you to group all your application resources together.
Once the app deployment is completed. We will have to deploy our code to make this page run our application. To do this, we will be pushing our code into through azure devops pipeline.
Navigate to the Azure devops pipeline and add stage to deploy our application.
- stage: Deploy
displayName: Deploy stage
dependsOn: Build
jobs:
- job: Deploy
displayName: Deploy to Azure Web App
pool: Angular-AP
steps:
- task: AzureWebAppContainer@1
displayName: Deploy to Azure Web App
inputs:
azureSubscription: 'Angular-project-SC' # Use your Azure subscription ID or service connection name
appName: 'Angular-Project-WA' # Replace with your Azure Web App name
imageName: '$(containerRegistry)/$(imageRepository):$(tag)'
Once the pipeline has successfully been deployed, go to azure portal and click the webapp link.
The Angular should be running now as shown below. Test the app to confirm it is running as it should.
Verify the CI/CD pipeline via github commit
You can directly edit the code on GitHub then commit the changes. This change will automatically trigger the pipeline and deploy the changes.
Conclusion
We’ve successfully deployed an Angular application using Azure CI/CD Pipeline. By automating our deployment process, we’ve not only saved time but also enhanced the reliability and consistency of our software releases.