Advanced Serverless Architectures with Microsoft Azure: Design complex serverless systems quickly with the scalability and benefits of Azure

Let's begin by first creating our Azure function. Create a new folder in your development area called ProductsApi. Open a command-line tool inside the folder and open Visual Studio Code by typing code . or clicking on the Visual Studio Code icon:

Figure 1.1: Empty Visual Studio Code screen

Click on the Azure logo, which will appear on the pane on the left if you've downloaded the Azure Functions extension. Then, click on the Sign in to Azure… button and authorize Visual Studio Code with your Azure subscription. Select your free subscription if asked:

Figure 1.2: Azure Functions Extension screen before signing in to Azure

Now that your environment is ready, click the folder icon with a small lightning bolt icon (see the previous screenshot) in the Azure Functions pane on the left to create a new Azure Functions project. A message will appear in the command palette at the top of the screen. Select your current folder:

Figure 1.3: Creating a new Azure Functions project

After this, you will be prompted to select a language for your project. Select C# :

Figure 1.4: Selecting C#

The Azure Functions extension will have scaffolded you a project with no real code—just a .csproj file to define the build process and host.json and local.settings.json files, as shown in the following screenshot:

Figure 1.5: Scaffolded Azure Function project

Open the Azure Functions extension again and click the lightning bolt with the small plus sign on it to add a function (see Figure 1.2). Select HttpTrigger when prompted for a function template:

Figure 1.6 Choosing the HttpTrigger template

Name the function GetProducts, as follows:

Figure 1.7 Naming the function

When prompted to set the namespace, set it to ProductsApi, as follows:

Figure 1.8 Setting the namespace

You will then be prompted to set AccessRights. Set it to Function:

Figure 1.9 Setting Access Rights

Once this is done, a function will be templated for you, as follows:

Figure 1.10 Templated function

When prompted, click Restore on the popup in the bottom right that states that some packages are missing. If you're not prompted, open a terminal window by clicking on the Terminal −> new Terminal button at the top of Visual Studio Code and typing dotnet restore in the ProductsApi folder:

Figure 1.11: Restoring packages in the inbuilt terminal

Click on the debug button (the bug with the cross through it, which is visible on the left pane of the window) and click on the green play button to start the debug session:

Figure 1.12: Running the local function

We have now started our Azure Function on our local machine, so let's test it. Visit the address shown in the terminal (by azure-functions-core-tools) in your browser, and try adding a query parameter for the name, like this: http://localhost:7071/api/GetUserData?name=Bob. The following screenshot shows the output obtained for this query:

Figure 1.13: Browser showing the output of the local Azure function

Let's get our function onto the cloud, where it belongs. Open the Azure Functions tab again and click the up arrow to upload this function to Azure (see Figure 1.2). Create a new Function App with a globally unique name (hence it cannot be specified here):

Figure 1.14: Choosing a Function App

The name that's used in this exercise is AdvancedServerlessProductsApi:

Figure 1.15 Creating a Function App

Figure 1.16: Choosing a resource group

When prompted to select a resource group, click on Create new resource group, as shown in the following screenshot:

The resource group that was created in this exercise is named productapi-rg:

Figure 1.17: Creating a new resource group

Next, click on Create new storage account when prompted:

Figure 1.18: Choosing a storage account

Enter the name of your storage account (the one used in this exercise is productapi):

Figure 1.19: Creating a new storage account

Next, choose your local Azure Region when prompted, as shown in the following screenshot:

Figure 1.20: Choosing an Azure Region

This may take a little while. You will see progress windows in the bottom right corner:

Figure 1.21: Successfully deployed Function App

Your Function App should now have appeared on the left, as shown in the following screenshot. If you expand the functions dropdown, you can find the function you have just deployed and right-click it to get the URL:

Figure 1.22: Deployed function viewed through Visual Studio Code extension

Try out your function by copying the URL into your browser:

Figure 1.23: Function running in the cloud

Open the Azure Portal and search for "cosmos." Click on the result that says Azure Cosmos DB:

Figure 1.24: Searching for Cosmos DB

You should see a screen like the following one, which has an Add button in the top left. Click Add:

Figure 1.25: Screen before creating an Azure Cosmos DB instance

On clicking Add, you will see a window like the one shown in the following screenshot. Fill in the Resource Group, the name you want your Cosmos DB instance to have (advancedserverlessproductdb is used as the Account Name in this exercise), and the region you want it to be in (Location). Select the SQL API. Given that this is a development book for learning, switch off Georedundancy:

Figure 1.26: Azure Cosmos DB setup – Basics

Click Review + create on the bottom of the screen and then click on the Create button. This will kick off the deployment of your Cosmos DB:

Figure 1.27: Summary of Azure Cosmos DB account

It's likely to take a little while. If you click on the notifications button (the bell icon) in the portal, you can check on how it is progressing:

Figure 1.28: Notification of progress when creating a Cosmos DB

First, you need files to host. Create a new folder called ServerlessWebsite in your development area and create new index.html and error.html files in there:

Figure 1.29: Empty website files

Create a simple page for both the index and error. The following code can be used to display Hello World!:

<html>
<body>
    <h1>Hello World!</h1>
</body>
</html>

The following example can be used to display Error:

Figure 1.30: Error page

Now that you've created the files to host, let's create an account on Azure Storage where you can host these files. Open the Azure Portal and search for "storage":

Figure 1.31: Searching for storage

Select Storage accounts. You should see a screen like the one shown in the following screenshot, with at least one storage account already existing from when you created it. You may see more if you have already been using Azure and have already made some storage accounts:

Figure 1.32: Azure Storage Accounts page

Click Add. You should be taken to a screen like the one shown in the following screenshot. Enter the same resource group that you did for Cosmos DB and the Azure Function App. Give your storage account an appropriate name for hosting a website (the one in this exercise is named webfrontendadvanceds). Choose a location near to you. Choose Standard performance, StorageV2, and simple Locally Redundant Storage or RA-GRS. In production, you will probably want a greater level of georedundancy, but for development purposes, locally redundant storage is fine. Premium performance is actually designed for virtual machine disks, not for web hosting, and is not currently supported with static site hosting. Finally, choose the Hot access tier; Cold is for archiving data:

Figure 1.33: Creating a storage account

Click the Review + create button and then create the storage account. This may take a little while to provision. You will receive a notification in the top right of the page when it has been created:

Figure 1.34: Creating a storage account

Now, you can host the files you created on your Azure Storage account. Go to the storage account you just created (it will appear on the pane on the left) and click on it:

Figure 1.35: Storage Account Home

Scroll down the left column and look for Static website (preview) under Settings. Enable it and set your Index document name to index.html and your Error document path to error.html, as shown in the following screenshot:

Figure 1.36: Setting up static website hosting

Click on the Azure tab. We are going to use the Azure Storage extension of Visual Studio Code to deploy the site. Click the Azure Storage account and open the Blob Containers sub-item until you get to the $web item. Right-click it and select Deploy to Static Website:

Figure 1.37: Deploy to Static Website

You will now be prompted to select a folder to deploy. Select the ServerlessWebsite folder:

Figure 1.38: Selecting a folder to deploy

Click Delete and Deploy if the following message comes up. It won't if you have never deployed anything to this Azure Storage account before:

Figure 1.39: Confirming deployment

As before, updates on the deployment will appear in the bottom right:

Figure 1.40: Deployment updates

You can finally test your website by visiting the address of your Azure Blob Storage account in your browser. This can be found by clicking on the browse site button in the successful deployment update, going back to the static website part of the portal, or by using the pattern they all follow: https://{StorageAccountName}.z6.web.core.windows.net:

Figure 1.41: Serverless website hosted on Azure Storage

First of all, you need some product data to display. Go to the Cosmos DB instance in the Azure Portal and select Data Explorer:

Figure 1.42: Cosmos DB Data Explorer

Click on the New Database option to create a database. Call it serverless and click on OK:

Figure 1.43: Creating a database

Next, click on the New Collection option and create a collection called products in the serverless database that we created in the preceding step. Set its throughput to 400 Resource Units (this is how Cosmos DB charges for compute usage on queries) and set the Partition key to /colour. Again, click on OK:

Figure 1.44: Creating a collection

Click on Documents inside the Collection, as shown in the following screenshot:

Figure 1.45: Selecting Documents inside the collection

Click on the New Document option. Insert some records into the Cosmos DB, which will represent products. An example is shown in the following code. Make sure that you do not remove or misspell any of the property names as it will cause problems later. The ID follows the pattern {typeId}_{name}_{colour}_{size}. Cosmos DB will add some fields, including a very useful Etag, which will be used later. In general, you don't need to worry about the automatically added fields; Cosmos DB will handle them:

{
    "id":"tshirt_metallica_black_xl",
    "typeId": "tshirt",
    "name": "Metallica",
    "colour": "black",
    "size": "xl",
    "quantityInStock": 100
}

Figure 1.46: Creating a Cosmos DB record

You have now added your product data to Cosmos DB. Now, you need to display this data on your website using the Azure function we created previously.

Open the GetProducts Azure Function from Exercise 1, Creating an Azure Function. Install the DocumentDB package by opening the terminal in the ProductsApi folder and entering the following command:

dotnet add package Microsoft.Azure.WebJobs.Extensions.CosmosDB --version 3.0.1

Next, we need to ensure that all the NuGet packages are installed, which we do by "restoring". Use the following command:

dotnet restore

Your file will look as follows:

Figure 1.47: Installing the DocumentDB extension

We need to give our function the ability to read from the Cosmos DB. This is done using a DocumentClient object from the SDK. Add a using statement for Microsoft.Azure.Documents.Client and create a private static DocumentClient property called client:

private static DocumentClient client = new DocumentClient(new Uri("cosmos endpoint"),"key");

Figure 1.48: Added DocumentClient

Next, we need the Unique Resource Identifier (URI) for the Collection inside the Cosmos DB instance. This will allow us to create queries against that collection. Create a private static Uri property that uses the UriFactory to create a URI for the DocumentCollection:

private static Uri productCollectionUri = UriFactory.CreateDocumentCollectionUri("serverless","products");

Your file will look as follows:

Figure 1.49: Adding productCollectionUri

Add a private static QueryOptions property with the MaxItemCount set to –1. This sets the number of docs returned in a query to infinite, which is something to be cautious of as your database scales:

private static readonly FeedOptions productQueryOptions = new FeedOptions { MaxItemCount = -1 };

Figure 1.50: Adding productQueryOptions

Now, we need to return the products from Cosmos DB. We don't need the post method anymore, so delete post from the function signature. Change the return type to Task<List<Product>>. The Cosmos DB SDK uses an Iqueryable syntax that lets you use LINQ expressions in C# to generate queries on the database. This is superb for simple queries, but it is advisable to double-check what database queries it is generating for complex queries as they may not be optimally efficient. We will use the syntax to simply return all. Delete the entire function body and replace it with this:

return client.CreateDocumentQuery<Product>(productCollectionUri, productQueryOptions).ToList();

Also, add the following using statement:

using System.Linq;

Figure 1.51: Adding query returning products

Add a Product class in a file called Product.cs in a folder called Models with properties matching the ones in the Cosmos DB. Add a JsonProperty annotation on the ID property to force it into lower case:

Figure 1.52: Product Model

Add the following three using statements to the GetProducts function:

using System.Collections.Generic; using ProductsApi.Models;

Now, go to Cosmos DB in the Azure Portal and click on Keys. Retrieve the endpoint and the primary key and enter them into the DocumentClient. This is vital to authorize your function to connect to your Cosmos DB.

Test the function by pressing the play button on the debug tab and going to the address in your browser. You should see an output similar to the following when testing:

Figure 1.53: Testing the function

Open the ServerlessWebsite folder in VS Code. Add a table to the index.html file using the following code:

<table>
    <thead>
        <tr>
            <th>
                Name
            </th>
            <th>
                Size
            </th>
            <th>
                Colour
            </th>
            <th>
                Quantity In Stock
            </th>
        </tr>
    </thead>
    <tbody id='tableBody'>
    </tbody>
</table>

Figure 1.54: HTML Table

Add a function that takes the object from the API and returns a table row by using the following code:

<script>
    function rowOfDataFromObject(data){
        let row = document.createElement('tr');

        let nameTableElement = document.createElement('td');
        nameTableElement.appendChild(document.createTextNode(data.name));
        row.appendChild(nameTableElement);

        let sizeTableElement = document.createElement('td');
        sizeTableElement.appendChild(document.createTextNode(data.size));
        row.appendChild(sizeTableElement);

        let colourTableElement = document.createElement('td');
        colourTableElement.appendChild(document.createTextNode(data.colour));
        row.appendChild(colourTableElement);

        let quantityTableElement = document.createElement('td');
        quantityTableElement.appendChild(document.createTextNode(data.quantityInStock));
        row.appendChild(quantityTableElement);

        return row;
    }
</script>

Figure 1.55: Function that returns a table row from a product object

Add a HTTP GET call to the Azure function either by running locally or in the cloud using the fetch method, and turn it into a table row using the JavaScript method you just created (in the following screenshot, the function being called is one that would be running locally as the address in the fetch method is a localhost address):

Figure 1.56: Fetching product data from the Azure function

Append the rows to the table using the ID set in the HTML and the table rows created by the method:

document.getElementById("tableBody").appendChild(productRow);

Figure 1.57: Appending rows to table

Cross Origin Resource Sharing (CORS) is an important security measure that applies to Azure functions as well. It prevents scripts from unexpected websites calling your Azure Function. For the moment, though, this prevents us from testing effectively, so we are going to open it up to all. In production, you would give it only the addresses you expect, so this would be the URL of your website, for example. Open the ProductsApi folder and add a local.settings.json file if it isn't already there. Modify it to add an element called Host with a property called CORS with the value *:

Figure 1.58: Setting CORS rules to permissive

Finally, test your HTML page by opening it from your local disk or uploading it to Azure Storage and opening in your browser:

Figure 1.59: Working web page displaying products

Create a collection called users in the Cosmos DB database named serverless.

Add some user data to it. The example object just uses name and email address:

{
    "name": "Daniel",
    "emailAddress": "no@email.com"
}

Create an Azure function called GetUsers that reads from the users collection.

Create an index.html file that displays that data on a web page by using JavaScript to call the Azure function:

Figure 1.60: Resulting User Table