Samouczek: Automatyzowanie zmiany rozmiaru przekazanych obrazów za pomocą usługi Event GridTutorial: Automate resizing uploaded images using Event Grid

Azure Event Grid to usługa do obsługi zdarzeń dla chmury.Azure Event Grid is an eventing service for the cloud. Usługa Event Grid pozwala tworzyć subskrypcje zdarzeń zgłaszanych przez usługi platformy Azure lub zasoby innych firm.Event Grid enables you to create subscriptions to events raised by Azure services or third-party resources.

Ten samouczek to druga część serii samouczków na temat usługi Storage.This tutorial is part two of a series of Storage tutorials. Rozszerzy poprzedni samouczek magazynu , aby dodać automatyczne generowanie miniatur bezserwerowe przy użyciu Azure Event Grid i Azure Functions.It extends the previous Storage tutorial to add serverless automatic thumbnail generation using Azure Event Grid and Azure Functions. Dzięki usłudze Event Grid usługa Azure Functions może reagować na zdarzenia usługi Azure Blob Storage i generować miniatury przekazanych obrazów.Event Grid enables Azure Functions to respond to Azure Blob storage events and generate thumbnails of uploaded images. Subskrypcja zdarzeń jest tworzona dla zdarzenia tworzenia usługi Blob Storage.An event subscription is created against the Blob storage create event. Gdy do konkretnego kontenera usługi Blob Storage dodawany jest obiekt blob, następuje wywołanie punktu końcowego funkcji.When a blob is added to a specific Blob storage container, a function endpoint is called. Za pomocą danych przekazanych do powiązania funkcji z usługi Event Grid uzyskiwany jest dostęp do obiektu blob i generowana jest miniatura obrazu.Data passed to the function binding from Event Grid is used to access the blob and generate the thumbnail image.

Aby dodać funkcję zmiany rozmiaru do istniejącej aplikacji do przekazywania obrazów, używane są interfejs wiersza polecenia platformy Azure i witryna Azure Portal.You use the Azure CLI and the Azure portal to add the resizing functionality to an existing image upload app.

Ten samouczek zawiera informacje na temat wykonywania następujących czynności:In this tutorial, you learn how to:

  • Tworzenie ogólnego konta usługi Azure StorageCreate a general Azure Storage account
  • Wdrażanie bezserwerowego kodu za pomocą usługi Azure FunctionsDeploy serverless code using Azure Functions
  • Tworzenie subskrypcji zdarzeń usługi Blob Storage w usłudze Event GridCreate a Blob storage event subscription in Event Grid

Wymagania wstępnePrerequisites

Uwaga

Ten artykuł został zaktualizowany o korzystanie z nowego modułu Azure PowerShell Az.This article has been updated to use the new Azure PowerShell Az module. Nadal możesz używać modułu AzureRM, który będzie nadal otrzymywać poprawki błędów do co najmniej grudnia 2020 r.You can still use the AzureRM module, which will continue to receive bug fixes until at least December 2020. Aby dowiedzieć się więcej na temat nowego modułu Az i zgodności z modułem AzureRM, zobacz Wprowadzenie do nowego modułu Az programu Azure PowerShell.To learn more about the new Az module and AzureRM compatibility, see Introducing the new Azure PowerShell Az module. Aby uzyskać instrukcje dotyczące instalacji modułu Az, zobacz Instalowanie programu Azure PowerShell.For Az module installation instructions, see Install Azure PowerShell.

W celu ukończenia tego samouczka:To complete this tutorial:

Musisz wcześniej ukończyć poprzedni samouczek na temat usługi Blob Storage: Przekazywanie danych obrazu w chmurze za pomocą usługi Azure Storage.You must have completed the previous Blob storage tutorial: Upload image data in the cloud with Azure Storage.

Jeśli nie masz subskrypcji platformy Azure, przed rozpoczęciem utwórz bezpłatne konto.If you don't have an Azure subscription, create a free account before you begin.

Jeśli wcześniej dostawca zasobów usługi Event Grid nie został zarejestrowany w ramach subskrypcji, upewnij się, że teraz jest on zarejestrowany.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

Używanie usługi Azure Cloud ShellUse Azure Cloud Shell

Platforma Azure obsługuje Azure Cloud Shell, interaktywne środowisko powłoki, z którego można korzystać w przeglądarce.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Cloud Shell pozwala korzystać bash z usług platformy PowerShell Azure lub do pracy z tymi usługami.Cloud Shell lets you use either bash or PowerShell to work with Azure services. Możesz użyć wstępnie zainstalowanych poleceń Cloud Shell, aby uruchomić kod w tym artykule bez konieczności instalowania niczego w środowisku lokalnym.You can use the Cloud Shell pre-installed commands to run the code in this article without having to install anything on your local environment.

Aby uruchomić Azure Cloud Shell:To launch Azure Cloud Shell:

OpcjaOption Przykład/linkExample/Link
Wybierz pozycję Wypróbuj w prawym górnym rogu bloku kodu.Select Try It in the upper-right corner of a code block. Wybranie przycisku Wypróbuj nie powoduje automatycznego skopiowania kodu do Cloud Shell.Selecting Try It doesn't automatically copy the code to Cloud Shell. Przykład try dla Azure Cloud Shell
Przejdź do https://shell.azure.com lub wybierz przycisk Uruchom Cloud Shell , aby otworzyć Cloud Shell w przeglądarce.Go to https://shell.azure.com or select the Launch Cloud Shell button to open Cloud Shell in your browser. Uruchom Cloud Shell w nowym oknieLaunch Cloud Shell in a new window
Wybierz przycisk Cloud Shell w prawym górnym pasku menu w Azure Portal.Select the Cloud Shell button on the top-right menu bar in the Azure portal. Przycisk Cloud Shell w witrynie Azure Portal

Aby uruchomić kod w tym artykule w Azure Cloud Shell:To run the code in this article in Azure Cloud Shell:

  1. Uruchom Cloud Shell.Launch Cloud Shell.

  2. Aby skopiować kod, wybierz przycisk Kopiuj w bloku kodu.Select the Copy button on a code block to copy the code.

  3. Wklej kod do sesji Cloud Shell przy użyciu kombinacji klawiszy CTRL+SHIFT+v w systemach Windows i Linux lub cmd+SHIFT+v w macOS.Paste the code into the Cloud Shell session with Ctrl+Shift+V on Windows and Linux, or Cmd+Shift+V on macOS.

  4. Naciśnij klawisz Enter , aby uruchomić kod.Press Enter to run the code.

Jeśli zdecydujesz się zainstalować interfejs wiersza polecenia i korzystać z niego lokalnie, ten samouczek wymaga interfejsu wiersza polecenia platformy Azure w wersji 2.0.14 lub nowszej.If you choose to install and use the CLI locally, this tutorial requires the Azure CLI version 2.0.14 or later. Uruchom polecenie az --version, aby dowiedzieć się, jaka wersja jest używana.Run az --version to find the version. Jeśli konieczna będzie instalacja lub uaktualnienie, zobacz Instalowanie interfejsu wiersza polecenia platformy Azure.If you need to install or upgrade, see Install Azure CLI.

Jeśli nie korzystasz z usługi Cloud Shell, musisz się najpierw zalogować za pomocą polecenia az login.If you are not using Cloud Shell, you must first sign in using az login.

Tworzenie konta usługi Azure StorageCreate an Azure Storage account

Usługa Azure Functions wymaga konta magazynu ogólnego.Azure Functions requires a general storage account. Oprócz konta usługi Blob Storage utworzonego w poprzednim samouczku utwórz oddzielne konto magazynu ogólnego w grupie zasobów przy użyciu polecenia 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. Nazwy kont usługi Storage muszą mieć długość od 3 do 24 znaków i mogą zawierać tylko cyfry i małe litery.Storage account names must be between 3 and 24 characters in length and may contain numbers and lowercase letters only.

  1. Ustaw zmienną do przechowywania nazwy grupy zasobów utworzonej w poprzednim samouczku.Set a variable to hold the name of the resource group that you created in the previous tutorial.

    resourceGroupName=myResourceGroup
    
  2. Ustaw zmienną dla nazwy nowego konta magazynu wymaganego przez usługę 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. Utwórz konto magazynu dla funkcji platformy Azure.Create the storage account for the Azure function.

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

Tworzenie aplikacji funkcjiCreate a function app

Do obsługi wykonywania funkcji potrzebna jest aplikacja funkcji.You must have a function app to host the execution of your function. Aplikacja funkcji zapewnia środowisko do bezserwerowego wykonywania kodu funkcji.The function app provides an environment for serverless execution of your function code. Utwórz aplikację funkcji przy użyciu polecenia az functionapp create.Create a function app by using the az functionapp create command.

W poniższym poleceniu podaj własną, unikatową nazwę aplikacji funkcji.In the following command, provide your own unique function app name. Nazwa aplikacji funkcji jest używana jako domyślna domena DNS aplikacji funkcji, więc nazwa ta musi być unikatowa wśród wszystkich aplikacji na platformie 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. Określ nazwę aplikacji funkcji, która ma zostać utworzona.Specify a name for the function app that's to be created.

    functionapp=<name of the function app>
    
  2. Utwórz funkcję platformy Azure.Create the Azure function.

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

Teraz musisz skonfigurować aplikację funkcji, aby nawiązać połączenie z kontem magazynu obiektów BLOB utworzonym w poprzednim samouczku.Now you must configure the function app to connect to the Blob storage account you created in the previous tutorial.

Konfigurowanie aplikacji funkcjiConfigure the function app

Funkcja wymaga poświadczeń dla konta usługi Blob Storage, które są dodawane do ustawień aplikacji funkcji za pomocą polecenia 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

Ustawienie FUNCTIONS_EXTENSION_VERSION=~2 sprawia, że aplikacja funkcji jest uruchamiana w ramach wersji 2.x środowiska uruchomieniowego usługi Azure Functions.The FUNCTIONS_EXTENSION_VERSION=~2 setting makes the function app run on version 2.x of the Azure Functions runtime.

Teraz możesz wdrożyć projekt kodu funkcji do tej aplikacji funkcji.You can now deploy a function code project to this function app.

Wdrażanie kodu funkcjiDeploy the function code

Przykładowa funkcja zmiany rozmiaru w formacie C# jest dostępna w usłudze GitHub.The sample C# resize function is available on GitHub. Wdróż ten projekt kodu w aplikacji funkcji, używając polecenia 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

Funkcja zmiany rozmiaru obrazu jest wyzwalana przez żądania HTTP wysyłane do niej z usługi Event Grid.The image resize function is triggered by HTTP requests sent to it from the Event Grid service. Utwórz subskrypcję zdarzeń, aby określić w usłudze Event Grid, że chcesz otrzymywać te powiadomienia pod adresem URL funkcji.You tell Event Grid that you want to get these notifications at your function's URL by creating an event subscription. W tym samouczku zasubskrybowano zdarzenia tworzone przez obiekty blob.For this tutorial you subscribe to blob-created events.

Dane przekazane do funkcji z powiadomienia usługi Event Grid zawierają adres URL obiektu blob.The data passed to the function from the Event Grid notification includes the URL of the blob. Ten adres URL jest następnie przekazywany do powiązania wejściowego w celu pobrania przekazanego obrazu z magazynu Blob Storage.That URL is in turn passed to the input binding to obtain the uploaded image from Blob storage. Funkcja generuje obraz miniatury i zapisuje wynikowy strumień do oddzielnego kontenera w usłudze Blob Storage.The function generates a thumbnail image and writes the resulting stream to a separate container in Blob storage.

Ten projekt używa wartości EventGridTrigger dla typu wyzwalacza.This project uses EventGridTrigger for the trigger type. Zamiast ogólnych wyzwalaczy HTTP zaleca się korzystanie z wyzwalacza usługi Event Grid.Using the Event Grid trigger is recommended over generic HTTP triggers. Usługa Event Grid automatycznie weryfikuje wyzwalacze funkcji usługi Event Grid.Event Grid automatically validates Event Grid Function triggers. W przypadku ogólnych wyzwalaczy HTTP trzeba zaimplementować odpowiedź weryfikacji.With generic HTTP triggers, you must implement the validation response.

Aby dowiedzieć się więcej na temat tej funkcji, zobacz pliki function.json i run.csx.To learn more about this function, see the function.json and run.csx files.

Kod projektu funkcji jest wdrażany bezpośrednio z publicznego przykładowego repozytorium.The function project code is deployed directly from the public sample repository. Aby dowiedzieć się więcej na temat opcji wdrażania dla usługi Azure Functions, zobacz Ciągłe wdrażanie dla usługi Azure Functions.To learn more about deployment options for Azure Functions, see Continuous deployment for Azure Functions.

Tworzenie subskrypcji zdarzeńCreate an event subscription

Subskrypcja zdarzeń wskazuje, które zdarzenia generowane przez dostawcę mają być wysyłane do określonego punktu końcowego.An event subscription indicates which provider-generated events you want sent to a specific endpoint. W tym przypadku punkt końcowy jest uwidaczniany przez Twoją funkcję.In this case, the endpoint is exposed by your function. Poniżej przedstawiono procedurę tworzenia subskrypcji zdarzeń wysyłającej powiadomienia do funkcji w witrynie Azure Portal:Use the following steps to create an event subscription that sends notifications to your function in the Azure portal:

  1. W witrynie Azure Portal wybierz pozycję Wszystkie usługi z menu po lewej stronie, a następnie wybierz pozycję Aplikacje funkcji.In the Azure portal, select All Services on the left menu, and then select Function Apps.

    Przechodzenie do aplikacji funkcji w witrynie Azure Portal

  2. Rozwiń swoją aplikację funkcji, wybierz funkcję Thumbnail, a następnie wybierz pozycję Dodaj subskrypcję usługi Event Grid.Expand your function app, choose the Thumbnail function, and then select Add Event Grid subscription.

    Przechodzenie do aplikacji funkcji w witrynie Azure Portal

  3. Użyj ustawień subskrypcji zdarzeń w sposób określony w tabeli poniżej.Use the event subscription settings as specified in the table.

    Tworzenie subskrypcji zdarzeń z funkcji w witrynie Azure Portal

    UstawienieSetting Sugerowana wartośćSuggested value OpisDescription
    NazwaName imageresizersubimageresizersub Nazwa identyfikująca nową subskrypcję zdarzeń.Name that identifies your new event subscription.
    Typ tematuTopic type Konta magazynuStorage accounts Wybierz dostawcę zdarzeń konta usługi Storage.Choose the Storage account event provider.
    SubskrypcjaSubscription Twoja subskrypcja platformy AzureYour Azure subscription Domyślnie jest wybrana Twoja bieżąca subskrypcja platformy Azure.By default, your current Azure subscription is selected.
    Grupa zasobówResource group myResourceGroupmyResourceGroup Wybierz pozycję Użyj istniejącej i wybierz grupę zasobów używaną w tym samouczku.Select Use existing and choose the resource group you have been using in this tutorial.
    ZasóbResource Konto usługi Blob StorageYour Blob storage account Wybierz utworzone konto usługi Blob Storage.Choose the Blob storage account you created.
    Typy zdarzeńEvent types Utworzony obiekt blobBlob created Anuluj zaznaczenie wszystkich typów innych niż Utworzony obiekt blob.Uncheck all types other than Blob created. Tylko typy zdarzeń Microsoft.Storage.BlobCreated są przekazywane do funkcji.Only event types of Microsoft.Storage.BlobCreated are passed to the function.
    Typ subskrybentaSubscriber type generowany automatycznieautogenerated Wstępnie zdefiniowany jako element webhook.Pre-defined as Web Hook.
    Punkt końcowy subskrybentaSubscriber endpoint generowany automatycznieautogenerated Użyj automatycznie wygenerowanego adresu URL punktu końcowego.Use the endpoint URL that is generated for you.
  4. Przejdź do karty Filters (Filtry), a następnie wykonaj następujące czynności:Switch to the Filter tab, and do the following actions:

    1. Zaznacz pole wyboru Enable subject filtering (Włącz filtrowanie tematów).Select Enable subject filtering option.

    2. W polu Subject begins with (Temat rozpoczyna się od) wprowadź następującą wartość: /blobServices/default/containers/images/blobs/ .For Subject begins with, enter the following value : /blobServices/default/containers/images/blobs/.

      Określ filtr dla subskrypcji zdarzeń

  5. Wybierz pozycję Create (Utwórz), aby dodać subskrypcję zdarzeń.Select Create to add the event subscription. Spowoduje to utworzenie subskrypcji zdarzeń, która wyzwala funkcję Thumbnail po dodaniu obiektu blob do kontenera images.This creates an event subscription that triggers Thumbnail function when a blob is added to the images container. Funkcja zmieni rozmiar obrazów i doda je do kontenera thumbnails.The function resizes the images and adds them to the thumbnails container.

Ponieważ usługi zaplecza zostały już skonfigurowane, można przetestować funkcję zmieniania rozmiaru obrazów w przykładowej aplikacji internetowej.Now that the backend services are configured, you test the image resize functionality in the sample web app.

Testowanie przykładowej aplikacjiTest the sample app

Aby przetestować zmienianie rozmiaru obrazów w aplikacji internetowej, przejdź pod adres URL Twojej opublikowanej aplikacji.To test image resizing in the web app, browse to the URL of your published app. Domyślnym adresem URL aplikacji internetowej jest https://<web_app>.azurewebsites.net.The default URL of the web app is https://<web_app>.azurewebsites.net.

Kliknij region Upload photos (Przekazywanie zdjęć), aby wybrać i przekazać plik.Click the Upload photos region to select and upload a file. Możesz także przeciągnąć zdjęcia do tego obszaru.You can also drag a photo to this region.

Zwróć uwagę, że gdy przekazany obraz zniknie, jego kopia jest wyświetlana na karuzeli Generated thumbnails (Wygenerowane miniatury).Notice that after the uploaded image disappears, a copy of the uploaded image is displayed in the Generated thumbnails carousel. Rozmiar obrazu został zmieniony przez funkcję, obraz został dodany do kontenera thumbnails i pobrany przez klienta internetowego.This image was resized by the function, added to the thumbnails container, and downloaded by the web client.

Opublikowana aplikacja internetowa w przeglądarce

Następne krokiNext steps

W niniejszym samouczku zawarto informacje na temat wykonywania następujących czynności:In this tutorial, you learned how to:

  • Tworzenie ogólnego konta usługi Azure StorageCreate a general Azure Storage account
  • Wdrażanie bezserwerowego kodu za pomocą usługi Azure FunctionsDeploy serverless code using Azure Functions
  • Tworzenie subskrypcji zdarzeń usługi Blob Storage w usłudze Event GridCreate a Blob storage event subscription in Event Grid

Przejdź do trzeciej części serii samouczków na temat usługi Storage, aby dowiedzieć się, jak zabezpieczyć dostęp do konta magazynu.Advance to part three of the Storage tutorial series to learn how to secure access to the storage account.