演習 - Azure ストレージ アカウントに画像をアップロードする
Azure ストレージ アカウントに画像をアップロードするコードを追加してみましょう。 この例では、次の画像を Azure Storage コンテナーにアップロードします。
自分のローカル コンピューターで作業している場合は、この画像を右クリックし、自分のアプリケーションと同じフォルダーにそれを保存します。
Microsoft Learn サンドボックスの環境で作業している場合は、アプリケーション フォルダーで次のコマンドを実行して、画像をサンドボックスにダウンロードします。
wget https://github.com/MicrosoftDocs/mslearn-connect-app-to-azure-storage/blob/main/images/docs-and-friends-selfie-stick.png?raw=true -O docs-and-friends-selfie-stick.png
いずれの場合も、画像の名前は docs-and-friends-selfie-stick.png です。
画像を Blob Storage にアップロードする
Azure ストレージ アカウント内の個々の BLOB オブジェクトを操作するには、BlobClient
オブジェクトを使用します。 BlobClient
オブジェクトを取得するには、BLOB が格納されるコンテナーの BlobContainerClient
オブジェクトで GetBlobClient
メソッドを呼び出します。 GetBlobClient
メソッドを呼び出すときに、コンテナー内の BLOB の名前も指定します。 この例では、BLOB の名前はファイルの名前と同じになります。
BlobClient
オブジェクトを取得したら、Upload
メソッドを呼び出して、Azure Blob Storage にファイルをアップロードできます。 Program.cs ファイルに次のコードを追加します。string blobName = "docs-and-friends-selfie-stick"; string fileName = "docs-and-friends-selfie-stick.png"; BlobClient blobClient = container.GetBlobClient(blobName); blobClient.Upload(fileName, true);
Upload
メソッドの 2 番目の引数で、同じ名前を持つ既存の BLOB オブジェクトを上書きできるかどうかを指定します。 この値の既定値はfalse
です。 この例ではtrue
を指定して、プログラムを複数回実行できるようにします。
Azure Blob Storage コンテナー内のオブジェクトの一覧を表示する
プログラムが動作したことを確認するため、Azure Storage Blobs SDK の別の機能を実行し、Blob Storage のコンテナーに格納されているオブジェクトの一覧を表示します。 これを行うには、BlobContainerClient
オブジェクトの GetBlobs
メソッドを呼び出します。 GetBlobs
メソッドからは、コンテナー内の各 BLOB に関するデータが含まれる BlobItem
オブジェクトのページング可能なリストが返されます。
前に追加したコードの後に次のコードをプログラムに追加し、ファイルを保存します。
var blobs = container.GetBlobs(); foreach (var blob in blobs) { Console.WriteLine($"{blob.Name} --> Created On: {blob.Properties.CreatedOn:yyyy-MM-dd HH:mm:ss} Size: {blob.Properties.ContentLength}"); }
このコードにより、photos コンテナーの
BlobContainerClient
オブジェクトでGetBlobs
が呼び出されます。 その後、各 BLOB が反復処理されて、BLOB の名前、BLOB が作成された日時、BLOB のサイズが出力されます。 自分のプログラムを実行すると、このコードが、アップロードされた 1 つの画像に対して 1 行で出力されます。作業内容を確認したい場合、最終的な Program.cs ファイルは次のようになります。
using System; using Microsoft.Extensions.Configuration; using System.IO; using Azure.Storage.Blobs; namespace PhotoSharingApp { class Program { static void Main(string[] args) { var builder = new ConfigurationBuilder() .SetBasePath(Directory.GetCurrentDirectory()) .AddJsonFile("appsettings.json"); var configuration = builder.Build(); // Get a connection string to our Azure Storage account. var connectionString = configuration.GetConnectionString("StorageAccount"); // Get a reference to the container client object so you can create the "photos" container string containerName = "photos"; BlobContainerClient container = new BlobContainerClient(connectionString, containerName); container.CreateIfNotExists(); // Uploads the image to Blob storage. If a blb already exists with this name it will be overwritten string blobName = "docs-and-friends-selfie-stick"; string fileName = "docs-and-friends-selfie-stick.png"; BlobClient blobClient = container.GetBlobClient(blobName); blobClient.Upload(fileName, true); // List out all the blobs in the container var blobs = container.GetBlobs(); foreach (var blob in blobs) { Console.WriteLine($"{blob.Name} --> Created On: {blob.Properties.CreatedOn:yyyy-MM-dd HH:mm:ss} Size: {blob.Properties.ContentLength}"); } } } }
アプリを実行する
アプリケーションをビルドして実行し、すべてが機能していることを確認して、Azure Blob Storage に自分の画像をアップロードします。
Note
PhotoSharingApp ディレクトリで操作していることをご確認ください。
dotnet run
結論
Azure Storage Blobs SDK パッケージと Azure Blob Storage を使用するための基本事項を学習しました。 必要に応じて、別のコンテナーを作成したり、自分のストレージ アカウントに別の画像をアップロードしたり、画像を削除したりして、さらに詳しく調べてください。 詳細については、.NET 用の Azure Storage Blobs クライアント ライブラリに関する GitHub のページを参照してください。
画像を Blob Storage にアップロードする
自分の Azure Storage コンテナー内の BLOB オブジェクトを操作するには、BlockBlobClient
オブジェクトを使用します。 BlockBlobClient
オブジェクトには、コンテナー内の BLOB オブジェクトをアップロード、ダウンロード、一覧表示、削除するメソッドがあります。 BlockBlobObject
を取得するには、ContainerClient
オブジェクトで getBlockBlobClient
メソッドを呼び出します。 次に、uploadFile
メソッドを使用して、画像を Azure Storage にアップロードできます。
このコードを、index.js プログラム ファイルのコンテナーを作成するコードのすぐ後に追加します。
const filename = 'docs-and-friends-selfie-stick.png'; const blockBlobClient = containerClient.getBlockBlobClient(filename); blockBlobClient.uploadFile(filename);
Azure Blob Storage コンテナー内のオブジェクトの一覧を表示する
コードが動作していることを確認するには、プログラムの
ContainerClient
オブジェクトでlistBlobsFlat
メソッドを呼び出すことができます。 次のコードを index.js ファイルに追加し、ファイルを保存します。let blobs = containerClient.listBlobsFlat(); let blob = await blobs.next(); while (!blob.done) { console.log(`${blob.value.name} --> Created: ${blob.value.properties.createdOn} Size: ${blob.value.properties.contentLength}`); blob = await blobs.next(); }
このコードにより、Azure Blob Storage コンテナー内のすべての BLOB が、BLOB の作成日およびサイズと共に出力されます。 このプログラムでは、アップロードした 1 つの画像を表す 1 行が出力されます。
最終的なファイルは次のようになります。
#!/usr/bin/env node require('dotenv').config(); const { BlobServiceClient } = require("@azure/storage-blob"); const storageAccountConnectionString = process.env.AZURE_STORAGE_CONNECTION_STRING; const blobServiceClient = BlobServiceClient.fromConnectionString(storageAccountConnectionString); async function main() { // Create a container (folder) if it does not exist const containerName = 'photos'; const containerClient = blobServiceClient.getContainerClient(containerName); const containerExists = await containerClient.exists() if ( !containerExists) { const createContainerResponse = await containerClient.createIfNotExists(); console.log(`Create container ${containerName} successfully`, createContainerResponse.succeeded); } else { console.log(`Container ${containerName} already exists`); } // Upload the file const filename = 'docs-and-friends-selfie-stick.png'; const blockBlobClient = containerClient.getBlockBlobClient(filename); blockBlobClient.uploadFile(filename); // Get a list of all the blobs in the container let blobs = containerClient.listBlobsFlat(); let blob = await blobs.next(); while (!blob.done) { console.log(`${blob.value.name} --> Created: ${blob.value.properties.createdOn} Size: ${blob.value.properties.contentLength}`); blob = await blobs.next(); } } main();
アプリを実行する
アプリケーションをビルドして実行します。
Note
PhotoSharingApp ディレクトリで操作していることをご確認ください。
node index.js
ヒント
await
キーワードの使用に関するエラーが表示される場合は、上記の手順の最後のステップに従ってmain
関数定義にasync
キーワードを追加していることを確認します。
結論
JavaScript 用の Azure Storage Blob クライアント ライブラリと Azure Blob Storage を使用するための基本事項を学習しました。 必要に応じて、別のコンテナーを作成したり、自分のストレージ アカウントに別の画像をアップロードしたり、画像を削除したりして、さらに詳しく調べてください。 JavaScript 用の Azure Storage Blob クライアント ライブラリの npm.js ページには、ライブラリの使用例が多数あります。