Tutorial Step 2: Automate resizing uploaded images using Event Grid

Azure Event Grid is an eventing service for the cloud. Event Grid enables you to create subscriptions to events raised by Azure services or third-party resources.

This tutorial extends the Upload image data in the cloud with Azure Storage tutorial to add serverless automatic thumbnail generation using Azure Event Grid and Azure Functions. Event Grid enables Azure Functions to respond to Azure Blob storage events and generate thumbnails of uploaded images. An event subscription is created against the Blob storage create event. When a blob is added to a specific Blob storage container, a function endpoint is called. Data passed to the function binding from Event Grid is used to access the blob and generate the thumbnail image.

You use the Azure CLI and the Azure portal to add the resizing functionality to an existing image upload app.

.NET v12 SDK

Node.js v10 SDK

In this tutorial, you learn how to:

• Create an Azure Storage account
• Deploy serverless code using Azure Functions
• Create a Blob storage event subscription in Event Grid

Prerequisites

Note

We recommend that you use the Azure Az PowerShell module to interact with Azure. See Install Azure PowerShell to get started. To learn how to migrate to the Az PowerShell module, see Migrate Azure PowerShell from AzureRM to Az.

To complete this tutorial:

• You need an Azure subscription. This tutorial doesn't work with the free subscription.
• You must have completed the previous Blob storage tutorial: Upload image data in the cloud with Azure Storage.

Create an Azure Storage account

Azure Functions requires a general storage account. In addition to the Blob storage account you created in the previous tutorial, create a separate general storage account in the resource group. Storage account names must be between 3 and 24 characters in length and may contain numbers and lowercase letters only.

Set variables to hold the name of the resource group that you created in the previous tutorial, the location for resources to be created, and the name of the new storage account that Azure Functions requires. Then, create the storage account for the Azure function.

PowerShell

Use the New-AzStorageAccount command.

1. Specify a name for the resource group.

   $resourceGroupName="myResourceGroup"
   

2. Specify the location for the storage account.

   $location="eastus"    
   

3. Specify the name of the storage account to be used by the function.

   $functionstorage="<name of the storage account to be used by the function>"    
   

4. Create a storage account.

   New-AzStorageAccount -ResourceGroupName $resourceGroupName -AccountName $functionstorage -Location $location -SkuName Standard_LRS -Kind StorageV2        
   

Azure CLI

Use the az storage account create command.

Note

Use the following commands in the Bash shell of the Cloud Shell. Use the drop-drown list at the top-left corner of the Cloud Shell to switch to Bash shell if needed.

1. Specify a name for the resource group.

   resourceGroupName="myResourceGroup"    
   

2. Specify the location for the storage account.

   location="eastus"
   

3. Specify the name of the storage account to be used by the function.

   functionstorage="<name of the storage account to be used by the function>"
   

4. Create a storage account.

   az storage account create --name $functionstorage --location $location --resource-group $resourceGroupName --sku Standard_LRS --kind StorageV2
   

Create a function app

You must have a function app to host the execution of your function. The function app provides an environment for serverless execution of your function code.

In the following command, provide your own unique function app name. The function app name is used as the default DNS domain for the function app, and so the name needs to be unique across all apps in Azure.

Specify a name for the function app that's to be created, then create the Azure function.

PowerShell

Create a function app by using the New-AzFunctionApp command.

1. Specify a name for the function app.

   $functionapp="<name of the function app>"    
   

2. Create a function app.

   New-AzFunctionApp -Location $location -Name $functionapp -ResourceGroupName $resourceGroupName -Runtime PowerShell -StorageAccountName $functionstorage    
   

Azure CLI

Create a function app by using the az functionapp create command.

1. Specify a name for the function app.

   functionapp="<name of the function app>"
   

2. Create a function app.

   az functionapp create --name $functionapp --storage-account $functionstorage --resource-group $resourceGroupName --consumption-plan-location $location --functions-version 3    
   

Now configure the function app to connect to the Blob storage account you created in the previous tutorial.

Configure the function app

The function needs credentials for the Blob storage account, which are added to the application settings of the function app using either the az functionapp config appsettings set or Update-AzFunctionAppSetting command.

.NET v12 SDK

storageConnectionString=$(az storage account show-connection-string --resource-group $resourceGroupName --name $blobStorageAccount --query connectionString --output tsv)

az functionapp config appsettings set --name $functionapp --resource-group $resourceGroupName --settings AzureWebJobsStorage=$storageConnectionString THUMBNAIL_CONTAINER_NAME=thumbnails THUMBNAIL_WIDTH=100 FUNCTIONS_EXTENSION_VERSION=~2 FUNCTIONS_WORKER_RUNTIME=dotnet

$storageConnectionString=$(az storage account show-connection-string --resource-group $resourceGroupName --name $blobStorageAccount --query connectionString --output tsv)

Update-AzFunctionAppSetting -Name $functionapp -ResourceGroupName $resourceGroupName -AppSetting @{AzureWebJobsStorage=$storageConnectionString; THUMBNAIL_CONTAINER_NAME=thumbnails; THUMBNAIL_WIDTH=100 FUNCTIONS_EXTENSION_VERSION=~2; 'FUNCTIONS_WORKER_RUNTIME'='dotnet'}

Node.js v10 SDK

blobStorageAccountKey=$(az storage account keys list -g $resourceGroupName -n $blobStorageAccount --query [0].value --output tsv)

storageConnectionString=$(az storage account show-connection-string --resource-group $resourceGroupName --name $blobStorageAccount --query connectionString --output tsv)

az functionapp config appsettings set --name $functionapp --resource-group $resourceGroupName --settings FUNCTIONS_EXTENSION_VERSION=~2 BLOB_CONTAINER_NAME=thumbnails AZURE_STORAGE_ACCOUNT_NAME=$blobStorageAccount AZURE_STORAGE_ACCOUNT_ACCESS_KEY=$blobStorageAccountKey AZURE_STORAGE_CONNECTION_STRING=$storageConnectionString FUNCTIONS_WORKER_RUNTIME=node WEBSITE_NODE_DEFAULT_VERSION=~10

The FUNCTIONS_EXTENSION_VERSION=~2 setting makes the function app run on version 2.x of the Azure Functions runtime.

You can now deploy a function code project to this function app.

Deploy the function code

.NET v12 SDK

The sample C# resize function is available on GitHub. Deploy this code project to the function app by using the az functionapp deployment source config command.

az functionapp deployment source config --name $functionapp --resource-group $resourceGroupName --branch master --manual-integration --repo-url https://github.com/Azure-Samples/function-image-upload-resize

Node.js v10 SDK

The sample Node.js resize function is available on GitHub. Deploy this Functions code project to the function app by using the az functionapp deployment source config command.

az functionapp deployment source config --name $functionapp \
  --resource-group $resourceGroupName --branch master --manual-integration \
  --repo-url https://github.com/Azure-Samples/storage-blob-resize-function-node

The image resize function is triggered by HTTP requests sent to it from the Event Grid service. You tell Event Grid that you want to get these notifications at your function's URL by creating an event subscription. For this tutorial, you subscribe to blob-created events.

The data passed to the function from the Event Grid notification includes the URL of the blob. That URL is in turn passed to the input binding to obtain the uploaded image from Blob storage. The function generates a thumbnail image and writes the resulting stream to a separate container in Blob storage.

This project uses EventGridTrigger for the trigger type. Using the Event Grid trigger is recommended over generic HTTP triggers. Event Grid automatically validates Event Grid Function triggers. With generic HTTP triggers, you must implement the validation response.

.NET v12 SDK

To learn more about this function, see the function.json and run.csx files.

Node.js v10 SDK

To learn more about this function, see the function.json and index.js files.

The function project code is deployed directly from the public sample repository. To learn more about deployment options for Azure Functions, see Continuous deployment for Azure Functions.

Create an event subscription

An event subscription indicates which provider-generated events you want sent to a specific endpoint. In this case, the endpoint is exposed by your function. Use the following steps to create an event subscription that sends notifications to your function in the Azure portal:

1. In the Azure portal, at the top of the page search for and select Function App and choose the function app that you created. Select Functions and choose the Thumbnail function.

   

2. Select select Integration then choose the Event Grid Trigger and select Create Event Grid subscription.

   

3. Use the event subscription settings as specified in the table.

   

   Setting	Suggested value	Description
   Name	imageresizersub	Name that identifies your new event subscription.
   Topic type	Storage accounts	Choose the Storage account event provider.
   Subscription	Your Azure subscription	By default, your current Azure subscription is selected.
   Resource group	myResourceGroup	Select Use existing and choose the resource group you have been using in this tutorial.
   Resource	Your Blob storage account	Choose the Blob storage account you created.
   System Topic Name	imagestoragesystopic	Specify a name for the system topic. To learn about system topics, see System topics overview.
   Event types	Blob created	Uncheck all types other than Blob created. Only event types of Microsoft.Storage.BlobCreated are passed to the function.
   Endpoint type	autogenerated	Pre-defined as Azure Function.
   Endpoint	autogenerated	Name of the function. In this case, it's Thumbnail.

4. Switch to the Filters tab, and do the following actions:

   1. Select Enable subject filtering option.

   2. For Subject begins with, enter the following value: /blobServices/default/containers/images/.

      

5. Select Create to add the event subscription to create an event subscription that triggers the Thumbnail function when a blob is added to the images container. The function resizes the images and adds them to the thumbnails container.

Now that the backend services are configured, you test the image resize functionality in the sample web app.

Test the sample app

To test image resizing in the web app, browse to the URL of your published app. The default URL of the web app is https://<web_app>.azurewebsites.net.

.NET v12 SDK

Click the Upload photos region to select and upload a file. You can also drag a photo to this region.

Notice that after the uploaded image disappears, a copy of the uploaded image is displayed in the Generated Thumbnails carousel. This image was resized by the function, added to the thumbnails container, and downloaded by the web client.

Node.js v10 SDK

Click Choose File to select a file, then click Upload Image. When the upload is successful, the browser navigates to a success page. Click the link to return to the home page. A copy of the uploaded image is displayed in the Generated Thumbnails area. (If the image doesn't appear at first, try reloading the page.) This image was resized by the function, added to the thumbnails container, and downloaded by the web client.

Next steps

In this tutorial, you learned how to:

• Create a general Azure Storage account
• Deploy serverless code using Azure Functions
• Create a Blob storage event subscription in Event Grid

Advance to part three of the Storage tutorial series to learn how to secure access to the storage account.

Secure access to an applications data in the cloud

• To learn more about Event Grid, see An introduction to Azure Event Grid.
• To try another tutorial that features Azure Functions, see Create a function that integrates with Azure Logic Apps.