Tutorial Schritt 2: Automatisieren der Größenänderung von hochgeladenen Images per Event Grid

Dieses Tutorial ist eine Erweiterung des Tutorials Hochladen von Bilddaten in die Cloud mit Azure Storage, um die serverlose automatische Generierung von Miniaturansichten mithilfe von Azure Event Grid und Azure Functions hinzuzufügen. Der übergeordnete Workflow sieht folgendermaßen aus:

In diesem Tutorial führen Sie die folgenden Schritte aus:

• Erstellen eines Azure-Speicherkontos
• Erstellen, Konfigurieren und Bereitstellen einer Funktions-App
• Erstellen eines Ereignisabonnements für Speicherereignisse
• Testen der Beispiel-App

Voraussetzungen

Für dieses Tutorial benötigen Sie Folgendes:

• Sie benötigen ein Azure-Abonnement. Dieses Tutorial funktioniert nicht mit dem kostenlosen Abonnement.
• Sie müssen das vorherige Blob Storage-Tutorial abgeschlossen haben: Hochladen von Bilddaten in die Cloud mit Azure Storage.

Erstellen eines Azure-Speicherkontos

Für Azure Functions ist ein allgemeines Speicherkonto erforderlich. Erstellen Sie zusätzlich zu dem Blobspeicherkonto, das Sie im vorherigen Tutorial erstellt haben, ein separates allgemeines Speicherkonto in der Ressourcengruppe. Speicherkontonamen müssen zwischen 3 und 24 Zeichen lang sein und dürfen nur Zahlen und Kleinbuchstaben enthalten.

Legen Sie Variablen auf den Namen der Ressourcengruppe, die Sie im vorherigen Tutorial erstellt haben, den Speicherort der zu erstellenden Ressourcen und den Namen des neuen Speicherkontos fest, das Azure Functions benötigt. Erstellen Sie anschließend das Speicherkonto für die Azure-Funktion.

Azure-Befehlszeilenschnittstelle

Führen Sie den Befehl az storage account create aus.

Hinweis

Führen Sie die folgenden Befehle in der Bash-Shell von Cloud Shell aus. Wechseln Sie bei Bedarf über die Dropdownliste links oben Ecke in Cloud Shell zur Bash-Shell.

Führen Sie die folgenden Befehle aus, um ein Azure-Speicherkonto zu erstellen.

functionstorage="funcstorage$RANDOM"
az storage account create --name $functionstorage --location $region --resource-group $rgName --sku Standard_LRS --kind StorageV2  --allow-blob-public-access true

PowerShell

Führen Sie den Befehl New-AzStorageAccount aus.

$functionstorage="funcstorage"  + (Get-Random).ToString()   
New-AzStorageAccount -ResourceGroupName $rgName -AccountName $functionstorage -Location $region -SkuName Standard_LRS -Kind StorageV2 -AllowBlobPublicAccess $true       

Erstellen einer Funktionen-App

Sie müssen über eine Funktions-App verfügen, die die Ausführung Ihrer Funktion in Azure hostet. Die Funktionen-App bietet eine Umgebung für die serverlose Ausführung des Funktionscodes. Geben Sie im Befehl unten Ihren eigenen eindeutigen Funktions-App-Namen an. Da der Name der Funktions-App als DNS-Standarddomäne für die Funktions-App verwendet wird, muss der Name für alle Apps in Azure eindeutig sein. Geben Sie einen Namen für die Funktions-App an, die erstellt werden soll, und erstellen Sie die Azure-Funktion.

Azure-Befehlszeilenschnittstelle

Erstellen Sie eine Funktionen-App mithilfe des Befehls az functionapp create.

functionapp="funcapp$RANDOM"
az functionapp create --name $functionapp --storage-account $functionstorage --resource-group $rgName --consumption-plan-location $region --functions-version 4

PowerShell

Erstellen Sie mithilfe des Befehls New-AzFunctionApp eine Funktions-App.

$functionapp="funcapp" + (Get-Random).ToString()    
New-AzFunctionApp -Location $region -Name $functionapp -ResourceGroupName $rgName -Runtime PowerShell -StorageAccountName $functionstorage    

Konfigurieren Sie jetzt die Funktions-App für die Verbindung mit dem Blob-Speicherkonto, das Sie im vorherigen Tutorial erstellt haben.

Konfigurieren der Funktions-App

Die Funktion benötigt Anmeldeinformationen für das Blobspeicherkonto, die den Anwendungseigenschaften der Funkions-App mit dem Befehl az functionapp config appsettings set oder Update-AzFunctionAppSetting hinzugefügt werden.

Azure-Befehlszeilenschnittstelle

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

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

PowerShell

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

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

Die Einstellung FUNCTIONS_EXTENSION_VERSION=~2 legt fest, dass die Funktions-App unter der Version 2.x der Azure Functions-Runtime ausgeführt wird. Sie können nun ein Funktionscodeprojekt für diese Funktions-App bereitstellen.

Bereitstellen des Funktionscodes

Die C#-Beispielfunktion für die Größenänderung ist auf GitHub verfügbar. Stellen Sie dieses Codeprojekt für die Funktions-App mithilfe des Befehls az functionapp deployment source config bereit.

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

Die Funktion für die Bildgrößenänderung wird durch HTTP-Anforderungen ausgelöst, die sie vom Event Grid-Dienst empfängt. Erstellen Sie ein Ereignisabonnement, um Event Grid zu informieren, dass Sie diese Benachrichtigungen unter der URL Ihrer Funktion erhalten möchten. Für dieses Tutorial abonnieren Sie durch Blobs erstellte Ereignisse.

Die von der Event Grid-Benachrichtigung an die Funktion übergebenen Daten enthalten die URL des Blobs. Diese URL wird wiederum an die Eingabebindung übergeben, um das hochgeladene Bild aus dem Blob-Speicher abzurufen. Die Funktion generiert eine Miniaturansicht und schreibt den sich ergebenden Datenstrom in einen separaten Container in Blob Storage.

In diesem Projekt wird EventGridTrigger als Triggertyp verwendet. Es wird empfohlen, anstelle generischer HTTP-Trigger den Event Grid-Trigger zu verwenden. Event Grid überprüft Event Grid-Funktionstrigger automatisch. Bei generischen HTTP-Triggern müssen Sie die Überprüfungsantwort implementieren.

Weitere Informationen zu dieser Funktion finden Sie unter in den Dateien „function.json“ und „run.csx“.

Der Funktionsprojektcode wird direkt aus dem öffentlichen Beispielrepository bereitgestellt. Weitere Informationen zu den Bereitstellungsoptionen für Azure Functions finden Sie unter Continuous Deployment für Azure Functions.

Erstellen eines Ereignisabonnements

Ein Ereignisabonnement gibt an, welche vom Anbieter generierten Ereignisse an einen bestimmten Endpunkt gesendet werden sollen. In diesem Fall wird der Endpunkt durch Ihre Funktion zur Verfügung gestellt. Führen Sie die folgenden Schritte durch, um ein Ereignisabonnement zu erstellen, dass Benachrichtigungen an Ihre Funktion im Azure-Portal sendet:

1. Suchen Sie im Azure-Portal oben auf der Seite nach Function App, wählen Sie dies aus, und wählen Sie die von Ihnen erstellte Funktions-App aus. Wählen Sie Funktionen und dann die Funktion Miniaturansicht aus.

   

2. Wählen Sie Integration auswählen aus, wählen Sie dann den Event Grid-Trigger aus, und wählen Sie Event Grid-Abonnement erstellen aus.

   

3. Verwenden Sie die in der Tabelle angegebenen Einstellungen für das Ereignisabonnement.

   

   Einstellung	Vorgeschlagener Wert	Beschreibung
   Name	imageresizersub	Der Name, der Ihr neues Ereignisabonnement angibt.
   Thementyp	Speicherkonten	Wählen Sie den Speicherkonto-Ereignisanbieter aus.
   Abonnement	Ihr Azure-Abonnement	Ihr aktuelles Azure-Abonnement ist standardmäßig ausgewählt.
   Ressourcengruppe	myResourceGroup	Wählen Sie Vorhandene verwenden und anschließend die Ressourcengruppe aus, die Sie in diesem Tutorial verwendet haben.
   Ressource	Ihr Blob Storage-Konto	Wählen Sie das Blob Storage-Konto aus, in dem Bilder gespeichert werden, nicht das Konto, das von der Azure-Funktions-App verwendet wird.
   Name des Systemthemas	imagestoragesystopic	Geben Sie einen Namen für das Systemthema ein. Informationen zu Systemthemen finden Sie unter Übersicht über Systemthemen.
   Ereignistypen	Blob erstellt	Deaktivieren Sie alle Typen außer Blob erstellt. Nur Ereignistypen mit Microsoft.Storage.BlobCreated werden an die Funktion übergeben.
   Endpunkttyp	Automatisch generiert	Vordefiniert als Azure-Funktion.
   Endpunkt	Automatisch generiert	Name der Funktion. In diesem Fall: Thumbnail.

4. Wechseln Sie zur Registerkarte Filter, und führen Sie die folgenden Aktionen durch:

   1. Wählen Sie die Option Betrefffilter aktivieren aus.

   2. Geben Sie für Betreff beginnt mit den folgenden Wert ein: /blobServices/default/containers/images/.

      

5. Wählen Sie Erstellen aus, um das Ereignisabonnement hinzuzufügen, um ein Ereignisabonnement zu erstellen, das die Funktion Thumbnail auslöst, wenn dem Container images ein Blob hinzugefügt wird. Die Funktion ändert die Größe der Bilder und fügt sie dem Container thumbnails hinzu.

Nachdem die Back-End-Dienste konfiguriert wurden, testen Sie die Funktion für die Größenänderung von Bildern in der Beispiel-Web-App.

Testen der Beispiel-App

Navigieren Sie zum Testen der Größenänderung von Bildern in der Web-App zur URL Ihrer veröffentlichten App. Die Standard-URL der Web-App lautet https://<web_app>.azurewebsites.net.

Wählen Sie Fotos hochladen aus, um eine Datei auszuwählen und hochzuladen. Sie können auch ein Foto in diese Region ziehen.

Beachten Sie, dass eine Kopie des hochgeladenen Bilds im Karussell Generierte Miniaturansichten angezeigt wird, nachdem das hochgeladene Bild nicht mehr angezeigt wird. Die Größe dieses Bilds wurde von der Funktion angepasst, und das Bild wurde dem Container thumbnails hinzugefügt und vom Webclient heruntergeladen.

Nächste Schritte

Weitere Informationen finden Sie in den anderen Tutorials im Abschnitt „Tutorials“ des Inhaltsverzeichnisses.