Azure Function Proxy

Proxies are simple yet powerful feature of Azure functions. it provides a way to intercept incoming HTTP traffic to an Azure function and control its flow based on an application’s need.

Pros - Proxies are helpful in many different ways,

• Call intercept – Enable intercepting incoming HTTP traffic to an azure function.
• Call routing – Route incoming HTTP calls to a different function either within same function app or to a completely different function app.
• Header manipulation – Manipulate HTTP header of an incoming request before routing to a different function. Similarly an azure function’s response can also be manipulated before reverting back to client.
• CORS - Its mandatory to enable CORS for function app to enable communication with sample todo app. Proxy removes this dependency completely as the call always considered to be within same domain.

Demo - Enough details let’s see it in action. I have created a Todo application with simple CRUD (add, read and delete only) operations. The source is available at 
https://github.com/SonuK21/AzFunctionProxy. The repository contains two folder,

1. TodoApi – An azure function with supported functionality.
2. TodoApp – A simple angular app to consume the api.

Publish Todo API – Lets publish the API by following below steps. I am using visual studio 2019.

• Open solution in visual studio and build
• Once the project is build then right click on project file and hit publish,
• 
• Create a new publish profile by providing all the necessary details like
• Name - Any unique name for your function app.
• Subscription - Your azure subscription to be used to publish the app.
• Resource group - A logical container for all resources related to the function app.
• Location - Any closest azure data center's location to host the app.
• Azure storage - A storage that will be used by azure to store your app files.
• Below screens show a step by step guide to create profile.
• 
• 
• 
• 
• 
• Your API is ready to serve, take the highlighted app URL from previous screen. If you try to request API for a list of todos then it should return an empty as there is no record as of now.
• 

Publish Todo Sample App - Lets publish the sample app so that we can integrate the todo API. I had already deployed the sample app in azure storage as I found it quickest way to host a static app on Azure. Please refer https://docs.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website for more details on hosting static websites in Azure storage. Once you are done then your sample app should be up and running on a different URL in azure like this,



Proxy - Now, we have two different service running in azure and each can be reached by their respective URLs only. Here comes the use case where proxy can be helpful. Lets try to understand the workflow and see that, how proxies could be helpful,

• Configure proxy in our function app.
• Intercept the incoming traffic targeting function app's root i.e. https://yourfunctionappname.azurewebsites.net/ and route this traffic to our sample app so that a UI can be presented.
• Remove CORS dependency
• User should be able to perform operations like add/read/delete todos directly by hitting the function app's URL

Configuring proxy - One easiest way is to configure proxies from azure portal directly. But if you want to understand each bit of it then proxies.json is the one and lets just try it,

• Add a proxies.json file in your azure function project.
• 
• Right click on file and update property copy to output directory and set to copy if newer.
• 
• We have added two proxies (You can add more depending on requirements),
• proxyHome - It will intercept all incoming calls to function app default URL i.e. https://yourfunctionappname.azurewebsites.net/ and redirect them to todo sample add index page.
• proxyContent - Similarly this will route all incoming calls to other content like CSS, JavaScript etc to /content directory within todo sample app.
• 
• Few points to notice,
• methods - An array of allowed HTTP verbs/methods supported by this proxy
• route - The URL route against which this proxy needs to be triggered. i.e. any incoming call to aforesaid URL will automatically be served by respective proxy.
• backendUrl - Any endpoint(Our sample app URL in this case) which will actually serve these requests.
• Its done. If you try to hit function app's URL now then it should open the sample todo app instead just like the screen below,
• 
• Notice the URL, its function app (API) not the sample todo page.

Thanks for reading.

Azure function bindings

Bindings provide a way to read/write data from/to different data services without any additional overhead of managing connection with these services. Today, we will see that how easy it is to integrate Azure functions with different services like blob, table storage, queue, cosmos, send grid etc with help of bindings.

Type of bindings –

1. Input binding – As the name implies, the binding is to get data into an Azure function from data service like blob, table storage, cosmos etc.
2. Output binding – The binding is to push/add data to different data service from an Azure function like blob, queue, send grid etc.

Demo – We will create a Todo API with following,

• An azure function with Add/List Api,
• Output binding - Data will be stored in a Table Storage.
• Output binding – We will write the data in a text file and store it in a blob storage.
• Input binding – Read data from table storage to display on UI.

·         I will be using a simple angular page to add/list todos but it could be a simple html page with some ajax or use any client like postman to hit the API directly.

I will be using Visual Studio but it is absolutely fine using any IDE like VS Code if want to follow along or refer my previous post getting started with azure functions

Creating API - Lets create the API first by following the steps below and then will move on to UI.

1. Setup new azure function project with an empty template as shown below,
• 
• 
2. Your solution should look like this,
• 
3. Add new azure function by following the steps below,
• 
• 
• 
4. Add required nuget package by running following command in package manager console,
• Install-Package Microsoft.Azure.WebJobs.Extensions.Storage
• 
5. Add new class Models.cs and add following,
• Todo POCO
• 
• TodoEntity to be used while working with storage table
• 
6. Add two endpoints CreateTodo/Todos in API to create and read data.
• Include all necessary namespaces
• 
• CreateTodo endpoint to create a new todo item
• 
• Todos endpoint to get all todos for be displayed
• 
7. Now hit the API by using an angular page or java script then It should give you an error like below,
• 
8. And this is because we are trying to access an API of different domain from our client App. Now allow cross domain communication by enabling CORS under host in local.settings.json like this,
• 
9. You should now have a working azure function with added input/output bindings.