How to show system is under maintenance while deploying web application (Angular) on Azure CDN and Blog Storage

Problem Statement:

When deploying a web application (e.g. Angular) using Azure Blob Storage and a CDN profile, there may be some downtime. While Azure offers various services and approaches for zero downtime deployment, such as using an Azure App Service with a “Production Slot,” Azure Static Web Apps, or FrontDoor, these options come with associated costs. Additionally, many legacy web applications are tightly integrated with DevOps pipelines, making it challenging to switch to different services. This guide will demonstrate how to display a “System is under maintenance” page during deployment and how to remove this page once the deployment is complete.

Solution:

At a high level, the following steps will achieve the desired outcome:

1. Create a 404 Page: Develop a simple index.html page hosted on the cloud that displays a message indicating the system is undergoing maintenance.

2. Custom Domain: For better readability, create a CNAME in your DNS provider settings so that the URL for the 404-page looks like 404.company.io.

3. Azure CDN Endpoint: Set up a “URL Redirect” rule in the Azure CDN Endpoint’s Rule Engine settings.

4. Update Azure DevOps: Use the az cdn endpoint rule add and az cdn endpoint rule remove commands to automate the creation and deletion…