チュートリアル:Azure Storage を使用してクラウドに画像データをアップロードする

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

シリーズの第 1 部で学習する内容は次のとおりです。

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

前提条件

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

Azure Cloud Shell を使用する

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

Azure Cloud Shell を開始するには:

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

Azure Cloud Shell でこの記事のコードを実行するには:

  1. Cloud Shell を開始します。

  2. [コピー] ボタンを選択して、コード ブロックをコードにコピーします。

  3. Windows と Linux では Ctrl+Shift+V キーを選択し、macOS では Cmd+Shift+V キーを選択して、コードを Cloud Shell セッションに貼り付けます。

  4. Enter キーを選択して、コードを実行します。

CLI をローカルにインストールして使用する場合は、Azure CLI バージョン 2.0.4 以降を実行してください。 バージョンを確認するには、az --version を実行します。 インストールまたはアップグレードが必要な場合は、Azure CLI のインストールに関するページを参照してください。

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

次の例では、myResourceGroup という名前のリソース グループを作成します。

New-AzResourceGroup コマンドでリソース グループを作成します。 Azure リソース グループとは、Azure リソースのデプロイと管理に使用する論理コンテナーです。

New-AzResourceGroup -Name myResourceGroup -Location southeastasia

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

サンプルでは、Azure ストレージ アカウント内の BLOB コンテナーに画像をアップロードします。 ストレージ アカウントは、Azure Storage データ オブジェクトを格納してアクセスするための一意の名前空間を用意します。

重要

このチュートリアルの第 2 部では、BLOB ストレージで Azure Event Grid を使用します。 Event Grid がサポートされている Azure リージョンにストレージ アカウントを作成してください。 サポートされているリージョンの一覧は、リージョン別の Azure 製品に関するページをご覧ください。

次のコマンドの <blob_storage_account> プレースホルダーを、BLOB ストレージ アカウントのグローバルな一意の名前に置き換えます。

New-AzStorageAccount コマンドを使用して作成されたリソース グループ内に、ストレージ アカウントを作成します。

$blobStorageAccount="<blob_storage_account>"

New-AzStorageAccount -ResourceGroupName myResourceGroup -Name $blobStorageAccount -SkuName Standard_LRS -Location southeastasia -Kind StorageV2 -AccessTier Hot

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

アプリでは、BLOB ストレージ アカウント内の 2 つのコンテナーを使用します。 コンテナーはフォルダーに似ており、BLOB を格納します。 "images" コンテナーは、アプリが高解像度のイメージをアップロードする場所です。 このシリーズの後半では、サイズ変更した画像を *thumbnails に Azure 関数アプリでアップロードします

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

Get-AzStorageAccountKey コマンドを使用してストレージ アカウント キーを取得します。 次に、このキーを使用し、New-AzStorageContainer コマンドで 2 つのコンテナーを作成します。

$blobStorageAccountKey = (Get-AzStorageAccountKey -ResourceGroupName myResourceGroup -Name $blobStorageAccount).Key1
$blobStorageContext = New-AzStorageContext -StorageAccountName $blobStorageAccount -StorageAccountKey $blobStorageAccountKey

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

BLOB ストレージ アカウント名とキーをメモしておきます。 サンプル アプリでは、これらの設定を使用して、画像をアップロードするストレージ アカウントに接続します。

App Service プランを作成する

App Service プランは、アプリのホストとなる Web サーバー ファームの場所、サイズ、機能を規定します。

次の例では、Free 価格レベルの myAppServicePlan という名前の App Service プランを作成します。

New-AzAppServicePlan コマンドで App Service プランを作成します。

New-AzAppServicePlan -ResourceGroupName myResourceGroup -Name myAppServicePlan -Tier "Free"

Web アプリを作成する

Web アプリでは、GitHub サンプル リポジトリからデプロイされるサンプル アプリ コード用のホスト領域を提供します。

次のコマンドで、<web_app> を一意の名前に置き換えます。 有効な文字は、a-z0-9、および - です。 <web_app> が一意でない場合は、"指定された名前 <web_app> の Web サイトは既に存在します" というエラー メッセージが表示されます。 Web アプリの既定の URL は、https://<web_app>.azurewebsites.net です。

New-AzWebApp コマンドで myAppServicePlan App Service プラン内に Web アプリを作成します。

$webapp="<web_app>"

New-AzWebApp -ResourceGroupName myResourceGroup -Name $webapp -AppServicePlan myAppServicePlan

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

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

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

az webapp deployment source config --name $webapp --resource-group myResourceGroup \
  --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 myResourceGroup `
  --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 コマンドを使用し、デプロイされるアプリにアプリ設定を追加します。

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

Web アプリのデプロイと構成が済むと、アプリで画像のアップロード機能をテストできます。

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

Web アプリをテストするには、発行したアプリの URL に移動します。 Web アプリの既定の URL は、https://<web_app>.azurewebsites.net です。

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

.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);
}

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

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

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

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

コンテナー内に画像が表示されることを確認します。

Azure portal の画像コンテナーの表示

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

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

Azure portal にサインインします。 左側のメニューから [ストレージ アカウント] を選択し、ストレージ アカウントの名前を選択します。 [コンテナー] を選択し、 [サムネイル] コンテナーを選択します。 [アップロード] を選択して [BLOB のアップロード] ウィンドウを開きます。

ファイル ピッカーでファイルを選択し、 [アップロード] を選択します。

アプリに戻って、thumbnails コンテナーにアップロードした画像が表示されていることを確認します。

シリーズの第 2 部では、サムネイル画像の作成を自動化して、この画像が必要ないようにします。 thumbnails コンテナーで、アップロードした画像を選択し、 [削除] を選択して画像を削除します。

Content Delivery Network (CDN) を有効にして、Azure ストレージ アカウントからのコンテンツをキャッシュすることができます。 詳しくは、「Azure ストレージ アカウントと Azure CDN との統合」をご覧ください。

次のステップ

シリーズの第 1 部では、ストレージと対話するように Web アプリを構成する方法について学習しました。

シリーズの第 2 部に進み、Event Grid を使用して画像のサイズを変更する Azure 関数をトリガーする方法を学習してください。