(
Updated 2018-02-08)
Recently, I did few presentations about Azure functions. The reaction was always very positive and attendees leave with tons of ideas of projects in their heads. In this post, I would like to add few interesting features that I didn't have the time to talk about.
You prefer to watch a video instead of reading? No problem, skip at the end at the Explain in a Video of this post immediately.
Let's get started
From the Azure Portal (portal.azure.com) select an Azure Function domain, or create a new one. Then we need to create a Function App that we will be use as our backend. Click on the "+" sign at the side of Function. In this post, we will be using the
HttpTrigger-CSharp template, but other template will work too. Once you select the template you will be able to enter the name and select the
Authorization level. This last choice will affect how your function could be accessed. For exemple, if you select
Anonymous then you function will be accessible to everyone directly using the url:
https://notesfunctions.azurewebsites.net/api/SecretFunction, where 'notesfunctions' is my function domain name. But if you select
Function or
Admin level, then you will need to pass a Function Key or Master Key (ex:
https://notesfunctions.azurewebsites.net/api/SecretFunction?code=I4BN6NjaZBmPNqebqnX8pQAPZwe1TI/O4TCbvB1aaaaao7uRO5yyw==). For this post let's use the Function level. When ready click the Create button.
Using Postman, your favorite HTTP tool, or even the function Test section (located on the right side of the editor in the Function blade), you can now test your Function. To be able to test our function, we need to know the URL. To get the URL of your functions, once you function is selected (when you see the code), click on
</> Get function URL on the top of the screen.
Note that the querystring as a parameter named
code that is receiving our function key. When this parameter is not present, you will receive an HTTP 401 Unauthorized message. The function generated by the template also expects a value 'Name' that could be passed by the querystring or by a json file with a property
Name in the http request body.
Azure Functions Proxies
Functions Proxies are currently in preview. With them, any function app can now define an endpoint that serves as a reverse proxy to another [API / webhook / function App / anything else].
Before being able to create new Azure Functions Proxies, you need to enable them. From the Function blade, select the
Settings tab on the top of the screen, then click the
On button, under the Proxie section.
Now let's create our first Function Proxy. Click on the "+" on the right of
Proxies (Preview). Enter the following values.
In the
Backend URL note as
%Host_Name% is used in the URL; this is NOT an environment variable. In fact surrounding a key with
% is a very useful tool from the Azure Function that gives us the ability to read directly in the Application settings.
To get to the Application settings, select the Function Application domain (the root node), then the tab Platform features from the top of the screen. In the image above, Point
A shows on to access the Application settings, and Point
B shows how to access the
App Service Editor that will use later in this post.
If it's not already done, add a new key-value in Application setting:
Host_Name with his value. Then from Postman, call this new proxy function. Note that now you don't need to pass the key since this part is done under the hood by the proxy.
Do more with your Proxies
Okay, now that we have a proxy up and running, let's switch to the
App Service Editor to do more "advanced" stuff (the Editor is available throuth the
Platform features tab). Once you are in the editor select the file
proxies.json to open it.
As you can see we only have one proxy defined. Let's duplicate our proxy. Rename the copy "Override", and change the route value for
override too. If you test this new proxy, it will work just as the other one. Let's change that a little, under the property
backendUri add a new node called: responseOverrides. It is possible with proxies to edit the HTTP properties. To change the
Content-Type to text instead of json add
"response.headers.Content-Type": "text/plain" inside our new node responseOverrides (be aware, it's case sensitive). Test again Override and you will constate that the content indeed has changed.
Continuing that way you count use Azure Function Proxies as mock. For example, replace the
backendUri property and override the response body to return a fix value, and voila! You built yourself a great mock-up! This is very useful! To illustrate this, add a new proxy using this code:
"Fake": {
"matchCondition": {
"route": "fake"
},
"responseOverrides": {
"response.headers.Content-Type": "text/plain",
"response.body": "Hello from Azure"
}
}
If you call this last proxy, no backend will be called, but the HTTP call is working.
Static WebSite
Everybody knows that Azure storage is very inexpensive. Would it be wonderful if we could put a static website in that storage? Of course, you can do it, I mean as long as the URL was complete. However, who type the URL completely with the file and file extention (ex: http://www.frankysnotes.com/index.html)? Well now with Azure Function Proxy, we could fix that! Add another proxy to the proxies.json file using this code:
"StaticNotes": {
"matchCondition": {
"methods": [
"GET"
],
"route": "/"
},
"backendUri": "https://%blob_url%/dev/index.html"
}
This new proxy will "redirect" all root HTTP GET calls to our index.html file waiting in our Azure Blob storage. For a more professional look, you just need to add a custom domain name to your Function, and you got the perfect super-light low-cost website for your promotion campaign, or event.
Explain in a Video
References:
- Postman : getpostman.com
- App Service Editor: https://{function domain name}.scm.azurewebsites.net (ex: https://notesfunctions.scm.azurewebsites.net)
![favicon[1]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6GZyigkQ1-omnsd_7VU8rVHC06KmnrSL9usjVHw-IA5HY2h1uE-YNFyBFSOm9g1vorcZkmjsXCRMd5M_C2eWLaiJGXaO0R2ibB7E4y9RcDQG07o3FGUV9JBijAAIV4yeshGzQSQ2pUGM/?imgmax=800 "favicon[1]")
