Azure App Function, Azure CDN & FrontDoor

In this article first we will see about Azure app function.

Azure App Function

The service accepts a variety of programming languages like C#, F#, Node.js, Python, PHP or Java. You can utilize the programming model for a number of activities such as building HTTP-based API, communicating with other servers or orchestrating complex workflows.

We will be using Azure Cli to create and deploy the Azure App Function.

inside an empty directory run the following command to generate the Functions project from a Maven archetype.

mvn archetype:generate -DarchetypeGroupId=com.microsoft.azure -DarchetypeArtifactId=azure-functions-archetype

Add the following configuration properties to create the Azure Function.

• groupId : A unique identifier for the project. eg : com.karshan
• artifactId : eg : details-function
• version : Project version. Keep the default.
• package : Package name. Keep the default

So now the Azure Function is created in the directory so next we will go and edit the code.You can check my Azure Function in my Github repository under the details-functions directory. Link

I will just return a welcome message, Later we will add some more configurations to integrate with a queue.

You can test your Azure function locally. So it will listen on http://localhost:7071

mvn clean package  
mvn azure-functions:run

Now we will deploy this function to Azure.

So first clean and build the project

mvn clean package

After successfully build you can run this command to deploy

mvn azure-functions:deploy

After successfully deployed you would get a success message like this.

We have deployed the function in Azure. So we can see the service in the Azure portal.

Azure CDN

Content Delivery Network (CDN) can be identified as an Infrastructure as a Service (IaaS) solution which provides all distributed cache infrastructure globally to enhance software operation. The main thing is managing cached content and provide point-of-presence (POP) locations that are close to end users, to minimize latency.

In my project I connect my front-door link to CDN as custom origin.

First you have to create end point. When creating resource or after create CDN you can create endpoint. This endpoint is used to access web content. After creating endpoint you should add origin details.

Adding Origin is your own choice.In the project I used custom origin to connect Azure Frontdoor URL.

Azure FrontDoor

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

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

If deployment finished App server. We are ready to establish Front Door.As usual go to portal, select Front Door and click Add.

Select resource group click next configuration.

My next aIn first left box Frontends/domains you need to create frontend which is end point to you backend application which Angular uses to access Backend service. If you click plus button in the box top right corner you will get a window in left to add your Front Door host.

In the host name fill the host name for your backend in you wish. If you need firewall for your backend you can enable if you need. Then click Add.
Adding Backend pool. We can add pool(group) of backends for Frontend to connect when you click plus button in backend pool box you will get a window to add backends and initialize pool name.

You can create routing rule. I had created Front Door and Added a backend pool with my backend service.

Now select the Route Type Redirect. Replace destination host with employee-service host name and destination path with api path

That’s it review and create. we had created our Front Door.

We can now use Frontend url in my case emsfrontdoor.azurefd.net as endpoint for Angular application we had deployed earlier.

You can also update the Front Door with routing rules and backend pool in portal. Now my end point to the backend is emsfrontdoor.azurefd.ner/api/employees.That’s with Front Door.

My next article Front End Application Deployment & Authenticate the Front End with Azure Active Directory.

References:

Create a function in Azure that responds to HTTP requests

Quickstart - Create an Azure CDN profile and endpoint