教學課程j步驟 2：使用事件方格自動調整已上傳映像的大小

本教學課程延伸使用 Azure 儲存體在雲端中上傳影像資料教學課程的內容，說明使用 Azure 事件方格和 Azure Functions 來新增無伺服器自動縮圖產生功能。 以下是概略的工作流程：

在本教學課程中，您會執行下列步驟：

• 建立 Azure 儲存體帳戶
• 建立、設定及部署函數應用程式
• 建立儲存體事件的事件訂用帳戶
• 測試範例應用程式

必要條件

完成本教學課程：

• 您需要 Azure 訂用帳戶。 本教學課程不適用於免費訂用帳戶。
• 您必須先完成上一個 Blob 儲存體教學課程：使用 Azure 儲存體上傳雲端中的映像資料。

建立 Azure 儲存體帳戶

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       

建立函式應用程式

您必須擁有函式應用程式以便主控函式的執行。 函式應用程式會提供環境來讓您的函式程式碼進行無伺服器執行。 在下列命令中，請提供您自己的唯一函式應用程式名稱。 函式應用程式會作為函式應用程式的預設 DNS 網域，所以此名稱在 Azure 的所有應用程式中都必須是唯一的名稱。 指定要建立的函式應用程式名稱，然後建立 Azure 函式。

Azure CLI

使用 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 儲存體帳戶。

設定函式應用程式

此函式需要 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 設定會讓函式應用程式在 2.x 版的 Azure Functions 執行階段上執行。 您現在可以將函式程式碼專案部署到此函式應用程式。

部署函式程式碼

範例 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 儲存體獲取上傳的映像。 此函式會產生縮圖映像，並將產生的串流寫入 Blob 儲存體中的個別容器。

此專案使用 EventGridTrigger 作為觸發程序類型。 建議透過一般 HTTP 觸發程序使用 Event Grid 觸發程序。 Event Grid 會自動驗證 Event Grid 函式的觸發程序。 若要使用 HTTP 觸發程序，您必須實作驗證回應。

若要深入了解此函式，請參閱 function.json 和 run.csx 檔案。

函式專案程式碼會直接從公用範例存放庫部署。 若要深入了解 Azure Functions 的部署選項，請參閱Azure Functions 的持續部署。

建立事件訂閱

事件訂閱表示您想要傳送至特定端點之提供者產生的事件。 在此情況下，端點會由函式公開。 使用下列步驟，在 Azure 入口網站中建立事件訂閱，以傳送通知給您的函式：

1. 在 Azure 入口網站中，於頁面頂端搜尋並選取 Function App，然後選擇您建立的函式應用程式。 選取 [函式]，然後選擇 [縮圖] 函式。

   

2. 選取 [整合]，然後選擇 [事件方格觸發程式]並選取 [建立事件方格訂用帳戶]。

   

3. 使用表格中指定的事件訂閱設定。

   

   設定	建議的值	名描述
   名稱	imageresizersub	用以識別新事件訂閱的名稱。
   主題類型	儲存體帳戶	選擇儲存體帳戶事件提供者。
   訂用帳戶	您的 Azure 訂用帳戶	預設會選取您目前的 Azure 訂用帳戶。
   資源群組	myResourceGroup	選取 [使用現有]，並選擇您在本教學課程中一直使用的資源群組。
   資源	您的 Blob 儲存體帳戶	選擇儲存映像的 Blob 儲存體帳戶，而不是 Azure 函數應用程式所使用的儲存體帳戶。
   系統主題名稱	imagestoragesystopic	指定系統主題的名稱。 若要了解系統主題，請參閱系統主題概觀。
   事件類型	已建立 Blob	取消勾選 [已建立 Blob] 以外的所有類型。 只有 Microsoft.Storage.BlobCreated 的事件類型會傳遞至函式。
   端點類型	自動產生	預先定義為 Azure 函式。
   端點	自動產生	函式的名稱。 在此案例中，此名稱為縮圖。

4. 切換至 [篩選條件] 索引標籤，並執行下列動作：

   1. 選取 [啟用主旨篩選] 選項。

   2. 針對 [主旨開頭]，輸入下列值：/blobServices/default/containers/images/。

      

5. 選取 [建立]，新增事件訂閱以建立事件訂用帳戶，設為有 Blob 新增至 Thumbnail 容器時就觸發 images 函式。 此函式會調整映像大小，並將其新增至 thumbnails 容器。

既然已設定了後端服務，您可以在範例 Web 應用程式中測試映像調整大小功能。

測試範例應用程式

若要在 Web 應用程式中測試映像調整大小，請瀏覽至已發佈應用程式的 URL。 Web 應用程式的預設 URL 是 https://<web_app>.azurewebsites.net。

選取 [上傳相片] 以選取並上傳檔案。 您也可以將相片拖曳到此區域。

請注意，上傳的映像消失之後，上傳映像的複本會顯示在 [產生縮圖] 浮動切換中。 此映像已由函式調整大小、新增至 thumbnails 容器，並由 Web 用戶端下載。

下一步

請參閱目錄 (TOC) 中 [教學課程] 區段的教學課程。