How to Deploy an Angular Application in Azure:Azure Front Door and CDN

1.Azure Front Door

It enables to define, manage, and monitor the global routing for the web traffic by optimizing for best performance and quick global fail-over for high availability. With Front Door, we can transform our global (multi-region) consumer and enterprise applications into robust, high-performance personalized modern applications, APIs, and content that reaches a global audience with Azure.

And, It works at HTTP/HTTPS layer and uses any-cast protocol with split TCP and Microsoft’s global network for improving global connectivity. So, per the routing method selection in the configuration, we can ensure that Front Door is routing our client requests to the fastest and most available application back-end. An application back-end is any Internet-facing service hosted inside or outside of Azure. Front Door provides a range of traffic-routing methods and back-end health monitoring options to suit different application needs and automatic fail-over models. Similar to Traffic Manager, Front Door is resilient to failures, including the failure of an entire Azure region.

so lets see how to set up Azure front door for our application….

As usual go to the Azure portal and click on Front Doors or search for Azure Front doors. Select Front Door and click Add.

Then ,Select resource group under the basics.

then click configuration.

on this part we need fill this three sections in the configuration.

  • Front-end/domains- We should provide front door URL to access the front door.In here you have to create front-end which is end point to your back-end application.
  • Back-end pools- Resources locations should be mentioned here. It can be either web apps,Cloud service, Storage, etc.
  • Routing rules- We should set the rule to bind front-end URL with back-end URL with configurable manner.

ok now we’ll see step by step.

  1. Front-end/domains

Provide the host name then If we need firewall and session Affinity we can enable those things. Then click Add.

2. Back-end pools

on this we need to provide name for our back-end then, If we click Add a back-end we can add back-end to Front Door. In my case i have only one back-end end point to connect.

then click add..

3. Routing rules

on this section we need Select the Route Type as Redirect. Replace the destination host with our back-end host name and destination path with our api path.Click on review and create. that’s it

Now we have created our Front Door successfully.

let move to the our next topic that is Azure CDN

2.Azure CDN

Content Delivery Network (CDN) is a distributed computing model designed for developers to stream high-bandwidth files faster,reliably and efficiently to worldwide users. Azure CDN is usually used for delivering static content like Videos, Images, Style sheets, files ,documents , Client-side scripts and HTML pages to users using servers that are closest to the users. CDNs store cached content on edge servers in point-of-presence (POP) locations that are close to end users, to reduce the latency.

For the first time the subscription may not allowed to create CDN. So first need to check the subscription with registered resource providers in the settings section. We can filter it typing just CDN and check weather its register or unregistered in the list. If cdn is not in the registered list click on register to register CDN. First we need to create an end point. While creating resource or after create CDN you can create endpoint. This endpoint is used to access the web content. After creating endpoint we should add origin details.

We can add origin on your own preference. We can use custom origin to connect Azure Front-door URL.

that’s it… let’s see you in next topic… Next i’ll discussed about “Azure Functions with Azure Storage.”

--

--

--

Final year Software Engineering Student at University of Kelaniya.

Love podcasts or audiobooks? Learn on the go with our new app.

Navian — Multi-Purpose Responsive WordPress Theme

Beginners Guide: Getting Started With ECMAScript — Part 1

JavaScript Journey

Display Hidden / Shadow DOM in Firefox Mozilla

Sometimes, JavaScript is not the Right Answer

How to solve Material UI error: findDOMNode is deprecated in StrictMode?

How to connect streams with pipeline?

Error handling with Remix

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sharmila Pararajasingam

Sharmila Pararajasingam

Final year Software Engineering Student at University of Kelaniya.

More from Medium

Loading KeyVault secrets and AppSettings in to application configuration in Azure Function Apps

How to Recover/Restore a deleted Azure Git Repository?

Hosting static websites in Azure Storage

Create approvals on build and release Azure DevOps pipelines