Hosting a Static Website in Azure Storage with CDN and CI/CD Pipeline Integration

In this blog post, we will explore how to:

1. Host a static website in an Azure storage container.
2. Create a CDN endpoint for the static website.
3. Connect a custom domain to the CDN endpoint.
4. Utilize Azure DevOps to implement CI/CD pipelines.

A special thanks to Piyush Sachdeva for hosting the #10weeksofcloudops challenge. This blog represents my take on the first week's challenge.

Architecture Overview

Step 1: Create a Resource Group

1. Search for Resource Group in the "Create a Resource" menu.
   
   

2. Create a resource group under the required subscription.
   
   

Step 2: Create a Storage Account

1. From the "Create a Resource" menu, search for Storage Account.
   
   

2. Create a storage account under the same subscription and select the resource group from the dropdown menu.
   
   

Step 3: Enable Static Website Hosting

1. Navigate to the Overview section of your storage account and click on Static Website under the capabilities section.
   
   

2. Enable the Static Website option and specify the names of your index.html and error.html files.
   
   

3. Upload the required HTML files to the $web container.
   
   

Step 4: Create a CDN Profile

1. Search for Front Door and CDN Profiles in the "Create a Resource" menu.
   
   

2. Select Azure CDN.

   Note: Azure CDN is not available for free or student subscriptions. Upgrade to a Pay-As-You-Go subscription or another eligible plan.
   
   

3. Create the CDN profile in the same resource group, keeping the default settings.
   
   

Step 5: Create a CDN Endpoint

1. Navigate to the Endpoint Creation button in your CDN profile.
   
   

2. Create an endpoint, selecting Storage Static Website as the origin type. The static website name will populate automatically.
   
   

Step 6: Connect a Custom Domain

1. If you’ve purchased a custom domain (e.g., from Namecheap.com), log in to your registrar's dashboard.

2. Under the Advanced DNS tab of your domain, add two CNAME records:

   • Type: CNAME
   • Host: https and www
   • Value: The CDN endpoint name
   • TTL: Automatic

3. Go back to your CDN profile in Azure and add the custom domain. Azure will verify the DNS records.
   
   

4. Enable HTTPS for your custom domain in the CDN settings.
   
   

Congratulations! You’ve successfully hosted a static website in Azure and linked it to a custom domain.

Step 7: Implement CI/CD Using Azure DevOps

1. Create a new project in Azure DevOps.
   
   

2. Navigate to Project Settings > Agent Pools and create a new agent pool.
   
   

3. Download the appropriate agent for your local machine and follow the setup instructions.
   
   

4. Generate a Personal Access Token (PAT) under User Settings with necessary permissions. Use the PAT to configure the agent during setup.
   
   

5. Start the agent using ./run.sh. It will begin listening for jobs.
   
   

6. Create a new Service Connection under Project Settings and link it to your Azure subscription and resource group. Now if your browser disables popups automatically, please disable them for this step because resource group will not be seen until you authenticate again during this step.
   

7. Now we need to configure the CI/CD pipelines and we use the following azure-pipeline.yml file to configure it.
   

trigger:
- main

pool: Default

steps:
- task: AzureCLI@2
  displayName: 'Running Pipeline Script'
  inputs:
    azureSubscription: 'StaticWebsite'
    scriptType: 'bash'
    scriptLocation: 'scriptPath'
    scriptPath: 'pipeline_script.sh'

Here the trigger option refers to the github branch of the static website code repo. pool refers to the agent pool which is running in your machine. The azureSubscription refers to the service connection name which is defined earlier while creating a new service connection. Now this script runs the pipeline_script.sh file which is defined as follows.

#!/bin/bash

AccountName="personalwebsitestorage"
RG="PersonalWebsiteRG"
ProfileName="PersonalWebsiteCDN"
EndPoint="PersonalWebsiteEndpoint"

echo "--------------------------------------------------------"
echo "|   Removing previous content from CDN edge locations  |"
echo "--------------------------------------------------------"

az cdn endpoint purge \
      --name $EndPoint \
      --profile-name $ProfileName \
      --resource-group $RG \
      --content-paths "/*"


echo "--------------------------------------------------------"
echo "|           Uploading to Azure Storage Account         |"
echo "--------------------------------------------------------"

Connection_String=$(az storage account show-connection-string --name $AccountName --resource-group $RG --query connectionString -o tsv)
az storage blob upload-batch \
  -d "\$web" \
  -s "website" \
  --connection-string $Connection_String \
  --overwrite \
  --pattern "*"

Here modify the AccountName to the storage account name where the static website is hosted. In RG section, give the resource group name with which we work with. In the ProfileName section, provide the name of the CDN profile created and for EndPoint, give the name of the CDN endpoint created under the profile.

This script first purges all the cached data on the CDN edge locations and then uploads the new content to the storage account which will modify our static website through the pipeline.

1. Now let us setup the pipeline in Azure Devops portal. Select the project and head to the pipelines section. Create a new pipeline and select Github option.

1. Now select the github repo corresponding to the static website and select the existing azure pipeline yaml file option. Review the yaml file
   

2. Verify the branch of the github repo and the filename of the pipeline and run the pipeline.
   

Now the CI/CD pipleine is successfully setup.

That’s it! You’ve successfully set up a static website with Azure Storage, integrated Azure CDN, linked a custom domain, and implemented a CI/CD pipeline with Azure DevOps. A special thanks to Nishant Singh for his detail blog which helped immensely to create this project. Also a big shoutout to Piyush Sachdeva's 10weeksofcloudops challenge. Please check out his youtube channel for some amazing cloud tech content.