Azure Content Delivery Network is a reliable and fast service for sending audio, images, and videos all over the world. The reliability of the service depends on the servers present around the globe that send content to the nearest node of the relevant user. This process ensures higher speed and better availability along with good user experience. Unlike the past few years, direct integration of CDN has become possible with Azure websites. Here is a simple procedure for the integration.
1. Create a Website in the Portal
Creation of the website in the portal is the first step of integration. Open Azure Management Portal and get logged in. Here you will find a +New icon that resides at the left bottom of the dashboard. Click the icon and choose Compute – Website – Quick Create option. Add a unique name to the URL to avoid copying another name and click the Create Website button to complete the first step.
2. Create a CDN
To create an associated CDN, you repeat the first two steps of the previous process where you click the +New icon and select App Service – CDN – Quick Create. Choose Subscription option in the drop-down menu and choose the Origin Domain. Find the Web Sites category and your associated URL. Finish the process by clicking the Create option.
You will find the CDN tab as shown in the figure below:
The Content Delivery Network can take up to 60 minutes to propagate, so you may receive a status code 400 (Bad Request) or 404 (Not Found) until it comes online.
3. Update Website Contents to Fetch from CDN
A simple webpage is necessary for this task so you can host your site. Follow the file structure mentioned below:
Check the code for the index.html file:
The image is loaded by the website page twice, i.e. one for CDN and other for the web server. CDN URL is used to access the cached content which you can find in the web portal:
CDN is auto-configured with the website and you need to replace the site-relevant URL with Content Delivery Network relevant URL if you want to access static data. See example:
CDN relevant:
Now publish your website and if everything is done properly you should see both images:
4. Chech The Results
The difference comes in the load time of the images as CDN image takes less time than web-hosted image. Open your browser and capture the network traffic with the browser’s tools. Refresh the page to check results:
You will see the CDN-hosted image as shown below:
For more information on customizing and working with your Content Delivery Network, see the documentation here.
