Azure Content Delivery Network (CDN)
What is Azure CDN
As the name suggests content delivery network is a network of distributed servers in point of presence (POP) locations that can efficiently deliver web content to users. CDN’s reduces latency by caching static content on edge and by route optimisation, TCP optimisation etc for dynamic content.
How CDN work
When most Azure Services instances created will reside in a certain region. Regions house multiple availability zones which helps to eliminate single point of failures. If the consumer base is geographically distributed Azure Service instances can deployed in multiple regions to reduce network latency. But depending on the number of users and geographic distribution this can multi region hosting can be expensive. Content delivery networks allow engineers to cater for geographically distributed user base with fraction of the cost of multi region hosting. Azure service will be hosted in the primary region and content delivery network will refer to the service instance as the origin and help deliver web content with minimum latency using point of presence locations.
list of azure regions - https://azure.microsoft.com/en-us/global-infrastructure/services/?regions=all&products=all
list of pop locations - https://docs.microsoft.com/en-us/azure/cdn/cdn-pop-locations
Implementing CDN for Function App Api and Storage Account hosted single page application
Prerequisites
- Azure Functions App Api
- Frontend web app hosted with Storage Account Static Websites
If you are new to Azure Functions and interested in learning how to create a web api using azure functions you can head over to youtube video series on Building Web API’s using Azure Functions on Serverless Hub.
Creating a CDN on Azure
Login to your azure account. Click on “+ Create a resource”. Fill in the details required for the CDN. Select either an existing resource group or create new one to place the CDN. Type in the name of your choice for the CDN name. For the pricing tier select at least the “Standard Verizon” because it is the least expensive CDN tier which allows you to do to dynamic site acceleration. Least expensive “Standard Microsoft” tier only offers General web delivery, which is basically caching at POP locations. This helps for static content like single page applications, but for dynamic content like Web API’s caching can cause unexpected behaviour including security threats. Dynamic site acceleration helps dynamic content by optimising the route from end user to the server. Once everything is filled click on “Review + create”.
Configure CDN endpoint for Single Page Application hosted with Storage Account Static Website
Open the CDN created in the previous step. Click on “+ Endpoint” on the overview page. On form which pops up to the right fill in the required details. Type in the name for the SPA. Unless you setup a custom domain this name will be the prefix of the URL which is application will be exposed to the end user. Choose “Storage static website” as the Origin type. Origin type “Storage” allow us to distribute static content. Nevertheless for single page applications this cannot be used due to routing problems. Choose the hostname of the static website of the correct storage account. Leave the Origin path empty. Leave the Origin host header with the generated value. Disable http access to the CDN endpoint. For optimisation choose General web delivery as this will make POP location servers cache the static content. Once everything is filled click “Add”.
Once the endpoint is created, depending on the pricing tier it will take 10–30 minutes to be available on the URL of the endpoint. You can read the URL from the overview page of the CDN endpoint.
You may have to add the CDN URL to the allowed origin list on the API CORS configuration.
Configure CDN Endpoint for Azure Function App Web API
Open the CDN created in the previous step. Click on “+ Endpoint” on the overview page. On the form fill in the required details as earlier. Type in the name for the API. . Choose “Web App” as the Origin type. Origin type “Storage” allow us to distribute static content. Choose the hostname of the function app. Leave the Origin path empty. Leave the Origin host header with the generated value. Disable http access to the CDN endpoint. For optimisation choose Dynamic site acceleration as this will make POP location servers optimise the route from end user to origin server. For optimisation you need to provide a probe url, which will be used for CDN to ping the origin function app to establish optimum route. Once everything is filled click “Add”.
Again it will take around 10–30 minutes to new endpoint to be up and running. Once it is available you need to update the frontend application to point to the CDN endpoint.
That’s all folks.
