Esercitazione: Automatizzare il ridimensionamento delle immagini caricate con Griglia di eventiTutorial: Automate resizing uploaded images using Event Grid

Griglia di eventi di Azure è un servizio di gestione degli eventi per il cloud.Azure Event Grid is an eventing service for the cloud. Griglia di eventi consente di creare sottoscrizioni a eventi generati dai servizi di Azure o da risorse di terze parti.Event Grid enables you to create subscriptions to events raised by Azure services or third-party resources.

Questa esercitazione è la seconda parte di una serie di esercitazioni sull'archiviazione.This tutorial is part two of a series of Storage tutorials. Estende l'esercitazione precedente sull'archiviazione aggiungendo la generazione automatica di anteprime serverless con Griglia di eventi di Azure e Funzioni di Azure.It extends the previous Storage tutorial to add serverless automatic thumbnail generation using Azure Event Grid and Azure Functions. Griglia di eventi consente a Funzioni di Azure di rispondere agli eventi di Archiviazione BLOB di Azure e generare anteprime delle immagini caricate.Event Grid enables Azure Functions to respond to Azure Blob storage events and generate thumbnails of uploaded images. Viene creata una sottoscrizione di eventi per l'evento di creazione dell'archivio BLOB.An event subscription is created against the Blob storage create event. Quando si aggiunge un BLOB a un contenitore di archiviazione BLOB specifico, viene richiamato un endpoint della funzione.When a blob is added to a specific Blob storage container, a function endpoint is called. I dati passati all'associazione della funzione da Griglia di eventi vengono usati per accedere al BLOB e generare l'immagine di anteprima.Data passed to the function binding from Event Grid is used to access the blob and generate the thumbnail image.

Usare l'interfaccia della riga di comando di Azure e il portale di Azure per aggiungere le funzionalità di ridimensionamento a un'app esistente di caricamento di immagini.You use the Azure CLI and the Azure portal to add the resizing functionality to an existing image upload app.

In questa esercitazione verranno illustrate le procedure per:In this tutorial, you learn how to:

  • Creare un account di Archiviazione di AzureCreate an Azure Storage account
  • distribuire il codice senza server mediante Funzioni di AzureDeploy serverless code using Azure Functions
  • creare una sottoscrizione di eventi di archiviazione BLOB in Griglia di eventiCreate a Blob storage event subscription in Event Grid

PrerequisitiPrerequisites

Nota

Questo articolo è stato aggiornato per usare il modulo Az di Azure PowerShell.This article has been updated to use the Azure Az PowerShell module. Il modulo Az di PowerShell è ora il modulo di PowerShell consigliato per l'interazione con Azure.The Az PowerShell module is the recommended PowerShell module for interacting with Azure. Per iniziare a usare il modulo Az PowerShell, vedere Installare Azure PowerShell.To get started with the Az PowerShell module, see Install Azure PowerShell. Per informazioni su come eseguire la migrazione al modulo AZ PowerShell, vedere Eseguire la migrazione di Azure PowerShell da AzureRM ad Az.To learn how to migrate to the Az PowerShell module, see Migrate Azure PowerShell from AzureRM to Az.

Per completare questa esercitazione:To complete this tutorial:

È necessario aver completato l'esercitazione precedente sull'archiviazione BLOB: Caricare i dati immagine nel cloud con Archiviazione di Azure.You must have completed the previous Blob storage tutorial: Upload image data in the cloud with Azure Storage.

È necessaria una sottoscrizione di Azure.You need an Azure subscription. Questa esercitazione non funziona con la sottoscrizione gratuita .This tutorial doesn't work with the free subscription.

Usare Azure Cloud ShellUse Azure Cloud Shell

Azure Cloud Shell è un ambiente di shell interattivo ospitato in Azure e usato tramite il browser.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. È possibile usare Bash o PowerShell con Cloud Shell per usare i servizi di Azure.You can use either Bash or PowerShell with Cloud Shell to work with Azure services. È possibile usare i comandi preinstallati di Cloud Shell per eseguire il codice contenuto in questo articolo senza dover installare strumenti nell'ambiente locale.You can use the Cloud Shell preinstalled commands to run the code in this article without having to install anything on your local environment.

Per avviare Azure Cloud Shell:To start Azure Cloud Shell:

OpzioneOption Esempio/CollegamentoExample/Link
Selezionare Prova nell'angolo superiore destro di un blocco di codice.Select Try It in the upper-right corner of a code block. La selezione di Prova non comporta la copia automatica del codice in Cloud Shell.Selecting Try It doesn't automatically copy the code to Cloud Shell. Esempio di Prova per Azure Cloud Shell
Passare a https://shell.azure.com o selezionare il pulsante Avvia Cloud Shell per aprire Cloud Shell nel browser.Go to https://shell.azure.com, or select the Launch Cloud Shell button to open Cloud Shell in your browser. Avviare Cloud Shell in una nuova finestraLaunch Cloud Shell in a new window
Selezionare il pulsante Cloud Shell nella barra dei menu nell'angolo in alto a destra del portale di Azure.Select the Cloud Shell button on the menu bar at the upper right in the Azure portal. Pulsante Cloud Shell nel portale di Azure

Per eseguire il codice di questo articolo in Azure Cloud Shell:To run the code in this article in Azure Cloud Shell:

  1. Avviare Cloud Shell.Start Cloud Shell.

  2. Selezionare il pulsante Copia in un blocco di codice per copiare il codice.Select the Copy button on a code block to copy the code.

  3. Incollare il codice nella sessione di Cloud Shell premendo CTRL+MAIUSC+V in Windows e Linux o CMD+MAIUSC+V in 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. Premere INVIO per eseguire il codice.Select Enter to run the code.

Se si sceglie di installare e usare l'interfaccia della riga di comando in locale, questa esercitazione richiede l'interfaccia della riga di comando di Azure versione 2.0.14 o successiva.If you choose to install and use the CLI locally, this tutorial requires the Azure CLI version 2.0.14 or later. Eseguire az --version per trovare la versione.Run az --version to find the version. Se è necessario eseguire l'installazione o l'aggiornamento, vedere Installare l'interfaccia della riga di comando di Azure.If you need to install or upgrade, see Install Azure CLI.

Se non si usa Cloud Shell, prima è necessario accedere usando az login.If you are not using Cloud Shell, you must first sign in using az login.

Se il provider di risorse di Griglia di eventi non è stato registrato in precedenza nella sottoscrizione, assicurarsi che sia registrato.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
az provider register --namespace Microsoft.EventGrid

Creare un account di Archiviazione di AzureCreate an Azure Storage account

Per Funzioni di Azure è necessario un account di archiviazione generale.Azure Functions requires a general storage account. Oltre all'account di archiviazione BLOB creato nell'esercitazione precedente, creare un account di archiviazione generale separato nel gruppo di risorse usando il comando 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. I nomi degli account di archiviazione devono avere una lunghezza compresa tra 3 e 24 caratteri e possono contenere solo numeri e lettere minuscole.Storage account names must be between 3 and 24 characters in length and may contain numbers and lowercase letters only.

  1. Impostare una variabile per includere il nome del gruppo di risorse creato nell'esercitazione precedente.Set a variable to hold the name of the resource group that you created in the previous tutorial.

    resourceGroupName="myResourceGroup"
    
    $resourceGroupName="myResourceGroup"
    
  2. Impostare una variabile contenente la località per le risorse da creare.Set a variable to hold the location for resources to be created.

    location="eastus"
    
    $location="eastus"
    
  3. Impostare una variabile per il nome del nuovo account di archiviazione richiesto da Funzioni di Azure.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>"
    
    $functionstorage="<name of the storage account to be used by the function>"
    
  4. Creare l'account di archiviazione per la funzione di Azure.Create the storage account for the Azure function.

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

Creare un'app per le funzioniCreate a function app

Per ospitare l'esecuzione della funzione è necessaria un'app per le funzioni.You must have a function app to host the execution of your function. L'app per le funzioni offre un ambiente per l'esecuzione senza server del codice di funzione.The function app provides an environment for serverless execution of your function code. Creare un'app per le funzioni usando il comando az functionapp create.Create a function app by using the az functionapp create command.

Nel comando seguente specificare il proprio nome di app per le funzioni univoco.In the following command, provide your own unique function app name. Poiché verrà usato come dominio DNS predefinito per l'app per le funzioni, è necessario che il app per le funzioni sia univoco tra tutte le app in 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. Specificare un nome per l'app per le funzioni da creare.Specify a name for the function app that's to be created.

    functionapp="<name of the function app>"
    
    $functionapp="<name of the function app>"
    
  2. Creare la funzione di Azure.Create the Azure function.

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

È ora necessario configurare l'app per le funzioni per la connessione all'account di archiviazione BLOB creato nell'esercitazione precedente.Now configure the function app to connect to the Blob storage account you created in the previous tutorial.

Configurare l'app per le funzioniConfigure the function app

La funzione necessita di credenziali per l'account di archiviazione BLOB, che vengono aggiunte alle impostazioni dell'app per le funzioni usando il comando 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.

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
$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

Con l'impostazione FUNCTIONS_EXTENSION_VERSION=~2 l'app per le funzioni viene eseguita nella versione 2.x del runtime di Funzioni di Azure.The FUNCTIONS_EXTENSION_VERSION=~2 setting makes the function app run on version 2.x of the Azure Functions runtime.

È ora possibile distribuire un progetto di codice funzione in quest'app per le funzioni.You can now deploy a function code project to this function app.

Distribuire il codice funzioneDeploy the function code

La funzione di ridimensionamento C# di esempio è disponibile in GitHub.The sample C# resize function is available on GitHub. Distribuire il progetto di codice nell'app per le funzioni usando il comando 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
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 funzione di ridimensionamento delle immagini viene attivata dalle richieste HTTP inviate all'app dal servizio Griglia di eventi.The image resize function is triggered by HTTP requests sent to it from the Event Grid service. È possibile segnalare al servizio Griglia di eventi che si vogliono ricevere queste notifiche nell'URL della funzione creando una sottoscrizione di eventi.You tell Event Grid that you want to get these notifications at your function's URL by creating an event subscription. Per questa esercitazione vengono sottoscritti eventi creati da BLOB.For this tutorial you subscribe to blob-created events.

I dati passati alla funzione dalla notifica del servizio Griglia di eventi includono l'URL del BLOB.The data passed to the function from the Event Grid notification includes the URL of the blob. Tale URL viene a sua volta passato all'associazione di input per ottenere l'immagine caricata dall'archivio BLOB.That URL is in turn passed to the input binding to obtain the uploaded image from Blob storage. La funzione genera un'immagine di anteprima e scrive il flusso risultante in un contenitore separato nell'archiviazione BLOB.The function generates a thumbnail image and writes the resulting stream to a separate container in Blob storage.

Questo progetto usa EventGridTrigger per il tipo di trigger.This project uses EventGridTrigger for the trigger type. L'uso del trigger della Griglia di eventi è consigliato rispetto ai trigger HTTP generici.Using the Event Grid trigger is recommended over generic HTTP triggers. Griglia di eventi convalida automaticamente i trigger di funzioni della Griglia di eventi.Event Grid automatically validates Event Grid Function triggers. Con i trigger HTTP generici è necessario implementare la risposta di convalida.With generic HTTP triggers, you must implement the validation response.

Per altre informazioni su questa funzione, vedere i file function.json e run.csx.To learn more about this function, see the function.json and run.csx files.

Il codice del progetto funzione viene distribuito direttamente dal repository pubblico di esempio.The function project code is deployed directly from the public sample repository. Per altre informazioni sulle opzioni di distribuzione per Funzioni di Azure, vedere Distribuzione continua per Funzioni di Azure.To learn more about deployment options for Azure Functions, see Continuous deployment for Azure Functions.

Creare una sottoscrizione di eventiCreate an event subscription

Una sottoscrizione di eventi indica quali eventi generati dal provider si desidera inviare a un endpoint specifico.An event subscription indicates which provider-generated events you want sent to a specific endpoint. In questo caso l'endpoint viene esposto dalla funzione.In this case, the endpoint is exposed by your function. Seguire questa procedura per creare una sottoscrizione di eventi che invia notifiche alla funzione nel portale di Azure:Use the following steps to create an event subscription that sends notifications to your function in the Azure portal:

  1. Nella parte superiore della pagina del portale di Azure cercare e selezionare Function App e scegliere l'app per le funzioni appena creata.In the Azure portal, at the top of the page search for and select Function App and choose the function app that you just created. Selezionare Funzioni e scegliere la funzione Anteprima.Select Functions and choose the Thumbnail function.

    Scegliere la funzione Anteprima nel portale

  2. Selezionare Integrazione, quindi scegliere Trigger griglia di eventi e infine selezionare Crea sottoscrizione di Griglia di eventi.Select select Integration then choose the Event Grid Trigger and select Create Event Grid subscription.

    Passare ad Aggiungi sottoscrizione di Griglia di eventi nel portale di Azure

  3. Usare le impostazioni della sottoscrizione di eventi specificate nella tabella.Use the event subscription settings as specified in the table.

    Creare una sottoscrizione di eventi dalla funzione nel portale di Azure

    ImpostazioneSetting Valore consigliatoSuggested value DescrizioneDescription
    NomeName imageresizersubimageresizersub Nome che identifica la nuova sottoscrizione di eventi.Name that identifies your new event subscription.
    Tipo di argomentoTopic type Account di archiviazioneStorage accounts Scegliere il provider di eventi Account di archiviazione.Choose the Storage account event provider.
    SottoscrizioneSubscription Sottoscrizione di AzureYour Azure subscription Per impostazione predefinita viene selezionata la sottoscrizione di Azure corrente.By default, your current Azure subscription is selected.
    Gruppo di risorseResource group myResourceGroupmyResourceGroup Selezionare Usa esistente e scegliere il gruppo di risorse usato in questa esercitazione.Select Use existing and choose the resource group you have been using in this tutorial.
    RisorsaResource Account di archiviazione BLOBYour Blob storage account Selezionare l'account di archiviazione BLOB creato.Choose the Blob storage account you created.
    Nome dell'argomento del sistemaSystem Topic Name imagestoragesystopicimagestoragesystopic Consente di specificare un nome per l'argomento di sistema.Specify a name for the system topic. Per informazioni sugli argomenti di sistema, vedere Panoramica degli argomenti di sistema.To learn about system topics, see System topics overview.
    Tipi di eventoEvent types Blob created (BLOB creato)Blob created Deselezionare tutti i tipi diversi da Blob created (BLOB creato).Uncheck all types other than Blob created. Solo i tipi di evento Microsoft.Storage.BlobCreated vengono passati alla funzione.Only event types of Microsoft.Storage.BlobCreated are passed to the function.
    Tipo di endpointEndpoint type generato automaticamenteautogenerated Predefinito come Funzione di Azure.Pre-defined as Azure Function.
    EndpointEndpoint generato automaticamenteautogenerated Nome della funzione.Name of the function. In questo caso, è Anteprima.In this case, it's Thumbnail.
  4. Passare alla scheda Filtri ed eseguire le azioni seguenti:Switch to the Filters tab, and do the following actions:

    1. Selezionare l'opzione Abilita filtro per l'oggetto.Select Enable subject filtering option.

    2. Per Subject inizia con, immettere il valore seguente: /blobServices/default/Containers/images/.For Subject begins with, enter the following value : /blobServices/default/containers/images/.

      Specificare un filtro per la sottoscrizione di eventi

  5. Selezionare Crea per aggiungere la sottoscrizione di eventi.Select Create to add the event subscription. Questa operazione consente di creare una sottoscrizione di eventi che attiva la funzione Thumbnail quando viene aggiunto un BLOB al contenitore images.This creates an event subscription that triggers the Thumbnail function when a blob is added to the images container. La funzione ridimensiona le immagini e le aggiunge al contenitore thumbnails.The function resizes the images and adds them to the thumbnails container.

Ora che i servizi back-end sono stati configurati, testare la funzione di ridimensionamento delle immagini nell'applicazione Web di esempio.Now that the backend services are configured, you test the image resize functionality in the sample web app.

Testare l'app di esempioTest the sample app

Per testare il ridimensionamento delle immagini nell'app Web, passare all'URL dell'app pubblicata.To test image resizing in the web app, browse to the URL of your published app. L'URL predefinito dell'app Web è https://<web_app>.azurewebsites.net.The default URL of the web app is https://<web_app>.azurewebsites.net.

Fare clic sull'area Upload photos (Carica foto) per selezionare e caricare un file.Click the Upload photos region to select and upload a file. È anche possibile trascinare una foto in quest'area.You can also drag a photo to this region.

Si noti che quando l'immagine caricata scompare, nella sequenza video Generated Thumbnails (Anteprime generate) viene mostrata una copia dell'immagine caricata.Notice that after the uploaded image disappears, a copy of the uploaded image is displayed in the Generated Thumbnails carousel. Questa immagine è stata ridimensionata dalla funzione, aggiunta al contenitore anteprime e scaricata dal client Web.This image was resized by the function, added to the thumbnails container, and downloaded by the web client.

Screenshot che mostra un'app Web pubblicata con nome "ImageResizer" in una browser per .NET v12 SDK.

Passaggi successiviNext steps

In questa esercitazione sono state illustrate le procedure per:In this tutorial, you learned how to:

  • creare un account generale di Archiviazione di AzureCreate a general Azure Storage account
  • distribuire il codice senza server mediante Funzioni di AzureDeploy serverless code using Azure Functions
  • creare una sottoscrizione di eventi di archiviazione BLOB in Griglia di eventiCreate a Blob storage event subscription in Event Grid

Passare alla terza parte della serie di esercitazioni su Archiviazione per apprendere a proteggere l'accesso all'account di archiviazione.Advance to part three of the Storage tutorial series to learn how to secure access to the storage account.