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

このチュートリアルでは、「Azure Storage を使用してクラウドに画像データをアップロードする」チュートリアルを拡張して、Azure Event Grid と Azure Functions を使用するサーバーレス自動サムネイル生成機能を追加します。 大まかなワークフローを次に示します。

このチュートリアルでは、次の手順を実行します。

• Azure Storage アカウントの作成
• 関数アプリを作成、構成、デプロイする
• ストレージ イベントのイベント サブスクリプションを作成する
• サンプル アプリをテストする

前提条件

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

• Azure サブスクリプションが必要です。 このチュートリアルでは、無料のサブスクリプションは使用できません。
• 前の Blob ストレージのチュートリアル「Azure Storage を使用してクラウドに画像データをアップロードする」を完了している必要があります。

Azure Storage アカウントの作成

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

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

Azure CLI

az storage account create コマンドを使用します。

注意

Cloud Shell の Bash シェルでは、次のコマンドを使用します。 必要に応じて、Cloud Shell の左上隅にあるドロップダウン リストを使用して、Bash シェルに切り替えます。

次のコマンドを実行して、Azure ストレージ アカウントを作成します。

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

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

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

Function App を作成する

関数の実行環境をホストするには Function App が必要です。 Function App は、関数コードのサーバーレスの実行環境を提供します。 以下のコマンドには、実際に使用する一意の関数アプリ名を使用してください。 この関数アプリ名は、関数アプリの既定の DNS ドメインとして使用されます。そのため、名前は Azure のすべてのアプリ間で一意である必要があります。 作成する関数アプリの名前を指定し、Azure 関数を作成します。

Azure CLI

Function App の作成には、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

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

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

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

Function App を構成する

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

Azure CLI

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

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 $rgName --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 関数を選択します。

   

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

   

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

   

   設定	推奨値	説明
   名前	imageresizersub	新しいイベント サブスクリプションを示す名前。
   トピックの種類	ストレージ アカウント	ストレージ アカウント イベント プロバイダーを選びます。
   サブスクリプション	お使いの Azure サブスクリプション	既定では、現在の Azure サブスクリプションが選択されています。
   リソース グループ	myResourceGroup	[既存のものを使用] を選び、このチュートリアルで使っているリソース グループを選びます。
   リソース	お使いの BLOB ストレージ アカウント	Azure 関数アプリで使用されるものではなく、画像が格納されている BLOB ストレージ アカウントを選択します。
   [システム トピック名]	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 です。

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

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

次のステップ

目次 (TOC) の「チュートリアル」セクションにある他のチュートリアルを参照してください。