This post serves as a continuation of our previous article on App Modernization scenario, specifically focusing on Cloud Native Development. In this article, we will delve into the crucial aspect of automating the deployment process for your web application. By adopting best practices, you can streamline and accelerate the deployment of your web app, ensuring efficiency and reliability.

DevOps

By adopting best practices, you can streamline and accelerate the deployment of your web app, ensuring efficiency and reliability.

1. Understanding the Importance of Automating Deployment:

Efficient deployment is essential to ensure a seamless and error-free release of your web application. Manual deployment processes are prone to human error and can be time-consuming.

Automating the deployment process not only saves time and effort but also reduces the risk of errors, allowing for faster and more reliable releases.

2. Key Steps for Automating Deployment:

To automate the deployment process for your web application, follow these best practices:

2.1. Continuous Integration and Continuous Deployment (CI/CD):

Implementing CI/CD pipelines is a fundamental practice for automating deployment. CI/CD enables developers to automate the build, testing, and deployment processes, ensuring that any changes made to the codebase are automatically and consistently deployed to the production environment.

2.2. Infrastructure as Code (IaC):

Adopting Infrastructure as Code allows you to define and manage your infrastructure using declarative files. This approach enables you to automate the provisioning and configuration of your deployment infrastructure, ensuring consistency and reducing the risk of human error.

2.3. Containerization:

Containerization, using technologies like Docker, enables you to package your web application and its dependencies into a lightweight and portable container. This approach simplifies the deployment process and ensures consistency across different environments, making it easier to automate and scale.

2.4. Orchestration and Deployment Tools:

Utilize orchestration and deployment tools, such as Kubernetes or Docker Swarm, to automate the deployment and management of your containers. These tools provide powerful features for scaling, load balancing, and self-healing, making the deployment process more robust and efficient.

3. Best Practices for Automated Deployment:

Consider the following best practices when automating the deployment process for your web application:

3.1. Version Control:

Maintain a version control system, such as Git, to track changes made to your codebase. This allows for easy collaboration, rollback to previous versions, and ensures that the correct version is deployed reliably.

3.2. Testing and Quality Assurance:

Implement automated testing and quality assurance processes in your CI/CD pipeline. This ensures that your web application is thoroughly tested before each deployment, reducing the risk of bugs and issues in the production environment.

3.3. Monitoring and Logging:

Integrate monitoring and logging solutions into your deployment process. This enables you to track the performance, availability, and health of your web application, allowing for proactive identification and resolution of issues.

3.4. Rollback and Rollforward Strategies:

Establish rollback and rollforward strategies to handle deployment failures or issues. These strategies provide a safety net by allowing you to revert to a previous working version or proceed with a predetermined backup plan.

Automating the deployment process for your web application is a critical step towards achieving efficient and reliable releases.

By following best practices such as implementing CI/CD, Infrastructure as Code, containerization, and utilizing orchestration tools, you can streamline and scale your deployment process.

Additionally, incorporating version control, testing, monitoring, and rollback strategies ensures the integrity and stability of your web app throughout the deployment lifecycle.

Deployment options

In the previous post, we saw the deployment options and deployed Angular App using Local Git

Designing-cloud-native-spa-using-angular

Let’s take a closer look at the various deployment options available.

This deployment option (LOCAL GIT) can be used for the development environment, but we need to have a better approach on Branching strategy to merge code using Pull review and configure an automated DevOps pipeline that runs Unit Tests, Code quality tests, and also have a STAGE approval process before higher environment deployment.

In this post, we will deep dive option of using Azure DevOps pipeline.

Baseline Azure Pipeline architecture

Let’s refer below the high-level DevOps workflow for deploying application changes to staging and production environments in Azure.

The solution uses continuous integration/continuous deployment (CI/CD) practices with Azure Pipelines.

Refer: Azure Pipelines baseline architecture – Azure Pipelines | Microsoft Learn

There are other alternatives:

Azure DevOps Server (previously known as Team Foundation Server) could be used as an on-premises substitute.

Jenkins is an open-source tool used to automate builds and deployments.

GitHub Actions allow you to automate your CI/CD workflows directly from GitHub.

GitHub Repositories can be substituted as the code repository. Azure Pipelines integrates seamlessly with GitHub repositories.

Scenario details

Using proven CI and CD practices to deploy application or infrastructure changes provides various benefits including:

• Shorter release cycles – Automated CI/CD processes allow you to deploy faster than manual practices. Many organizations deploy multiple times per day.
• Better code quality – Quality gates in CI pipelines, such as linting and unit testing, result in higher quality code.
• Decreased risk of releasing – Proper CI/CD practices dramatically decreases the risk of releasing new features. The deployment can be tested prior to release.
• Increased productivity – Automated CI/CD frees developers from working on manual integrations and deployments so they can focus on new features.
• Enable rollbacks – While proper CI/CD practices lower the number of bugs or regressions that are released, they still occur. CI/CD can enable automated rollbacks to earlier releases.

Potential use cases

Consider Azure Pipelines and CI/CD processes for:

• Accelerating application development and development lifecycles.
• Building quality and consistency into an automated build and release process.
• Increasing application stability and uptime.

Considerations

These considerations implement the pillars of the Azure Well-Architected Framework, which is a set of guiding tenets that can be used to improve the quality of a workload. For more information, see Microsoft Azure Well-Architected Framework.

Azure Pipelines baseline architecture – Azure Pipelines | Microsoft Learn

Azure Pipelines Architecture for Azure Web Apps

Azure Web Apps is a fast and simple way to create web apps using ASP.NET, Java, Node.js, Python, and other languages and frameworks. Deliver value faster to your customers with a continuous integration and continuous deployment (CI/CD) pipeline that pushes each of your changes automatically to Azure Web Apps.

Azure Pipelines architecture for Azure Web Apps – Azure Pipelines | Microsoft Learn

Dataflow

This section assumes you have read Azure Pipelines baseline architecture and only focuses on the considerations specifics to deploying a workload to Azure App Services.

1. PR pipeline – Same as the baseline
2. CI pipeline – Same as the baseline, except the build artifacts created for Web Apps is a Web Deploy package.
3. CD pipeline trigger – Same as the baseline
4. CD release to staging – Same as the baseline with 2 exceptions: 1) the build artifact that is downloaded is the Web Deploy Package and 2) the package is deployed to a staging slot in App Services.
5. CD release to production – Same as the baseline with 2 exceptions: 1) the release to production for a Web App swaps the production and staging slot, and 2) the rollback for Web Apps swaps production and staging slots back.
6. Monitoring – same as the baseline

Azure Pipelines:

Use Azure Pipelines to automatically deploy your web app to Azure App Service on every successful build. Azure Pipelines lets you build, test, and deploy with continuous integration (CI) and continuous delivery (CD) using Azure DevOps.

YAML pipelines are defined using a YAML file in your repository.

A step is the smallest building block of a pipeline and can be a script or task (prepackaged script).

Configure CI/CD with Azure Pipelines – Azure App Service | Microsoft Learn

Refer: key concepts: Azure Pipelines New User Guide – Key concepts – Azure Pipelines | Microsoft Learn

Steps

1. Configure development environment for Angular.
2. Create an Azure App service plan for hosting this website.
3. Set up for Azure DevOps portal.
4. Configure Azure Repo and update the repo.
5. Create an Azure Subscription connection in ADO.
6. Setting up DevOps pipeline.

Step 1: Configure the development environment for Angular

mkdir App

cd <app name>

 create the app using

npm install -g @angular/cli

And we can run the application with the command 

cd app name    

ng serve

And we can access the application in the browser by accessing http://localhost:4200

Step 2: Create Azure App service plan for hosting this website

Create App Service in Azure Portal:

pm2 serve /home/site/wwwroot -no-daemon-spa

PM2 is an Advanced production process manager for node.js.

This allows us to run applications and run processes inside Node. In order to configure it, go to the App Service you just created > Configuration > and in the “Startup Command” add the commandpm2 serve /home/site/wwwroot -no-daemon-spa

We covered Point#1 and 2 in previous post, click here for more details Design and deploy Cloud Native SPA using Angular – Rajeev Singh | Coder, Blogger, YouTuber (wpcomstaging.com)

Let’s check Point#3 and others in details.

Step 3: Setting up DevOps portal and Azure Repo

Create DevOps account.

Create New Project, e.g., Angular

Go to Repo and create a new Repository: AngularApp

Create a feature branch: feature/working.

There are multiple ways to push code to Azure Repo.

1. Upload your local code to Azure Repo.
2. Push code from VSC from command line to Azure Repo

Step 4: Prepare your repository & Push code

To get automated builds from Azure App Service build server, make sure that your repository root has the correct files in your project.

Configure continuous deployment – Azure App Service | Microsoft Learn

We will upload the code/files to Azure Repo and check-in code here.

Once checked-in, we will pull code from Azure Repo to VSC for development.

Push Code to repo

We can then push our code to the repository by accessing the Angular project folder and using the commands.

git init
git remote add origin INFORM_THE_REPOSITORY_URL
git add .
git commit -m "Initial commit"
git push origin master

Step 5: Use a service connection

To deploy to Azure App Service, you’ll need to use an Azure Resource Manager service connection.

The Azure service connection stores the credentials to connect from Azure Pipelines or Azure DevOps Server to Azure.

Refer: How to create Service Connection: Connect to Microsoft Azure with an ARM service connection – Azure Pipelines | Microsoft Learn

Step 6: Setting up DevOps pipeline

Refer below how to set up your CI/CD pipeline for Angular Apps and get the application deployed to Azure App Service.

1. Node.js will be installed.
2. The application will be built.
3. The unit tests will be executed.
4. The files will be zipped.
5. The artifact will be created.
6. The deployment will be done IF build succeeds (in this stage is where the application is being deploying to the App Service in Azure Portal)
7. Where the deployment to acceptance environment can be done (in this example, it is only printing a message, just for demonstration purpose)
8. Where the deployment to the Production environment can be done (in this example, it is only printing a message, just for demonstration purpose)

Create Build Pipeline

To connect the pipeline to the App service instance created.

• Create a pipeline.
• Choose Azure repose (YAML)
• Choosing Node.js with Angular

# Node.js with Angular
# Build a Node.js project that uses Angular.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
- master

pool:
 vmImage: 'ubuntu-latest'

stages:
- stage: Build
 displayName: Build stage
 jobs:
 - job: Build
 pool:
 vmImage: 'ubuntu-latest'
 steps:
 - task: NodeTool@0
 inputs:
 versionSpec: '16.x'
 displayName: 'Install Node.js 16.x'

 - script: |
 cd AngularApp/
 npm config set fund false 
 npm audit fix --force
 npm install -g @angular/cli
 npm install
 ng build
 displayName: 'npm install and build'
 workingDirectory: '$(Build.SourcesDirectory)'
 #- task: CmdLine@2
 # displayName: "Run unit tests"
 # inputs:
 # script: |
 # cd AngularPOC2/
 # ng test --browsers=ChromeHeadless --code-coverage --watch=false
 - task: ArchiveFiles@2
 displayName: 'Archive files'
 inputs:
 rootFolderOrFile: '$(System.DefaultWorkingDirectory)/'
 includeRootFolder: false
 archiveType: zip
 archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
 replaceExistingArchive: true

 - task: PublishBuildArtifacts@1
 inputs:
 PathtoPublish: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
 ArtifactName: 'drop'
 publishLocation: 'Container'

- stage: Development
 displayName: 'Deploy to Development'
 dependsOn: Build
 condition: succeeded()
 jobs:
 - deployment: DeploymentDevelopment
 pool:
 vmImage: 'ubuntu-latest'
 environment: Development
 strategy:
 runOnce:
 deploy:
 steps:

 - task: AzureWebApp@1
 displayName: 'Deploy App Service'
 inputs:
 azureSubscription: 'azureSubscription'
 appType: 'webAppLinux'
 appName: 'AngularPOC2'
 package: '$(Pipeline.Workspace)/drop/$(Build.BuildId).zip'
 runtimeStack: 'NODE|18-lts'

- stage: Acceptance
 dependsOn: [ Development ]
 displayName: 'Deploy to Acceptance'
 jobs:
 - job: DeployToAcceptance
 displayName: 'DeployAcceptance'
 steps:
 - script: echo Deploying to Acceptance
- stage: Production
 dependsOn: [ Acceptance ]
 displayName: 'Deploy to Production'
 jobs:
 - deployment: DeployProduction
 pool:
 vmImage: 'ubuntu-latest'
 environment: Production
 strategy:
 runOnce:
 deploy:
 steps:
 - script: echo Deploying to Production

Build Status:

The below Sample code has a trigger based on the master branch, once the code is merged to master, the pipeline will automatically trigger the build and start the pipeline.

OR

Go to Pipeline and click on Run Pipeline to trigger the pipeline.

Below is the reference for pipeline stages.

View Deployment status from Azure Portal: Deployment center

Deployment Status in the DevOps pipeline

Validate the website:

Conclusion

In this post, we covered the importance of DevOps, DevOps baseline architecture, and deployment options. DevOps has become an essential practice for modern software development teams. It bridges the gap between development and operations, enabling faster and more reliable software delivery.

By successfully creating an automated deployment pipeline, you can streamline the process of delivering software updates. This automation reduces the chances of errors and enables faster and more frequent releases. With Azure DevOps, you can easily manage and monitor your deployments, ensuring that your applications are running smoothly.

In an upcoming post, we will deep dive into the DevOps pipeline code. Understanding the code behind the pipeline is crucial for customizing and extending its functionality.

We will explore various scenarios, such as deploying applications as web apps, static pages, and containers.

These scenarios will provide insights into different deployment strategies and help you choose the right approach for your applications.

References

Tutorial: Deploy an Angular app on Azure Static Web Apps | Microsoft Learn

Configure continuous deployment – Azure App Service | Microsoft Learn

Triggers in Azure Pipelines – Azure Pipelines | Microsoft Learn

Configure CI/CD with Azure Pipelines – Azure App Service | Microsoft Learn