チュートリアル: Azure Storage を使用してクラウドに画像データをアップロードするTutorial: Upload image data in the cloud with Azure Storage

このチュートリアルは、シリーズの第 1 部です。This tutorial is part one of a series. このチュートリアルでは、Azure Storage クライアント ライブラリを使用してストレージ アカウントに画像をアップロードする Web アプリのデプロイ方法を学習します。In this tutorial, you will learn how to deploy a web app that uses the Azure Storage Client Library to upload images to a storage account. 終了すると、Azure Storage に画像を格納して表示する Web アプリが完成します。When you're finished, you'll have a web app that stores and displays images from Azure storage.

シリーズの第 1 部で学習する内容は次のとおりです。In part one of the series, you learn how to:

  • ストレージ アカウントの作成Create a storage account
  • コンテナーを作成し、アクセス許可を設定するCreate a container and set permissions
  • アクセス キーを取得するRetrieve an access key
  • Web アプリを Azure にデプロイするDeploy a web app to Azure
  • アプリケーションの設定の構成Configure app settings
  • Web アプリと対話するInteract with the web app

前提条件Prerequisites

このチュートリアルを完了するには、Azure サブスクリプションが必要です。To complete this tutorial, you need an Azure subscription. 始める前に、無料アカウントを作成します。Create a free account before you begin.

Azure Cloud Shell を使用するUse Azure Cloud Shell

Azure では、ブラウザーを介して使用できる対話型のシェル環境、Azure Cloud Shell がホストされています。Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Cloud Shell では、bashPowerShell のいずれかを使用して Azure サービスを操作できます。Cloud Shell lets you use either bash or PowerShell to work with Azure services. ローカル環境に何もインストールしなくても、Cloud Shell にプレインストールされているコマンドを使用して、この記事のコードを実行できます。You can use the Cloud Shell pre-installed commands to run the code in this article without having to install anything on your local environment.

Azure Cloud Shell を起動するには:To launch Azure Cloud Shell:

オプションOption 例とリンクExample/Link
コード ブロックの右上隅にある [使ってみる] を選択します。Select Try It in the upper-right corner of a code block. [試してみる] を選択しても、コードは Cloud Shell に自動的にコピーされません。Selecting Try It doesn't automatically copy the code to Cloud Shell. Azure Cloud Shell の [使ってみる] の例
https://shell.azure.com に移動するか、 [Cloud Shell を起動する] ボタンを選択して、ブラウザーで Cloud Shell を開きます。Go to https://shell.azure.com or select the Launch Cloud Shell button to open Cloud Shell in your browser. <a href="https://shell.azure.com" title="Azure Cloud Shell を起動する
Azure portal の右上にあるメニュー バーの [Cloud Shell] ボタンを選択します。Select the Cloud Shell button on the top-right menu bar in the Azure portal. Azure Portal の [Cloud Shell] ボタン

Azure Cloud Shell でこの記事のコードを実行するには:To run the code in this article in Azure Cloud Shell:

  1. Cloud Shell を起動します。Launch Cloud Shell.
  2. [コピー] ボタンを選択して、コード ブロックをコードにコピーします。Select the Copy button on a code block to copy the code.
  3. Windows と Linux では Ctrl + Shift + V キー、macOS では Cmd + Shift + V キーを使用して、コードを Cloud Shell セッションに貼り付けます。Paste the code into the Cloud Shell session with Ctrl+Shift+V on Windows and Linux, or Cmd+Shift+V on macOS.
  4. Enter キーを押して、コードを実行します。Press Enter to run the code.

このチュートリアルでは、CLI をローカルにインストールして使用するには、Azure CLI バージョン 2.0.4 以降を実行する必要があります。To install and use the CLI locally, this tutorial requires that you run the Azure CLI version 2.0.4 or later. バージョンを確認するには、az --version を実行します。Run az --version to find the version. インストールまたはアップグレードが必要な場合は、Azure CLI のインストールに関するページを参照してください。If you need to install or upgrade, see Install the Azure CLI.

リソース グループの作成Create a resource group

az group create コマンドでリソース グループを作成します。Create a resource group with the az group create command. Azure リソース グループとは、Azure リソースのデプロイと管理に使用する論理コンテナーです。An Azure resource group is a logical container into which Azure resources are deployed and managed.

次の例では、myResourceGroup という名前のリソース グループを作成します。The following example creates a resource group named myResourceGroup.

az group create --name myResourceGroup --location southeastasia 

ストレージ アカウントの作成Create a storage account

サンプルでは、Azure Storage アカウント内の BLOB コンテナーに画像をアップロードします。The sample uploads images to a blob container in an Azure Storage account. ストレージ アカウントは、Azure Storage データ オブジェクトを格納してアクセスするための一意の名前空間を用意します。A storage account provides a unique namespace to store and access your Azure storage data objects. az storage account create コマンドを使用して作成したリソース グループ内にストレージ アカウントを作成します。Create a storage account in the resource group you created by using the az storage account create command.

重要

このチュートリアルの第 2 部では、BLOB ストレージで Azure Event Grid を使用します。In part 2 of the tutorial, you use Azure Event Grid with Blob storage. Event Grid がサポートされている Azure リージョンにストレージ アカウントを作成してください。Make sure to create your storage account in an Azure region that supports Event Grid. サポートされているリージョンの一覧は、リージョン別の Azure 製品に関するページをご覧ください。For a list of supported regions, see Azure products by region.

次のコマンドの <blob_storage_account> プレースホルダーを、BLOB ストレージ アカウントのグローバルな一意の名前に置き換えます。In the following command, replace your own globally unique name for the Blob storage account where you see the <blob_storage_account> placeholder.

blobStorageAccount=<blob_storage_account>

az storage account create --name $blobStorageAccount \
--location southeastasia --resource-group myResourceGroup \
--sku Standard_LRS --kind blobstorage --access-tier hot 

BLOB ストレージ コンテナーを作成するCreate Blob storage containers

アプリでは、BLOB ストレージ アカウント内の 2 つのコンテナーを使用します。The app uses two containers in the Blob storage account. コンテナーはフォルダーに似ており、BLOB を格納します。Containers are similar to folders and store blobs. "images" コンテナーは、アプリが高解像度のイメージをアップロードする場所です。The images container is where the app uploads full-resolution images. このシリーズの後半で、Azure 関数アプリで、サイズ変更した画像を thumbnails コンテナーにアップロードします。In a later part of the series, an Azure function app uploads resized image thumbnails to the thumbnails container.

az storage account keys list コマンドを使用して、ストレージ アカウント キーを取得します。Get the storage account key by using the az storage account keys list command. 次に、このキーを使用して、az storage container create コマンドで 2 つのコンテナーを作成します。Then, use this key to create two containers with the az storage container create command.

images コンテナーのパブリック アクセスは、off に設定されています。The images container's public access is set to off. thumbnails コンテナーのパブリック アクセスは、container に設定されています。The thumbnails container's public access is set to container. container パブリック アクセスに設定すると、Web ページにアクセスしたユーザーはサムネイルを表示できます。The container public access setting permits users who visit the web page to view the thumbnails.

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

az storage container create -n images --account-name $blobStorageAccount \
--account-key $blobStorageAccountKey --public-access off

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

echo "Make a note of your Blob storage account key..."
echo $blobStorageAccountKey

BLOB ストレージ アカウント名とキーをメモしておきます。Make a note of your Blob storage account name and key. サンプル アプリでは、これらの設定を使用して、画像をアップロードするストレージ アカウントに接続します。The sample app uses these settings to connect to the storage account to upload the images.

App Service プランを作成するCreate an App Service plan

App Service プランは、アプリのホストとなる Web サーバー ファームの場所、サイズ、機能を規定します。An App Service plan specifies the location, size, and features of the web server farm that hosts your app.

az appservice plan create コマンドで、App Service プランを作成します。Create an App Service plan with the az appservice plan create command.

次の例では、Free 価格レベルの myAppServicePlan という名前の App Service プランを作成します。The following example creates an App Service plan named myAppServicePlan in the Free pricing tier:

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku Free

Web アプリを作成するCreate a web app

Web アプリでは、GitHub サンプル リポジトリからデプロイされるサンプル アプリ コード用のホスト領域を提供します。The web app provides a hosting space for the sample app code that's deployed from the GitHub sample repository. az webapp create コマンドを使って、myAppServicePlanApp Service プランに Web アプリを作成します。Create a web app in the myAppServicePlan App Service plan with the az webapp create command.

次のコマンドで、<web_app> を一意の名前に置き換えます。In the following command, replace <web_app> with a unique name. 有効な文字は、a-z0-9、および - です。Valid characters are a-z, 0-9, and -. <web_app> が一意でない場合は、"指定された名前 <web_app> の Web サイトは既に存在します" というエラー メッセージが表示されます。If <web_app> is not unique, you get the error message: Website with given name <web_app> already exists. Web アプリの既定の URL は、https://<web_app>.azurewebsites.net です。The default URL of the web app is https://<web_app>.azurewebsites.net.

webapp=<web_app>

az webapp create --name $webapp --resource-group myResourceGroup --plan myAppServicePlan

GitHub リポジトリからサンプル アプリをデプロイするDeploy the sample app from the GitHub repository

App Service は、コンテンツを Web アプリにデプロイするさまざまな方法をサポートしています。App Service supports several ways to deploy content to a web app. このチュートリアルでは、パブリック GitHub サンプル リポジトリから Web アプリをデプロイします。In this tutorial, you deploy the web app from a public GitHub sample repository. az webapp deployment source config コマンドを使用して、Web アプリへの GitHub のデプロイを構成します。Configure GitHub deployment to the web app with the az webapp deployment source config command.

サンプル プロジェクトには、ASP.NET MVC アプリが含まれています。The sample project contains an ASP.NET MVC app. そのアプリは、画像を受け取り、ストレージ アカウントに保存して、サムネイル コンテナーから画像を表示します。The app accepts an image, saves it to a storage account, and displays images from a thumbnail container. この Web アプリは、Azure Storage クライアント ライブラリの Microsoft.Azure.StorageMicrosoft.Azure.Storage.Blob、および Microsoft.Azure.Storage.Auth 名前空間を使用して Azure Storage と対話します。The web app uses the Microsoft.Azure.Storage, Microsoft.Azure.Storage.Blob, and the Microsoft.Azure.Storage.Auth namespaces from the Azure Storage client library to interact with 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

Web アプリの設定を構成するConfigure web app settings

サンプル Web アプリでは、Azure Storage Client Library を使用して、画像をアップロードするために使用するアクセス トークンを要求します。The sample web app uses the Azure Storage Client Library to request access tokens, which are used to upload images. ストレージ SDK によって使用されるストレージ アカウントの資格情報は、Web アプリのアプリ設定で設定されています。The storage account credentials used by the Storage SDK are set in the app settings for the web app. az webapp config appsettings set コマンドを使用して、デプロイされるアプリにアプリ設定を追加します。Add app settings to the deployed app with the az webapp config appsettings set command.

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

Web アプリのデプロイと構成が済むと、アプリで画像のアップロード機能をテストできます。After you deploy and configure the web app, you can test the image upload functionality in the app.

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

Web アプリをテストするには、発行したアプリの URL に移動します。To test the web app, browse to the URL of your published app. Web アプリの既定の URL は、https://<web_app>.azurewebsites.net です。The default URL of the web app is https://<web_app>.azurewebsites.net.

[写真のアップロード] 領域を選択し、ファイルを選択してアップロードするか、ファイルを領域にドラッグします。Select the Upload photos region to select and upload a file, or drag a file onto the region. 正常にアップロードされると、画像は表示されなくなります。The image disappears if successfully uploaded. [Generated Thumbnails] セクションは、後でこのトピックの中でテストするまで空のままになります。The Generated Thumbnails section will remain empty until we test it later in this topic.

.NET で写真をアップロードする

サンプル コードでは、Storagehelper.cs ファイル内の UploadFiletoStorage タスクの UploadFromStreamAsync メソッドを使用して、ストレージ アカウント内の images コンテナーに画像をアップロードします。In the sample code, the UploadFiletoStorage task in the Storagehelper.cs file is used to upload the images to the images container within the storage account using the UploadFromStreamAsync method. 次のコード サンプルに、UploadFiletoStorage タスクが含まれています。The following code sample contains the UploadFiletoStorage task.

public static async Task<bool> UploadFileToStorage(Stream fileStream, string fileName, AzureStorageConfig _storageConfig)
{
    // Create storagecredentials object by reading the values from the configuration (appsettings.json)
    StorageCredentials storageCredentials = new StorageCredentials(_storageConfig.AccountName, _storageConfig.AccountKey);

    // Create cloudstorage account by passing the storagecredentials
    CloudStorageAccount storageAccount = new CloudStorageAccount(storageCredentials, true);

    // Create the blob client.
    CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();

    // Get reference to the blob container by passing the name by reading the value from the configuration (appsettings.json)
    CloudBlobContainer container = blobClient.GetContainerReference(_storageConfig.ImageContainer);

    // Get the reference to the block blob from the container
    CloudBlockBlob blockBlob = container.GetBlockBlobReference(fileName);

    // Upload the file
    await blockBlob.UploadFromStreamAsync(fileStream);

    return await Task.FromResult(true);
}

上のタスクでは、次のクラスとメソッドが使用されています。The following classes and methods are used in the preceding task:

クラスClass 方法Method
StorageCredentialsStorageCredentials
CloudStorageAccountCloudStorageAccount CreateCloudBlobClientCreateCloudBlobClient
CloudBlobClientCloudBlobClient GetContainerReferenceGetContainerReference
CloudBlobContainerCloudBlobContainer GetBlockBlobReferenceGetBlockBlobReference
CloudBlockBlobCloudBlockBlob UploadFromStreamAsyncUploadFromStreamAsync

ストレージ アカウント内に画像が表示されることを確認するVerify the image is shown in the storage account

Azure Portal にサインインします。Sign in to the Azure portal. 左側のメニューから [ストレージ アカウント] を選択し、ストレージ アカウントの名前を選択します。From the left menu, select Storage accounts, then select the name of your storage account. [Blob service][BLOB] を選択して、images コンテナーを選択します。Under Blob Service, select Blobs, then select the images container.

コンテナー内に画像が表示されることを確認します。Verify the image is shown in the container.

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

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

サムネイルの表示をテストするには、thumbnails コンテナーに画像をアップロードして、アプリが thumbnails コンテナーを読み取れることを確認します。To test thumbnail viewing, you'll upload an image to the thumbnails container to check whether the app can read the thumbnails container.

Azure Portal にサインインします。Sign in to the Azure portal. 左側のメニューから [ストレージ アカウント] を選択し、ストレージ アカウントの名前を選択します。From the left menu, select Storage accounts, then select the name of your storage account. [Blob service][BLOB] を選択して、thumbnails コンテナーを選択します。Under Blob Service, select Blobs, then select the thumbnails container. [アップロード] を選択して [BLOB のアップロード] ウィンドウを開きます。Select Upload to open the Upload blob pane.

ファイル ピッカーでファイルを選択し、 [アップロード] を選択します。Choose a file with the file picker and select Upload.

アプリに戻って、thumbnails コンテナーにアップロードした画像が表示されていることを確認します。Navigate back to your app to verify that the image uploaded to the thumbnails container is visible.

シリーズの第 2 部では、サムネイル画像の作成を自動化して、この画像が必要ないようにします。In part two of the series, you automate thumbnail image creation so you don't need this image. Azure Portal の thumbnails コンテナーで、アップロードした画像を選択し、 [削除] を選択して画像を削除します。In the thumbnails container in the Azure portal, select the image you uploaded and select Delete to delete the image.

CDN を有効にして、Azure ストレージ アカウントの内容をキャッシュできます。You can enable CDN to cache content from your Azure storage account. Azure ストレージ アカウントで CDN を有効にする方法について詳しくは、「Azure ストレージ アカウントと Azure CDN との統合」をご覧ください。For more information about how to enable CDN with your Azure storage account, see Integrate an Azure storage account with Azure CDN.

次の手順Next steps

シリーズの第 1 部では、ストレージと対話するように Web アプリを構成する方法について学習しました。In part one of the series, you learned how to configure a web app to interact with storage.

シリーズの第 2 部に進み、Event Grid を使用して画像のサイズを変更する Azure 関数をトリガーする方法を学習してください。Go on to part two of the series to learn about using Event Grid to trigger an Azure function to resize an image.