Articles → MICROSOFT AZURE → Front Door And CDN Profile In Azure

Front Door And CDN Profile In Azure

In this article, we will discuss Front door and CDN profile in Azure.

Purpose

In a real-world scenario, an end user requests the resources (image, video etc.) from the server. The server responds to the end user by sending them the requested resource.

Picture showing the real-world scenario in which request and response is sent between the server and end user

Click to Enlarge

So, there is only one server that caters to the needs of the end user. This is fine as long as the count is small. But as the number of users increases, the server performance may impact.

To address the above issue, CDN comes into the picture. A CDN is the distributed network of servers that stores the cached resources on the server (called edge server) close to the end user location to reduce latency.

The CDN works in the following manner: -

An end-user requests a resource
The resource is searched on the edge server
If the resource is found then send the resource to the end-user
If the resource is not found then get the resource from the origin server and send it to the end-user. Along with that, the resource is also stored on the edge-server as cached copy for future demands

Steps

For implementing the front door and CDN, we will work on the following steps: -

Create a web app in Azure
Create a web application using visual studio and publish it on Azure web app
Create a front door and CDN
Create a Frontend/domains
Create a Backend pool
Create a Routing rules
Output

So, let’s get started.

Create A Web App In Azure

First, create a web app in Azure.

Create A Web Application Using Visual Studio And Publish It On Azure Web App

Second step is to create an ASP.Net web application and publish it on Azure using the visual studio.

Create A Front Door And CDN

Next step is to create a front door and CDN. For that, click on the "Floor Door and CDN Profiles" in the search box.

Picture showing searching the Floor Door and CDN Profiles service in Azure portal

Click to Enlarge

The "Floor Door and CDN Profiles" screen will appear. Click on the "+ Create" button.

Picture showing the Floor Door and CDN Profiles page

Click to Enlarge

The "Compare Offering" screen will appear. Select the option "Explore other options" and choose "Azure Front Door (Classic)". Click on the "Continue" button.

Picture showing a page to compare different offerings provided by Floor Door and CDN Profiles

Click to Enlarge

In the "Create a Front Door" screen, select the "Resource group" and click on the "Next : Configuration >" button.

Picture showing the create a front door screen

Click to Enlarge

The "Configuration tab screen will appear. In the screen, we will work on the following steps: -

Create a Frontend/domains
Create a Backend pool
Create a Routing rules

Let us discuss each step.

Create A Frontend/Domains

In the "Configuration" tab, click on the plus icon in the "Frontends/domains" section.

Picture showing the configuration tab while creating the front door

Click to Enlarge

A docked window will appear on the right-hand side. Enter the "Host name" and click on the "Add" button.

Picture showing the Add a frontend host window

Click to Enlarge

Create A Backend Pool

Click on the plus icon of the "Backend pools" section. Another docked window will appear on the right-hand side. Enter the "Name" and click on the "Add a backend" link.

Picture showing the Add a backend pool window

Click to Enlarge

Another window will appear. Select the following values.

Field	Value
Backend host type	App service
Backend host name	< web app created in previous section >
Status	Enabled

Click on the "Add" button.

Picture showing the screen to add the backend

Click to Enlarge

The backend pool is added.

Picture showing the backend added in the backend pool

Click to Enlarge

Click on the "Add" button to add the backend pool.

Create A Routing Rules

For adding the "Routing rules", click on the plus button on the "Routing rules" section. A docked window will appear on the right-hand side. Enter the following values: -

Field	Value
Name	< You can give any name >
Accepted protocol	HTTP and HTTPS
Frontends/domains	< Frontends/domains created in previous section >

Picture showing a screen for adding the rule

Click to Enlarge

In the "PATTERNS TO MATCH" section, add the path "/".

Picture showing the rule screen for setting the patterns to match

Click to Enlarge

All the sections are configured.

Picture showing the configure tab after all configurations are done

Click to Enlarge

Output

Once all the sections are configured, click on the "Review + Create" button. The review screen will appear.

Picture showing the screen to review the front door information

Click to Enlarge

Click on the "Create" button to complete the creation. Now, browse the CDN URL and you can see the web app deployed in the previous section.

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Wednesday, June 29, 2022

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**