Project : Deploying a React App to Azure App Service using Azure DevOps and Terraform with Blue-Green Deployment

Introduction:

• Overview: In this blog, we’ll deploy a React application on Azure App Service using Azure DevOps pipelines for CI/CD. Additionally, we’ll use blue-green deployment to minimize downtime, ensuring smooth upgrades between the production and staging environments.

• Why Azure App Service?: Azure App Service is a fully managed platform for building, deploying, and scaling web apps. It simplifies the deployment process, automatically managing infrastructure, patching, and scaling.

If you are coming from AWS, then It is like Elastic Beanstalk over there.

• Why Terraform?: Terraform allows us to manage Azure resources with code, ensuring that infrastructure is easy to define, deploy, and maintain. Infrastructure as Code (IaC) provides consistency, automation, and repeatability for deploying resources.

• Blue-Green Deployment?: Blue-green deployment enables a seamless switch between two environments: one currently live (Blue) and one prepared for deployment (Green). This reduces downtime and allows quick rollback if needed.

Architecture:

Step 1: Provision Azure Infrastructure using Terraform

We will be using this GitHub repository to provision infrastructure on Azure:

https://github.com/patelajay745/azure-resources

Instead of deploying all the resources from the repository, we’ll focus on targeting a specific module. We will check which resources are going to be provisioned. Before running the command below, ensure you provide the necessary variables. If you need any assistance, feel free to leave a comment, and I'll be happy to help.

terraform plan -target=module.app_service

If everything looks good, you can proceed with provisioning the infrastructure using the following command:

terraform apply -target=module.app_service

If the process runs smoothly, the required infrastructure for this project will be deployed successfully.

Step 2: Set Up Azure DevOps for CI/CD

Login to your Azure DevOps using following link.

https://dev.azure.com/

Create a new project by clicking on “New Project”

Provide required details.

Now, Lets import code from Github to azure Repos.

Click on “Repos”

You can use this url to clone code.

https://github.com/patelajay745/React-Currency-Converter.git

Now , Let’s Setup build pipeline. Click on “Pipeline” then “Create Pipeline”

Choose “Azure Repos Git” from list.

Select imported repositories.

Choose “Node.js with react”.

It will populate some yaml configuration but we will change it.

trigger:
- main

pool:
  name: azureagent

steps:
- task: Npm@1
  displayName: 'NPM Install'
  inputs:
    command: 'install'

- task: Npm@1
  displayName: 'NPM Build'
  inputs:
    command: 'custom'
    customCommand: 'run build'

- task: PublishBuildArtifacts@1
  name: 'Publish_Artifacts'
  inputs:
    PathtoPublish: 'build'
    ArtifactName: 'drop'
    publishLocation: 'Container'

This pipeline automates the build process for a React application using Azure DevOps. It first installs the necessary Node.js packages with the Npm install task. Then, the Npm build task runs a custom build command (npm run build) to generate the production-ready version of the app. Finally, the PublishBuildArtifacts task packages the built application files (from the /build directory) and publishes them as artifacts under the name "drop," which can then be used in the release pipeline for deployment to the App Service.

If you don’t understand anything in above pipeline code then comment down below, I will happy to help you.

I have configured Self-hosted macOS agents. You can choose microsoft hosted agent also. For more details check following link.

https://learn.microsoft.com/en-us/azure/devops/pipelines/agents/osx-agent?view=azure-devops

Don’t forget to change your agent setting (pool name:) azure pipeline configuration.

Let’s try out our Build Pipeline(CI)

Click on “Save and run”.

If everything is configured(Agent) very well then CI will be successful.

Now Let’s Create Release pipeline(CD).

Click on “Releases’ from Pipelines section.

Click on “New Pipeline”.

Click on “Artifacts | Add”

Choose artifact. Click On “Add”

Click on little thunder icon.

Click on “Enabled” on Continuous deployment trigger then click on drop down arrow beside the Add . Choose “ The build pipeline default branch” then close it.

Now Click on “Add Stage” then Click on “Azure App Service deployment” then apply.

Provide stage name ”Staging” and close it .

Click on “Job”

Slect Subscription and then authorize it with azure portal. Choose “Web App on linux” as App type. Choose app service name (Which was deployed using terraform” then click “Save”.

Make sure you have selected Agent before going further otherwise below option won’t show up.

Click on “Deploy to slot”. Choose Resource group and Slot(Stagging). Choose folder by clicking on three dots besides. Choose “1.0(statics|1.0)” as runtime Stack. Click on “Save”

Now Stagging is done, now we will CD for prod.

Click on “Clone Stage” and change name to “Prod'“

Click On “Job” . Just uncheck Deploy to Slot. Leave everything else as it is. Click on “Save”

Now Let’s add “Manual intervention”. Click on “Pre-deployment Condition”

Choose After Stage. Click On “Pre-deployment approvals.

Choose Approvers and other setting as per your requirement. Click “Save”

Click on “Create pipeline”

If Everything is setuped right then It will deploy your website to Staging environment

You can get your staging url from logs or Azure App service.

If you test your staging URL

Now come to production part, It will send mail to approver or they can see on azure pipeline on portal. If they approve then it deploy to production also.

If you approve then It will deploy to production.

That’s all.

In this hands-on guide, we've explored how to deploy a React application to Azure App Service using Azure DevOps pipelines, while leveraging blue-green deployment with manual intervention for production approval. This approach ensures minimal downtime and controlled deployment processes. By utilizing Terraform for infrastructure provisioning, we’ve streamlined infrastructure management, ensuring consistency and reliability.

While Azure App Service offers a fully managed platform for deploying web applications, Azure Container Apps can be a more cost-effective and flexible option, especially for containerized applications. Here’s why:

• Cost Efficiency: Azure Container Apps follows a consumption-based pricing model, meaning you only pay for the resources your app actually consumes. This is particularly beneficial for apps with fluctuating traffic, as you can save on idle resources compared to App Service’s more static pricing tiers.

• Scaling: Container Apps natively support microservices and serverless models, offering better auto-scaling capabilities based on event-driven triggers or metrics such as CPU and memory usage. This dynamic scaling can lead to better resource optimization, unlike App Service, where scaling can be more rigid.

• Flexibility: Container Apps allow you to run any application packaged as a container, providing more flexibility in terms of environment configuration, languages, and dependencies. This makes it ideal for more complex or custom-built solutions where App Service might be limiting.

By using Azure Container Apps, you gain more granular control over your resources, optimize costs, and ensure your infrastructure is ready to scale dynamically as your application grows.

Hey ! don’t Forget to run magic command after this hands-on .

terraform destory

That was all from side. We will explore another azure service with hand-on till then keep reading official document.