How to use Azure's CDN (Content Delivery Network)?

How to use Azure’s CDN (Content Delivery Network)?

How to use Azure CDN (Content Delivery Network)

Together, SharePoint and Azure form a powerful duo. SharePoint is at the heart of knowledge management and collaboration tools, while Azure powers an organization’s cloud services strategy. These two solutions can combine in multiple ways to solve common business challenges.

Many services offered by Azure can be used to extend and improve SharePoint’s functionality, both on-premises and in the cloud. One of the services offered by Azure is the Content Delivery Network (CDN). This is an Infrastructure as a Service (IaaS) solution that provides the entire globally distributed caching infrastructure. This improves the software’s functionality.

What is Azure CDN?

Azure CDN allows you to cache information that changes infrequently. Azure CDN currently has servers in over 70 cities worldwide. The full list can be found here.

If your desired location isn’t listed, you can use the Verizon and Akamai networks. These servers are also very powerful and have oversized bandwidths to handle heavy workloads.

CDN works similarly to local caching in the DotNet Framework. It also works similarly to SharePoint On-prem and online internally. The principle lies in storing files in a specific way. So when a user needs a file, they can access it without using hard disk I/O. The advantage of Azure CDN and its network is that the information can be as close as possible to the end user. This reduces the time required to download it.

Azure CDN has the same role as traditional local caching to maintain:

the images,
style sheets,
the documents,
the files
frequently used client scripts (e.g. JavaScript).

Additionally, the CDN helps reduce the amount of information to be processed (for example, in SharePoint, by reducing the number of database requests).

Azure CDN and SharePoint

SharePoint has native cache available locally for both SharePoint Server on-premises and SharePoint 365 online. This helps reduce the load on farms. However, it also doesn’t decrease response time for users if the farm is very remote. This is the case, for example, if the SharePoint data center and the client are on different continents. And, while SharePoint 365 has its own CDN, Azure’s dedicated CDN has greater capacity. And it has a finely meshed network for optimal performance.

This is a comparison of file hosting using either the native SharePoint CDN or the Azure CDN. As you can see, the TTFB of the Azure CDN is significantly faster than that of the SharePoint CDN.

SPFx Bundle Download Performance for Azure CDN

The above picture was taken from Bob German’s blog.

The following example shows how to create a SharePoint SPFx web part for Office 365 SharePoint. This caches the stylesheets and JavaScript files used in the Azure CDN. Please note that this approach can also be used with on-premises SharePoint Server 2016/2019.

Example of using Azure CDN with an SPFx Web Part

Infrastructure

Create the Azure infrastructure:
- From your browser, launch the Azure Management Center. If you don’t have an account, you can create a 30-day test account.
- Create a resource group in Azure to contain a storage account and CDN profile.
- Add a storage account to the resource group with a name and location. The standard performance account will suffice. Use all other default properties:

Add a blob to storage. Click the Containers section of the storage account, then use the +Container button. Give it a name and select Blob (anonymous read access for blobs only).

You now need to create a CDN Endpoint. In the Storage Account Containers section, click Azure CDN. Then create a new endpoint by specifying
- his name,
- Pricing tier (Here you can select Microsoft, Akamai or Verizon networks depending on your geographic needs; the price is the same)
- the name of the endpoint.

When we have created the access point, it appears in the list of access points.

Click on the host name to access the properties window.

The connection between the SPFx web part and the CDN cache is made through the Origin hostname. When you run the web part, all the files you use are automatically copied to all Azure CDN servers. Global replication can take approximately 15 minutes. The Endpoint hostname is the CDN URL of the web part.

Create SPFx Web Part

Create the SPFx Web Part

Follow the instructions given by Microsoft to create a development environment for SPFx.

Configure the Web Part

Open the package-solution.json file in the SPFx solution’s config folder. Update the includeClientSideAssets property value to false. This prevents client-side assets from being packaged in the final sppkg file.

Open the deploy-azure-storage.json file in the config folder. Use the Azure storage account name for account. For container, use the container name in the storage account. And for accessKey, from the Storage Account window, click Keys and copy the first key found.

The .json file will look similar to the following image.

Open the write-manifests.json file in the config folder and for the cdnBasePath property, use the endpoint hostname (found earlier) plus the container name.

Deploy SPFx Web Part

Deploy the Web Part:

Create the assets needed for uploading to the CDN provider using the gulp bundle -ship command.
Upload the files to the Azure CDN using the gulp deploy-azure-storage command. After running the command, the files may be present in the Azure blob.

Package the solution using the gulp package-solution -ship command. The .sppkg file with the package is located in the sharepoint\solution directory
Upload the package file to the SharePoint app catalog. The package will point to the Azure CDN, as shown in the following image

Message shown when uploading file to Azure CDN

Install the web part on a page and open the Developer Tools browser. The file list shows the files uploaded to the Azure CDN and the sync statistics.

Wait times depend on the client’s location. The client’s distance from the Azure and Office 365 data centers also has an impact. In the example, the client and data centers are very close, so the difference is impossible to determine. If the client is far from the Office data center, Azure CDN will use a cache close to the client. And the differences will be greater.

Conclusion

Azure CDN is a global caching option that can be used to replace SharePoint’s native cache. Caching can reduce the download burden of minimally modified files like stylesheets.

Azure CDN is quite inexpensive and easy to set up and use as a tool. It’s also possible to configure other settings, such as caching by time and specific directories. Always keep in mind that files on a CDN are public and cannot be secured. Therefore, cached files should not contain sensitive information.