Tutoriel : Automatiser le redimensionnement des images chargées à l’aide d’Event GridTutorial: Automate resizing uploaded images using Event Grid

Azure Event Grid est un service d’événement pour le cloud.Azure Event Grid is an eventing service for the cloud. Event Grid permet de créer des abonnements aux événements qui sont déclenchés par les services Azure ou des ressources tierces.Event Grid enables you to create subscriptions to events raised by Azure services or third-party resources.

Ce didacticiel constitue la deuxième partie d’une série de didacticiels sur le stockage.This tutorial is part two of a series of Storage tutorials. Il développe le tutoriel précédent sur le stockage en y ajoutant la génération automatique de miniatures serverless à l’aide d’Azure Event Grid et d’Azure Functions.It extends the previous Storage tutorial to add serverless automatic thumbnail generation using Azure Event Grid and Azure Functions. Event Grid permet à Azure Functions de répondre aux événements de Stockage Blob Azure et de générer les miniatures d’images chargées.Event Grid enables Azure Functions to respond to Azure Blob storage events and generate thumbnails of uploaded images. Un abonnement est créé pour l’événement de création de Stockage Blob.An event subscription is created against the Blob storage create event. Lorsqu’un objet blob est ajouté à un conteneur de stockage d’objets blob, un point de terminaison de fonction est appelé.When a blob is added to a specific Blob storage container, a function endpoint is called. Les données passées à la liaison de fonction à partir d’Event Grid sont utilisées pour accéder à l’objet blob et pour générer l’image miniature.Data passed to the function binding from Event Grid is used to access the blob and generate the thumbnail image.

Pour ajouter la fonctionnalité de redimensionnement à une application existante de chargement d’images, utilisez Azure CLI et le portail Azure.You use the Azure CLI and the Azure portal to add the resizing functionality to an existing image upload app.

Dans ce tutoriel, vous allez apprendre à :In this tutorial, you learn how to:

  • Création d'un compte Azure StorageCreate an Azure Storage account
  • Déployer du code sans serveur à l’aide d’Azure FunctionsDeploy serverless code using Azure Functions
  • Créer un abonnement d’événement Stockage Blob dans Event GridCreate a Blob storage event subscription in Event Grid

PrérequisPrerequisites

Notes

Cet article a été mis à jour pour tenir compte de l’utilisation du nouveau module Az d’Azure PowerShell.This article has been updated to use the new Azure PowerShell Az module. Vous pouvez toujours utiliser le module AzureRM, qui continue à recevoir des correctifs de bogues jusqu’à au moins décembre 2020.You can still use the AzureRM module, which will continue to receive bug fixes until at least December 2020. Pour en savoir plus sur le nouveau module Az et la compatibilité avec AzureRM, consultez Présentation du nouveau module Az d’Azure PowerShell.To learn more about the new Az module and AzureRM compatibility, see Introducing the new Azure PowerShell Az module. Pour des instructions d’installation du module Az, consultez Installer Azure PowerShell.For Az module installation instructions, see Install Azure PowerShell.

Pour suivre ce tutoriel :To complete this tutorial:

Vous devez avoir terminé le tutoriel précédent sur le stockage d'objets blob : Charger des données d’image dans le cloud avec Stockage Azure.You must have completed the previous Blob storage tutorial: Upload image data in the cloud with Azure Storage.

Si vous n’avez pas d’abonnement Azure, créez un compte gratuit avant de commencer.If you don't have an Azure subscription, create a free account before you begin.

Utiliser Azure Cloud ShellUse Azure Cloud Shell

Azure héberge Azure Cloud Shell, un environnement d’interpréteur de commandes interactif que vous pouvez utiliser dans votre navigateur.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Vous pouvez utiliser Bash ou PowerShell avec Cloud Shell pour utiliser les services Azure.You can use either Bash or PowerShell with Cloud Shell to work with Azure services. Vous pouvez utiliser les commandes préinstallées Cloud Shell pour exécuter le code de cet article sans avoir à installer quoi que ce soit dans votre environnement local.You can use the Cloud Shell preinstalled commands to run the code in this article without having to install anything on your local environment.

Pour démarrer Azure Cloud Shell :To start Azure Cloud Shell:

OptionOption Exemple/LienExample/Link
Sélectionnez Essayer dans le coin supérieur droit d’un bloc de code.Select Try It in the upper-right corner of a code block. La sélection de Essayer ne copie pas automatiquement le code dans Cloud Shell.Selecting Try It doesn't automatically copy the code to Cloud Shell. Exemple Essayer pour Azure Cloud Shell
Accédez à https://shell.azure.com ou sélectionnez le bouton Lancer Cloud Shell pour ouvrir Cloud Shell dans votre navigateur.Go to https://shell.azure.com, or select the Launch Cloud Shell button to open Cloud Shell in your browser. Lancer Cloud Shell dans une nouvelle fenêtreLaunch Cloud Shell in a new window
Sélectionnez le bouton Cloud Shell dans la barre de menus en haut à droite du portail Azure.Select the Cloud Shell button on the menu bar at the upper right in the Azure portal. Bouton Cloud Shell du portail Azure

Pour exécuter le code de cet article dans Azure Cloud Shell :To run the code in this article in Azure Cloud Shell:

  1. Démarrez Cloud Shell.Start Cloud Shell.

  2. Sélectionnez le bouton Copier dans un bloc de code pour copier le code.Select the Copy button on a code block to copy the code.

  3. Collez le code dans la session Cloud Shell en sélectionnant Ctrl+Maj+V sur Windows et Linux, ou en sélectionnant Cmd+Maj+V sur macOS.Paste the code into the Cloud Shell session by selecting Ctrl+Shift+V on Windows and Linux or by selecting Cmd+Shift+V on macOS.

  4. Sélectionnez Entrée pour exécuter le code.Select Enter to run the code.

Si vous choisissez d’installer et d’utiliser l’interface de ligne de commande localement, Azure CLI version 2.0.14 ou ultérieure est indispensable pour poursuivre le didacticiel décrit dans cet article.If you choose to install and use the CLI locally, this tutorial requires the Azure CLI version 2.0.14 or later. Exécutez az --version pour trouver la version.Run az --version to find the version. Si vous devez installer ou mettre à niveau, voir Installer Azure CLI.If you need to install or upgrade, see Install Azure CLI.

Si vous n’utilisez pas Cloud Shell, vous devez d’abord vous connecter à l’aide de az login.If you are not using Cloud Shell, you must first sign in using az login.

Si vous n’avez pas précédemment inscrit le fournisseur de ressources Event Grid dans votre abonnement, assurez-vous de l’avoir inscrit.If you've not previously registered the Event Grid resource provider in your subscription, make sure it's registered.

az provider register --namespace Microsoft.EventGrid

Création d'un compte Azure StorageCreate an Azure Storage account

Azure Functions nécessite un compte de stockage général.Azure Functions requires a general storage account. En plus du compte de stockage d’objets blob que vous avez créé dans le tutoriel précédent, créez un compte de stockage général dans le groupe de ressources à l’aide de la commande az storage account create.In addition to the Blob storage account you created in the previous tutorial, create a separate general storage account in the resource group by using the az storage account create command. Les noms des comptes de stockage doivent comporter entre 3 et 24 caractères, uniquement des lettres minuscules et des chiffres.Storage account names must be between 3 and 24 characters in length and may contain numbers and lowercase letters only.

  1. Définissez une variable pour contenir le nom du groupe de ressources que vous avez créé dans le tutoriel précédent.Set a variable to hold the name of the resource group that you created in the previous tutorial.

    resourceGroupName="myResourceGroup"
    
  2. Définissez une variable pour le nom du compte de stockage exigé par Azure Functions.Set a variable for the name of the new storage account that Azure Functions requires.

    functionstorage="<name of the storage account to be used by the function>"
    
  3. Créez le compte de stockage pour la fonction Azure.Create the storage account for the Azure function.

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

Créer une application de fonctionCreate a function app

Vous devez disposer d’une application de fonction pour héberger l’exécution de votre fonction.You must have a function app to host the execution of your function. La Function App fournit un environnement d’exécution sans serveur de votre code de fonction.The function app provides an environment for serverless execution of your function code. Créez une Function App à l’aide de la commande az functionapp create.Create a function app by using the az functionapp create command.

Dans la commande suivante, indiquez le nom de votre application de fonction unique.In the following command, provide your own unique function app name. Le nom de l’application de fonction est utilisé en tant que domaine DNS par défaut pour la Function App. Pour cette raison, ce nom doit être unique sur l’ensemble des applications dans Azure.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.

  1. Spécifiez un nom pour l’application de fonction qui doit être créée.Specify a name for the function app that's to be created.

    functionapp="<name of the function app>"
    
  2. Créez la fonction Azure.Create the Azure function.

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

Maintenant, configurez l’application de fonction pour vous connecter au compte de stockage Blob que vous avez créé dans le tutoriel précédent.Now configure the function app to connect to the Blob storage account you created in the previous tutorial.

Configurer l’application de fonctionConfigure the function app

La fonction nécessite des informations d’identification pour le compte de stockage Blob, qui sont ajoutées aux paramètres d’application de l’application de fonction à l’aide de la commande az functionapp config appsettings set.The function needs credentials for the Blob storage account, which are added to the application settings of the function app using the az functionapp config appsettings set command.

blobStorageAccount="<name of the Blob storage account you created in the previous tutorial>"
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

Le paramètre FUNCTIONS_EXTENSION_VERSION=~2 exécute l’application de fonction sur la version 2.x du runtime Azure Functions.The FUNCTIONS_EXTENSION_VERSION=~2 setting makes the function app run on version 2.x of the Azure Functions runtime.

Vous pouvez désormais déployer un projet de code de fonction dans cette application de fonction.You can now deploy a function code project to this function app.

Déployer le code de fonctionDeploy the function code

L’exemple de fonction de redimensionnement C# est disponible sur GitHub.The sample C# resize function is available on GitHub. Déployez ce projet de code dans l’application de fonction à l’aide de la commande az functionapp deployment source config.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

La fonction de redimensionnement d’image est déclenchée par les requêtes HTTP qui lui sont envoyées à partir du service Event Grid.The image resize function is triggered by HTTP requests sent to it from the Event Grid service. Vous indiquez à Event Grid que vous souhaitez obtenir ces notifications à l’URL de votre fonction en créant un abonnement d’événement.You tell Event Grid that you want to get these notifications at your function's URL by creating an event subscription. Pour ce didacticiel, vous vous abonnez à des événements créés par des objets blob.For this tutorial you subscribe to blob-created events.

Les données passées à la fonction à partir de la notification de Event Grid incluent l’URL de l’objet blob.The data passed to the function from the Event Grid notification includes the URL of the blob. Cette URL est ensuite passée à la liaison d’entrée pour obtenir l’image chargée depuis le stockage Blob.That URL is in turn passed to the input binding to obtain the uploaded image from Blob storage. La fonction génère une image miniature et écrit le flux résultant dans un conteneur distinct du stockage Blob.The function generates a thumbnail image and writes the resulting stream to a separate container in Blob storage.

Ce projet utilise EventGridTrigger pour le type de déclencheur.This project uses EventGridTrigger for the trigger type. Il est préférable d’utiliser le déclencheur Event Grid plutôt que les déclencheurs HTTP génériques.Using the Event Grid trigger is recommended over generic HTTP triggers. Event Grid valide automatiquement les déclencheurs de fonction Event Grid.Event Grid automatically validates Event Grid Function triggers. Dans le cas des déclencheurs HTTP génériques, vous devez implémenter la réponse de validation.With generic HTTP triggers, you must implement the validation response.

Pour en savoir plus sur cette fonction, consultez les fichiers function.json et run.csx.To learn more about this function, see the function.json and run.csx files.

Le code de projet de fonction est déployé directement à partir du dépôt d’exemples publics.The function project code is deployed directly from the public sample repository. Pour plus d’informations sur les options de déploiement Azure Functions, consultez Déploiement continu pour Azure Functions.To learn more about deployment options for Azure Functions, see Continuous deployment for Azure Functions.

Créer un abonnement d’événementCreate an event subscription

Un abonnement d’événement indique les événements générés par le fournisseur que vous souhaitez envoyer vers un point de terminaison spécifique.An event subscription indicates which provider-generated events you want sent to a specific endpoint. Dans ce cas, le point de terminaison est exposé par votre fonction.In this case, the endpoint is exposed by your function. Pour créer un abonnement d’événement qui envoie des notifications à votre fonction dans le portail Azure, effectuez les étapes suivantes :Use the following steps to create an event subscription that sends notifications to your function in the Azure portal:

  1. Dans le portail Azure, sélectionnez Tous les services dans le menu de gauche, puis sélectionnez Applications de fonctions.In the Azure portal, select All Services on the left menu, and then select Function Apps.

    Accéder aux applications de fonctions dans le portail Azure

  2. Développez votre application de fonction, choisissez la fonction Thumbnail, puis sélectionnez Ajouter un abonnement Event Grid.Expand your function app, choose the Thumbnail function, and then select Add Event Grid subscription.

    Accéder à Ajouter un abonnement Event Grid dans le portail Azure

  3. Utilisez les paramètres d’abonnement d’événement, comme spécifié dans le tableau.Use the event subscription settings as specified in the table.

    Créer un abonnement d’événement à partir de la fonction dans le portail Azure

    ParamètreSetting Valeur suggéréeSuggested value DescriptionDescription
    NomName imageresizersubimageresizersub Nom du nouvel abonnement d’événement.Name that identifies your new event subscription.
    Type de rubriqueTopic type Comptes de stockageStorage accounts Choisissez le fournisseur d’événements de compte de stockage.Choose the Storage account event provider.
    AbonnementSubscription Votre abonnement AzureYour Azure subscription Par défaut, votre abonnement Azure actuel est sélectionné.By default, your current Azure subscription is selected.
    Groupe de ressourcesResource group myResourceGroupmyResourceGroup Sélectionnez Utiliser l’existant, puis choisissez le groupe de ressources que vous avez utilisé dans ce didacticiel.Select Use existing and choose the resource group you have been using in this tutorial.
    RessourceResource Votre compte de stockage BlobYour Blob storage account Choisissez le compte de stockage Blob que vous avez créé.Choose the Blob storage account you created.
    Types d’événementsEvent types BlobCreatedBlob created Décochez tous les types autres que BlobCreated.Uncheck all types other than Blob created. Seuls les types d’événements de Microsoft.Storage.BlobCreated sont passés à la fonction.Only event types of Microsoft.Storage.BlobCreated are passed to the function.
    Type de point de terminaisonEndpoint type autogeneratedautogenerated Prédéfini comme une fonction Azure.Pre-defined as Azure Function.
    Point de terminaisonEndpoint autogeneratedautogenerated Nom de la fonction.Name of the function. Dans ce cas, il s’agit de Thumbnail.In this case, it's Thumbnail.
  4. Basculez vers l’onglet Filtres pour effectuer les actions suivantes :Switch to the Filters tab, and do the following actions:

    1. Sélectionnez l’option Activer le filtrage d’objet.Select Enable subject filtering option.

    2. Dans Le sujet commence par, entrez la valeur suivante : /blobServices/default/containers/images/blobs/ .For Subject begins with, enter the following value : /blobServices/default/containers/images/blobs/.

      Spécifier un filtre pour l’abonnement d’événement

  5. Pour ajouter l’abonnement d’événement, sélectionnez Créer.Select Create to add the event subscription. Cela crée un abonnement d’événement qui déclenche la fonction Thumbnail quand un objet blob est ajouté au conteneur images.This creates an event subscription that triggers the Thumbnail function when a blob is added to the images container. La fonction redimensionne les images et les ajoute au conteneur thumbnails.The function resizes the images and adds them to the thumbnails container.

Maintenant que les services backend sont configurés, testez la fonctionnalité de redimensionnement d’images dans l’exemple d’application web.Now that the backend services are configured, you test the image resize functionality in the sample web app.

Tester l’exemple d’applicationTest the sample app

Pour tester le redimensionnement d’images dans l’application web, accédez à l’URL de l’application publiée.To test image resizing in the web app, browse to the URL of your published app. L’URL par défaut de l’application web est https://<web_app>.azurewebsites.net.The default URL of the web app is https://<web_app>.azurewebsites.net.

Cliquez sur la zone Charger des photos pour sélectionner et charger un fichier.Click the Upload photos region to select and upload a file. Vous pouvez également faire glisser une photo dans cette zone.You can also drag a photo to this region.

Notez que, lorsque l’image chargée disparaît, une copie de celle-ci est affichée dans le carrousel Miniatures générées.Notice that after the uploaded image disappears, a copy of the uploaded image is displayed in the Generated Thumbnails carousel. Cette image a été redimensionnée par la fonction, ajoutée au conteneur thumbnails et téléchargée par le client web.This image was resized by the function, added to the thumbnails container, and downloaded by the web client.

Application web publiée dans le navigateur

Étapes suivantesNext steps

Dans ce didacticiel, vous avez appris à :In this tutorial, you learned how to:

  • Créer un compte de stockage Azure généralCreate a general Azure Storage account
  • Déployer du code sans serveur à l’aide d’Azure FunctionsDeploy serverless code using Azure Functions
  • Créer un abonnement d’événement Stockage Blob dans Event GridCreate a Blob storage event subscription in Event Grid

Passez à la troisième partie de la série de didacticiels sur le stockage pour savoir comment sécuriser l’accès au compte de stockage.Advance to part three of the Storage tutorial series to learn how to secure access to the storage account.