チュートリアル:Event Grid を使用して、アップロードされたイメージのサイズ変更を自動化する

Azure Event Grid は、クラウドのイベント処理サービスです。 Event Grid を使うと、Azure サービスまたはサード パーティのリソースによって生成されるイベントのサブスクリプションを作成できます。

このチュートリアルは、ストレージ チュートリアル シリーズの第 2 部です。 前のストレージ チュートリアルに、Azure Event Grid と Azure Functions を使うサーバーレスの自動サムネイル生成機能を追加します。 Event Grid により、Azure FunctionsAzure Blob Storage のイベントに応答して、アップロードされたイメージのサムネイルを生成できます。 Blob Storage の作成イベントに対して、イベント サブスクリプションが作成されます。 特定の Blob Storage コンテナーに BLOB が追加されると、関数エンドポイントが呼び出されます。 Event Grid から関数バインドに渡されたデータが、BLOB へのアクセスとサムネイル イメージの生成に使われます。

既存のイメージ アップロード アプリにサイズ変更機能を追加するには、Azure CLI と Azure Portal を使います。

このチュートリアルでは、以下の内容を学習します。

  • Azure Storage アカウントの作成
  • Azure Functions を使ってサーバーレス コードをデプロイします
  • Event Grid で Blob Storage のイベント サブスクリプションを作成します

前提条件

注意

この記事では、Azure と対話するために推奨される PowerShell モジュールである Azure Az PowerShell モジュールを使用します。 Az PowerShell モジュールの使用を開始するには、「Azure PowerShell をインストールする」を参照してください。 Az PowerShell モジュールに移行する方法については、「AzureRM から Az への Azure PowerShell の移行」を参照してください。

このチュートリアルを完了するには、以下が必要です。

Azure Storage アカウントの作成

Azure Functions には、一般的なストレージ アカウントが必要です。 前のチュートリアルで作成した BLOB ストレージ アカウントに加え、リソース グループ内に一般的なストレージ アカウントを別に作成します。 ストレージ アカウント名の長さは 3 から 24 文字である必要があり、数字と小文字のみを使用できます。

前のチュートリアルで作成したリソース グループの名前、作成するリソースの場所、Azure Functions に必要な新しいストレージ アカウントの名前を保持する変数を設定します。 その後に、Azure 関数用のストレージ アカウントを作成します。

New-AzStorageAccount コマンドを使用します。

  1. リソース グループの名前を指定します。

    $resourceGroupName="myResourceGroup"
    
  2. ストレージ アカウントの場所を指定します。

    $location="eastus"    
    
  3. 関数によって使用されるストレージ アカウントの名前を指定します。

    $functionstorage="<name of the storage account to be used by the function>"    
    
  4. ストレージ アカウントを作成します。

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

Function App を作成する

関数の実行環境をホストするには Function App が必要です。 Function App は、関数コードのサーバーレスの実行環境を提供します。

以下のコマンドには、実際に使用する一意の関数アプリ名を使用してください。 この関数アプリ名は、関数アプリの既定の DNS ドメインとして使用されます。そのため、名前は Azure のすべてのアプリ間で一意である必要があります。

作成する関数アプリの名前を指定し、Azure 関数を作成します。

関数アプリの作成には、New-AzFunctionApp コマンドを使用します。

  1. 関数アプリの名前を指定します。

    $functionapp="<name of the function app>"    
    
  2. 関数アプリを作成します。

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

ここで、前のチュートリアルで作成した BLOB ストレージ アカウントに接続するように関数アプリを構成します。

Function App を構成する

関数には、BLOB ストレージ アカウントの資格情報が必要となります。これを関数アプリのアプリケーション設定に追加するには、az functionapp config appsettings set または Update-AzFunctionAppSetting の各コマンドを使用します。

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'}

FUNCTIONS_EXTENSION_VERSION=~2 設定によって、関数アプリは Azure Functions ランタイムのバージョン 2.x で動作するようになります。

この Function App に関数コード プロジェクトをデプロイできるようになります。

関数コードをデプロイする

C# のサイズ変更関数のサンプルは、GitHub で入手できます。 az functionapp deployment source config コマンドを使って、このコード プロジェクトを関数アプリにデプロイします。

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

イメージのサイズ変更関数は、Event Grid サービスからその関数に送信される HTTP 要求によってトリガーされます。 Event Grid には、イベントのサブスクリプションを作成して関数の URL でこれらの通知を取得することを指示します。 このチュートリアルでは、BLOB によって作成されたイベントをサブスクライブします。

Event Grid の通知から関数に渡されるデータには、BLOB の URL が含まれます。 その URL は、Blob Storage からアップロードされたイメージを取得するために入力バインドに渡されます。 関数はサムネイル イメージを生成し、結果のストリームを Blob Storage 内の別のコンテナーに書き込みます。

このプロジェクトでは、トリガーの種類として EventGridTrigger が使用されています。 汎用の HTTP トリガーよりも Event Grid トリガーを使用することをお勧めします。 Event Grid では、Event Grid 関数トリガーが自動的に検証されます。 汎用 HTTP トリガーの場合は、検証応答を実装する必要があります。

この関数の詳細については、function.json ファイルと run.csx ファイルを参照してください。

関数プロジェクトのコードは、パブリック サンプル リポジトリから直接デプロイされます。 Azure Functions のデプロイ オプションについて詳しくは、「Azure Functions の継続的なデプロイ」をご覧ください。

イベント サブスクリプションの作成

イベント サブスクリプションは、どのプロバイダー生成イベントを特定のエンドポイントに送信するかを示します。 この場合、エンドポイントは関数によって公開されます。 Azure Portal で関数に通知を送信するイベント サブスクリプションを作成するには、次の手順に従います。

  1. Azure portal のページの上部で Function App を検索して選択し、先ほど作成した関数アプリを選択します。 [関数] を選択し、Thumbnail 関数を選択します。

    ポータルで Thumbnail 関数を選択する

  2. [統合] を選択し、 [イベント グリッド トリガー] を選択して、 [Event Grid サブスクリプションの作成] を選択します。

    Azure portal で [Event Grid サブスクリプションの追加] に移動する

  3. 次の表で指定されているようにイベント サブスクリプションを設定します。

    Azure Portal で関数からイベント サブスクリプションを作成する

    設定 推奨値 説明
    名前 imageresizersub 新しいイベント サブスクリプションを示す名前。
    トピックの種類 ストレージ アカウント ストレージ アカウント イベント プロバイダーを選びます。
    サブスクリプション お使いの Azure サブスクリプション 既定では、現在の Azure サブスクリプションが選択されています。
    リソース グループ myResourceGroup [既存のものを使用] を選び、このチュートリアルで使っているリソース グループを選びます。
    リソース お使いの BLOB ストレージ アカウント 作成した Blob Storage アカウントを選びます。
    [システム トピック名] imagestoragesystopic システム トピックの名前を指定します。 システム トピックについては、システム トピックの概要に関するページを参照してください。
    イベントの種類 Blob created (作成された BLOB) [Blob created](作成された BLOB) 以外のすべての種類をオフにします。 Microsoft.Storage.BlobCreated のイベントの種類のみが関数に渡されます。
    [エンドポイントの種類] 自動生成 Azure Function としてあらかじめ定義されています。
    エンドポイント 自動生成 関数の名前です。 この場合は、Thumbnail です。
  4. [フィルター] タブに切り替えて、次のアクションを実行します。

    1. [サブジェクト フィルタリングを有効にする] オプションを選択します。

    2. [次で始まるサブジェクト] には、「 /blobServices/default/containers/images/ 」と入力します。

      イベント サブスクリプションのフィルターを指定する

  5. [作成] を選択して、イベント サブスクリプションを追加します。 これにより、BLOB が images コンテナーに追加されたときに Thumbnail 関数をトリガーするイベント サブスクリプションが作成されます。 この関数により、イメージはサイズが変更されて、thumbnails コンテナーに追加されます。

バックエンド サービスの構成が済んだので、サンプル Web アプリでイメージ サイズ変更の機能をテストします。

サンプル アプリをテストする

Web アプリでイメージのサイズ変更をテストするには、公開したアプリの URL を参照します。 Web アプリの既定の URL は、https://<web_app>.azurewebsites.net です。

[Upload photos] 領域をクリックし、ファイルを選んでアップロードします。 この領域に写真をドラッグしてもかまいません。

アップロードされたイメージが消えた後、アップロードされたイメージのコピーが [Generated Thumbnails] 領域に表示されることを確認します。 この画像は、関数によってサイズが変更され、thumbnails コンテナーに追加された後、Web クライアントによってダウンロードされたものです。

ブラウザーでの発行済みの "ImageResizer" というタイトルの Web アプリ (.NET v12 SDK 用) を示すスクリーンショット。

次のステップ

このチュートリアルでは、以下の内容を学習しました。

  • 通常の Azure ストレージ アカウントの作成
  • Azure Functions を使ってサーバーレス コードをデプロイします
  • Event Grid で Blob Storage のイベント サブスクリプションを作成します

ストレージ チュートリアル シリーズの第 3 部に進み、ストレージ アカウントへのアクセスをセキュリティで保護する方法について学習します。