手順 1: Azure Storage を使用してクラウドに画像データをアップロードする

[アーティクル]
05/25/2023

このチュートリアルは、シリーズの第 1 部です。このチュートリアルでは、Web アプリをデプロイする方法について説明します。この Web アプリでは、Azure Blob Storage クライアントライブラリを使用してストレージアカウントに画像をアップロードします。

シリーズのパート 1 では、次のタスクを実行します。

ストレージアカウントの作成
コンテナーを作成し、アクセス許可を設定する
アクセスキーを取得する
Web アプリを Azure にデプロイする
アプリケーションの設定の構成
Web アプリと対話する

前提条件

このチュートリアルを完了するには、Azure サブスクリプションが必要です。始める前に、無料アカウントを作成します。

Azure Cloud Shell

Azure では、ブラウザーを介して使用できる対話型のシェル環境、Azure Cloud Shell がホストされています。 Cloud Shell で Bash または PowerShell を使用して、Azure サービスを操作できます。ローカル環境に何もインストールしなくても、Cloud Shell にプレインストールされているコマンドを使用して、この記事のコードを実行できます。

Azure Cloud Shell を開始するには、以下のようにします。

オプション	例とリンク
コードまたはコマンドブロックの右上隅にある [使ってみる] を選択します。 [使ってみる] を選択しても、コードまたはコマンドは Cloud Shell に自動的にはコピーされません。
https://shell.azure.com に移動するか、[Cloud Shell を起動する] ボタンを選択して、ブラウザーで Cloud Shell を開きます。
Azure portal の右上にあるメニューバーの [Cloud Shell] ボタンを選択します。

Azure Cloud Shell を使用するには、以下のようにします。

Cloud Shell を開始します。
コードブロック (またはコマンドブロック) の [コピー] ボタンを選択し、コードまたはコマンドをコピーします。
Windows と Linux では Ctrl+Shift+V キーを選択し、macOS では Cmd+Shift+V キーを選択して、コードまたはコマンドを Cloud Shell セッションに貼り付けます。
Enter キーを選択して、コードまたはコマンドを実行します。

リソースグループを作成する

重要

チュートリアルの手順 2 では、この手順で作成した BLOB ストレージで Azure Event Grid を使用します。 Event Grid がサポートされている 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 Storage アカウント名をメモします。

$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 ストレージアカウント内の 2 つのコンテナーを使用します。 "images" コンテナーは、アプリが高解像度のイメージをアップロードする場所です。このシリーズの 2 番目の手順で、Azure 関数アプリで、サイズ変更した画像を thumbnails コンテナーにアップロードします。

images コンテナーのパブリックアクセスは、off に設定されています。 thumbnails コンテナーのパブリックアクセスは、container に設定されています。 container パブリックアクセスに設定すると、Web ページにアクセスしたユーザーはサムネイルを表示できます。

Azure CLI
PowerShell

az storage account keys list コマンドを使用して、ストレージアカウントキーを取得します。次に、このキーを使用して、az storage container create コマンドで 2 つのコンテナーを作成します。

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 コマンドで 2 つのコンテナーを作成します。

$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 サーバーファームの場所、サイズ、機能を規定します。次の例では、Free 価格レベルの 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 コマンドを使って、myAppServicePlanApp Service プランに Web アプリを作成します。

webapp="mywebapp$RANDOM"

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

New-AzWebApp コマンドで App Service プラン内に 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 リポジトリからサンプルアプリをデプロイする

App Service は、コンテンツを Web アプリにデプロイするさまざまな方法をサポートしています。このチュートリアルでは、パブリック GitHub サンプルリポジトリから Web アプリをデプロイします。 az webapp deployment source config コマンドを使用して、Web アプリへの GitHub のデプロイを構成します。

サンプルプロジェクトには、ASP.NET MVC アプリが含まれています。そのアプリは、画像を受け取り、ストレージアカウントに保存して、サムネイルコンテナーから画像を表示します。 Web アプリは、Azure.Storage、Azure.Storage.Blobs、および Azure.Storage.Blobs.Models 名前空間を使用して、Azure Storage サービスと対話します。

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 Storage 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 です。次に、[写真のアップロード] 領域を選択し、ファイルを指定してアップロードするか、ファイルを領域にドラッグします。正常にアップロードされると、画像は表示されなくなります。 [Generated Thumbnails] セクションは、後でこのチュートリアルの中でテストするまで空のままになります。

注意

次のコマンドを実行し、Web アプリの名前 (echo $webapp) を取得します。

Screenshot of the page to upload photos in the Image Resizer .NET app.

サンプルコードでは、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);
}

上のタスクでは、次のクラスとメソッドが使用されています。

クラス	Method
Uri	Uri コンストラクター
StorageSharedKeyCredential	StorageSharedKeyCredential (String, String) コンストラクター
BlobClient	UploadAsync

ストレージアカウント内に画像が表示されることを確認する

Azure portal にサインインします。左側のメニューから [ストレージアカウント] を選択し、ストレージアカウントの名前を選択します。

注意

ストレージアカウントの名前を取得するには、echo $blobStorageAccount を実行します。
左側のメニューの [データストレージ] セクションで、[コンテナー] を選択します。
イメージ BLOB コンテナーを選択します。
コンテナー内に画像が表示されることを確認します。

サムネイルの表示をテストする

サムネイルの表示をテストするには、thumbnails コンテナーに画像をアップロードして、アプリが thumbnails コンテナーを読み取れることを確認します。

Azure portal にサインインします。左側のメニューから [ストレージアカウント] を選択し、ストレージアカウントの名前を選択します。 [コンテナー] を選択し、 [サムネイル] コンテナーを選択します。 [アップロード] を選択して [BLOB のアップロード] ウィンドウを開きます。
ファイルピッカーでファイルを選択し、 [アップロード] を選択します。
アプリに戻って、thumbnails コンテナーにアップロードした画像が表示されていることを確認します。
シリーズの第 2 部では、サムネイル画像の作成を自動化して、この画像が必要ないようにします。 thumbnails コンテナーで、アップロードした画像を選択し、 [削除] を選択して画像を削除します。

次の手順

イベントグリッドを使用して画像のサイズを変更する Azure 関数をトリガーする

Share via

手順 1: Azure Storage を使用してクラウドに画像データをアップロードする

前提条件

Azure Cloud Shell

リソースグループを作成する

ストレージアカウントの作成

BLOB ストレージコンテナーを作成する

App Service プランを作成する

Web アプリを作成する

GitHub リポジトリからサンプルアプリをデプロイする

Web アプリの設定を構成する

イメージをアップロードする

ストレージアカウント内に画像が表示されることを確認する

サムネイルの表示をテストする

次の手順

その他のリソース

Share via

手順 1: Azure Storage を使用してクラウドに画像データをアップロードする

前提条件

Azure Cloud Shell

リソース グループを作成する

ストレージ アカウントの作成

BLOB ストレージ コンテナーを作成する

App Service プランを作成する

Web アプリを作成する

GitHub リポジトリからサンプル アプリをデプロイする

Web アプリの設定を構成する

イメージをアップロードする

ストレージ アカウント内に画像が表示されることを確認する

サムネイルの表示をテストする

次の手順

その他のリソース

リソースグループを作成する

ストレージアカウントの作成

BLOB ストレージコンテナーを作成する

GitHub リポジトリからサンプルアプリをデプロイする

ストレージアカウント内に画像が表示されることを確認する