步驟 1：使用 Azure 儲存體在雲端中上傳影像資料

發行項
06/13/2024

本教學課程是一個系列的第一部分。在本教學課程中，您將了解如何部署 Web 應用程式。 Web 應用程式會使用 Azure Blob 儲存體用戶端程式庫將映像上傳至儲存體帳戶。

在系列的第一部分中，您可以執行下列工作：

建立儲存體帳戶
建立容器並設定權限
擷取存取金鑰
將 Web 應用程式部署至 Azure
設定應用程式
與 Web 應用程式互動

必要條件

若要完成此教學課程，您需要 Azure 訂用帳戶。開始之前，請建立免費帳戶。

Azure Cloud Shell

Azure Cloud Shell 是裝載於 Azure 中的互動式殼層環境，可在瀏覽器中使用。您可以使用 Bash 或 PowerShell 搭配 Cloud Shell，與 Azure 服務共同使用。您可以使用 Cloud Shell 預先安裝的命令，執行本文提到的程式碼，而不必在本機環境上安裝任何工具。

要啟動 Azure Cloud Shell：

選項	範例/連結
選取程式碼或命令區塊右上角的 [試試看]。選取 [試試看] 並不會自動將程式碼或命令複製到 Cloud Shell 中。
請前往 https://shell.azure.com，或選取 [啟動 Cloud Shell] 按鈕，在瀏覽器中開啟 Cloud Shell。
選取 Azure 入口網站右上方功能表列上的 [Cloud Shell] 按鈕。

若要使用 Azure Cloud Shell：

啟動 Cloud Shell。
選取程式碼區塊 (或命令區塊) 上的 [複製] 按鈕以複製程式碼或命令。
透過在 Windows 和 Linux 上選取 Ctrl+Shift+V；或在 macOS 上選取 Cmd+Shift+V，將程式碼或命令貼到 Cloud Shell 工作階段中。
選取 Enter 鍵執行程式碼或命令。

建立資源群組

重要

在本教學課程的第 2 步中，您會使用 Azure 事件方格搭配您在此步驟中建立的 Blob 記憶體。在支援事件方格的 Azure 區域中建立儲存體帳戶。如需支援的區域清單，請參閱不同區域的 Azure 產品。

Azure CLI
PowerShell

在 Azure Cloud Shell 中，如果尚未選取左上角的 [Bash]，請加以選取。
使用 az group create 命令來建立資源群組。 Azure 資源群組是在其中部署與管理 Azure 資源的邏輯容器。

注意

為 region 和 rgName (資源群組名稱) 設定適當的值。
```
region="eastus"
rgName="egridtutorialrg"
az group create --name $rgName --location $region
```

在 Azure Cloud Shell 中，如果尚未選取左上角的 [PowerShell]，請加以選取。
使用 New-AzResourceGroup 命令來建立資源群組。 Azure 資源群組是在其中部署與管理 Azure 資源的邏輯容器。

注意

為 region 和 rgName (資源群組名稱) 設定適當的值。
```
$region="eastus"
$rgName="egridtutorialrg"
New-AzResourceGroup -Name $rgName -Location $region
```

建立儲存體帳戶

此範例會將影像上傳至 Azure 儲存體帳戶的 Blob 容器。

Azure CLI
PowerShell

在使用 az storage account create 命令所建立的資源群組中建立儲存體帳戶。

blobStorageAccount="myblobstorage$RANDOM"

az storage account create --name $blobStorageAccount --location $region \
  --resource-group $rgName --sku Standard_LRS --kind StorageV2 --access-tier hot --allow-blob-public-access true

在使用 New-AzStorageAccount 命令來建立的資源群組中，建立儲存體帳戶。記下輸出中顯示的 Azure 儲存體帳戶名稱。

$blobStorageAccount="myblobstorage" + (Get-Random).ToString()
echo $blobStorageAccount
New-AzStorageAccount -ResourceGroupName $rgName -Name $blobStorageAccount -SkuName Standard_LRS -Location $region -Kind StorageV2 -AccessTier Hot -AllowBlobPublicAccess $true

建立 Blob 儲存體容器

應用程式在 Blob 儲存體帳戶中使用兩個容器。應用程式會將高解析度的影像上傳到 [影像] 容器。在系列的第二步中，Azure 函式應用程式會將已調整大小的映像縮圖上傳到 [縮圖] 容器。

images 容器的公用存取設為 off。 thumbnails 容器的公用存取設為 container。 container 公用存取設定允許使用者瀏覽網頁來檢視縮圖。

Azure CLI
PowerShell

使用 az storage account keys list 命令取得儲存體帳戶金鑰。接著，使用此金鑰透過 az storage container create 命令來建立兩個容器。

blobStorageAccountKey=$(az storage account keys list -g $rgName \
  -n $blobStorageAccount --query "[0].value" --output tsv)

az storage container create --name images \
  --account-name $blobStorageAccount \
  --account-key $blobStorageAccountKey

az storage container create --name thumbnails \
  --account-name $blobStorageAccount \
  --account-key $blobStorageAccountKey --public-access container

使用 Get-AzStorageAccountKey 命令取得儲存體帳戶金鑰。接著，使用此金鑰透過 New-AzStorageContainer 命令來建立兩個容器。

$blobStorageAccountKey = ((Get-AzStorageAccountKey -ResourceGroupName $rgName -Name $blobStorageAccount)| Where-Object {$_.KeyName -eq "key1"}).Value
$blobStorageContext = New-AzStorageContext -StorageAccountName $blobStorageAccount -StorageAccountKey $blobStorageAccountKey

New-AzStorageContainer -Name images -Context $blobStorageContext
New-AzStorageContainer -Name thumbnails -Permission Container -Context $blobStorageContext

範例應用程式會使用儲存體帳戶的名稱和存取金鑰來連線到儲存體帳戶。

建立 App Service 方案

App Service 方案會指定用來裝載應用程式的 Web 伺服器陣列位置、大小和功能。下列範例會在免費定價層中建立名為 myAppServicePlan 的 App Service 方案。

Azure CLI
PowerShell

使用 az appservice plan create 命令來建立 App Service 方案。

planName="MyAppServicePlan"
az appservice plan create --name $planName --resource-group $rgName --sku Free

使用 New-AzAppServicePlan 命令建立App Service方案。

$planName="MyAppServicePlan"
New-AzAppServicePlan -ResourceGroupName $rgName -Name $planName -Tier "Free" -Location $region

建立 Web 應用程式

Web 應用程式提供裝載範例應用程式程式碼的空間，此程式碼是從 GitHub 範例存放庫部署。

Azure CLI
PowerShell

使用 az webapp create 命令，在 myAppServicePlan App Service 方案中建立 Web 應用程式。

webapp="mywebapp$RANDOM"

az webapp create --name $webapp --resource-group $rgName --plan $planName

使用 New-AzWebApp 命令，在應用程式服務方案中建立 Web 應用程式。記下 Web 應用程式名稱。 Web 應用程式的預設 URL 是 https://<web_app>.azurewebsites.net。

$webapp="MyWebApp" + (Get-Random).ToString()
echo $webapp
New-AzWebApp -ResourceGroupName $rgName -Name $webapp -AppServicePlan $planName

從 GitHub 存放庫部署範例應用程式

應用程式服務支援數種將內容部署至 Web 應用程式的方法。在本教學課程中，您會從公用 GitHub 範例存放庫部署 Web 應用程式。使用 az webapp deployment source config 命令設定 Web 應用程式的 GitHub 部署。

範例專案包含 ASP.NET MVC 應用程式。此應用程式可接受映像、將它儲存到儲存體帳戶，顯示縮圖容器中的映像。 Web 應用程式會使用 Azure.Storage、Azure.Storage.Blobs和 Azure.Storage.Blobs.Models 命名空間與 Azure 儲存體服務互動。

Azure CLI
PowerShell

az webapp deployment source config --name $webapp --resource-group $rgName \
  --branch master --manual-integration \
  --repo-url https://github.com/Azure-Samples/storage-blob-upload-from-webapp

az webapp deployment source config --name $webapp --resource-group $rgName `
  --branch master --manual-integration `
  --repo-url https://github.com/Azure-Samples/storage-blob-upload-from-webapp

設定 Web 應用程式設定

範例 Web 應用程式會使用適用於 .NET 的 Azure 儲存體 API 來上傳映像。儲存體帳戶認證是在 Web 應用程式的應用程式設定中設定。使用 az webapp config appsettings set 或 New-AzStaticWebAppSetting 命令，將應用程式設定新增至已部署的應用程式。

Azure CLI
PowerShell

az webapp config appsettings set --name $webapp --resource-group $rgName \
  --settings AzureStorageConfig__AccountName=$blobStorageAccount \
    AzureStorageConfig__ImageContainer=images \
    AzureStorageConfig__ThumbnailContainer=thumbnails \
    AzureStorageConfig__AccountKey=$blobStorageAccountKey

Set-AzWebApp -ResourceGroupName $rgName -Name $webapp -AppSettings `
  @{ `
    'AzureStorageConfig__AccountName' = $blobStorageAccount; `
    'AzureStorageConfig__ImageContainer' = 'images'; `
    'AzureStorageConfig__ThumbnailContainer' = 'thumbnails'; `
    'AzureStorageConfig__AccountKey' = $blobStorageAccountKey `
  }

部署及設定 Web 應用程式之後，您可以在應用程式中測試映像上傳功能。

上傳影像

若要測試 Web 應用程式，請瀏覽至已發佈應用程式的 URL。 Web 應用程式的預設 URL 是 https://<web_app>.azurewebsites.net。接著選取 [上傳相片] 區域以指定並上傳檔案，或將檔案拖曳到區域。如果上傳成功，影像就會消失。 [產生的縮圖] 區段就會維持空白，直到我們稍後在本教學課程中完成測試。

注意

執行下列命令以取得 Web 應用程式的名稱：echo $webapp

在影像重設大小器 .NET 應用程式中上傳相片的頁面螢幕快照。

在範例程式碼中，Storagehelper.cs 檔案中的 UploadFileToStorage 工作，可供使用 UploadAsync 方法將映像上傳至儲存體帳戶內的 images 容器。下列程式碼範例包含 UploadFileToStorage 工作。

public static async Task<bool> UploadFileToStorage(Stream fileStream, string fileName,
                                                    AzureStorageConfig _storageConfig)
{
    // Create a URI to the blob
    Uri blobUri = new Uri("https://" +
                          _storageConfig.AccountName +
                          ".blob.core.windows.net/" +
                          _storageConfig.ImageContainer +
                          "/" + fileName);

    // Create StorageSharedKeyCredentials object by reading
    // the values from the configuration (appsettings.json)
    StorageSharedKeyCredential storageCredentials =
        new StorageSharedKeyCredential(_storageConfig.AccountName, _storageConfig.AccountKey);

    // Create the blob client.
    BlobClient blobClient = new BlobClient(blobUri, storageCredentials);

    // Upload the file
    await blobClient.UploadAsync(fileStream);

    return await Task.FromResult(true);
}

以下是前面工作中使用的類別和方法：

類別	方法
URI	Uri 建構函式
StorageSharedKeyCredential	StorageSharedKeyCredential(String, String) 建構函式
BlobClient	UploadAsync

確定影像顯示在儲存體帳戶中

登入 Azure 入口網站。從左側的功能表中選取 [儲存體帳戶]，然後選取您的儲存體帳戶名稱。

注意

執行下列命令以取得儲存體帳戶的名稱：echo $blobStorageAccount。
在左側功能表上的 [資料儲存區] 區段中，選取 [容器]。
選取 [映像] Blob 容器。
確認影像顯示在容器中。

測試縮圖檢視

若要測試縮圖檢視，您要將映像上傳至 thumbnails 容器，以檢查應用程式是否可讀取 thumbnails 容器。

登入 Azure 入口網站。從左側的功能表中選取 [儲存體帳戶]，然後選取您的儲存體帳戶名稱。選取 [容器]，然後選取縮圖容器。選取 [上傳] 開啟 [上傳 Blob] 窗格。
使用檔案選擇器選擇檔案，並選取 [上傳]。
巡覽回您的應用程式，確認可以看到上傳至 [縮圖] 容器的影像。
在本系列的第二部分，您會自動建立縮圖映像，因此您不需要此映像。在 [縮圖] 容器中，選取您上傳的影像，然後選取 [刪除] 來移除影像。

下一步

使用事件格線觸發 Azure 函式以調整上傳的影像大小

共用方式為