How to set up CDN for a web application using Azure

There could be many ways to set up CDN in Azure cloud. I used Storage and Front Door for this. This approach is cost-effective.

As well known, CDN (Content Delivery Network)is very useful if your website needs to be fast when accessed from anywhere in the world.

However, there is a limitation on CDN.

• The first load from a specific region will still be read from the original resource, which might be far from where the user is. It means it can be slow to load.
• After the cache expires in a few days, the resource in the CDN edge node needs to be reloaded from the original resource. This process will be slow.

To mitigate these limitations, #1, you can pre-load resources in each major Edge. #2 you can set the cache expiry time long enough depending on your context.

Below is the steps needed to set up CDN in Azure cloud.

1. Azure DevOps Build Pipeline
   1. Copy the necessary files to a separate folder. e.g. CSS, Javascript (without security concerns), Fonts and IMG files.Build yaml example

      task: CopyFile@2
      displayName: 'copy files to cdn folder'
      inputs:
        SourceFolder: '$(Build.ArtifactDirectory)/wwwroot'
        Contents: |
          css/*.css
          js/chunk-vendors.*.*js
          fonts/*.*
          img/*.*
        TargetFolder: '$(BuildArtifactDirectory)/cdn'

   2. Config the build pipeline to send the files prepared to Azure storage using AzureFileCopy

      task: AzureFileCopy@5
      displayName: 'Azure File Copy'
      inputs: 
        SourcePath: '$(BuildArtifactDirectory)/cdn'
        azureSubscription: 'azureDevOpsToStorage'
        Destination: AzureBlob
        storage: azurecdn
        ContainerName: azurecdn
        CleanTargetBeforeCopy: false

   3. In the Release pipeline, use PowerShell script to update the links to CSS, etc, to point to the CDN URL.Powershell Example

      param(
        [string]$cdnPath
        [string]$wwwRootPath
      )
      
      # CSS replacement
      Set-Location $wwwRootPath
      ((Get-Content -path index.html -Raw) -replace "/css/", "$cdnPath/css/") | Set-Content -Path index.html -Encoding UTF-8

   4. We need to provide an Azure DevOps account to have write access to the storage.
      This can be achieved by adding Service connections to the DevOps account. Go to DevOps projects/Settings/Service connections. Click New service connection. Select Azure Resource Manager. Provide a connection to the relevant scope of the subscription / Resource Group.
2. Storage
   1. Link the storage container to a Front Door, which is the endpoint where the users can load the static files.
3. Front Door
   1. CORS
      If a javascript file in CDN references another file, CORS will block it from loading to the web browser. In this case, Rule sets configuration can be used in Front Door.
      The rule will be [if origin = ‘your site URL’, then overwrite header, Access-Control-Allow-Origin, as the same as ‘your site URL’.
   2. Rewrite Path
      If the absolute path to a resource has changed, It can be re-written using Rule set configuration. E.g. if /img has changed to /cdn/img during copying the files to CDN server, it’s possible to add rule that if Request Path contains /img then URL rewrite from /img to /cdn/img