次の方法で共有


Azure Blob Storage と TypeScript の概要

この記事では、JavaScript 用 Azure Blob Storage クライアント ライブラリを使って、Azure Blob Storage に接続する方法について説明します。 接続されると、コードは、Blob Storage サービスのコンテナー、BLOB、機能を使って動作できます。

パッケージ (npm) | API リファレンス | ライブラリ ソース コード | フィードバックを送る

前提条件

プロジェクトの設定

  1. コマンド プロンプトを開き、プロジェクト フォルダーに変更します。 YOUR-DIRECTORY をご使用のフォルダー名に変更してください。

    cd YOUR-DIRECTORY
    
  2. ディレクトリに package.json ファイルがまだない場合は、プロジェクトを初期化してファイルを作成します。

    npm init -y
    
  3. TypeScript と、TypeScript 型を含む JavaScript 用 Azure Blob Storage クライアント ライブラリをインストールします。

    npm install typescript @azure/storage-blob
    
  4. Microsoft Entra ID を使用してパスワードなしの接続を使用する場合は、JavaScript 用の Azure ID クライアント ライブラリをインストールします:

    npm install @azure/identity
    

Blob Storage へのアクセスを承認して接続する

Microsoft Entra ID は、接続 ID (マネージド ID) を管理することで、最も安全な接続を提供します。 このパスワードレス機能を使用すると、コードに格納されているシークレット (キーまたは接続文字列) を必要としないアプリケーションを開発できます。

Azure クラウドへの ID アクセスを設定する

パスワードなしで Azure に接続するには、Azure ID を設定するか、既存の ID を使用する必要があります。 ID が設定されたら、ID に適切なロールを割り当てるようにしてください。

Microsoft Entra ID を使ってパスワードレス アクセスを承認するには、Azure 資格情報を使用する必要があります。 必要な資格情報の種類は、アプリケーションの実行場所によって異なります。 次の表を参考にしてください。

環境 Method
開発者環境 Visual Studio Code
開発者環境 サービス プリンシパル
Azure でホストされるアプリ Azure でホストされるアプリの設定
オンプレミス オンプレミス アプリの設定

ストレージ アカウントのロールを設定する

ストレージ リソースには、接続する予定の ID リソースに割り当てられている次の Azure RBAC ロールが 1 つ以上必要です。 前の手順で作成した各 ID (Azure クラウド、ローカル開発、オンプレミス) に対して、Azure Storage ロールを設定します。

設定を完了した後、各 ID には、少なくとも 1 つの適切なロールが必要です。

  • 次のようなデータ アクセス ロール:

    • ストレージ BLOB データ閲覧者
    • ストレージ BLOB データ共同作成者
  • 次のようなリソース ロール:

    • Reader
    • Contributor

アプリケーションをビルドする

アプリケーションをビルドすると、コードは主に 3 種類のリソースと対話します。

  • ストレージ アカウントは、Azure Storage のデータに対する一意で最上位の名前空間です。
  • コンテナーは、ストレージ アカウント内の BLOB データを整理します。
  • BLOB は、テキストやバイナリ データなどの非構造化データを格納します。

次の図に、これらのリソースの関係を示します。

Blob Storage のアーキテクチャ図

各種類のリソースは、1 つまたは複数の関連付けられた JavaScript クラスによって表されます。

クラス 説明
BlobServiceClient ストレージ アカウントの Blob Storage エンドポイントを表します。
ContainerClient Azure Storage コンテナーとその BLOB を操作できます。
BlobClient Azure Storage の BLOB を操作できます。

BlobServiceClient オブジェクトを作成する

BlobServiceClient オブジェクトは、SDK の最上位のオブジェクトです。 このクライアントを使用すると、サービス、コンテナー、BLOB を操作できます。

Azure ストレージ アカウント ID のロールとローカル環境を設定したら、@azure/identity パッケージを含んだ TypeScript ファイルを作成します。 Blob Storage へのパスワードレス接続を実装するために、DefaultAzureCredential などの資格情報を作成します。 その資格情報を使って、BlobServiceClient オブジェクトで認証します。

// connect-with-default-azure-credential.js
// You must set up RBAC for your identity with one of the following roles:
// - Storage Blob Data Reader
// - Storage Blob Data Contributor
import { DefaultAzureCredential } from '@azure/identity';
import { BlobServiceClient } from '@azure/storage-blob';
import * as dotenv from 'dotenv';
dotenv.config();

const accountName = process.env.AZURE_STORAGE_ACCOUNT_NAME as string;
if (!accountName) throw Error('Azure Storage accountName not found');

const blobServiceClient = new BlobServiceClient(
  `https://${accountName}.blob.core.windows.net`,
  new DefaultAzureCredential()
);

async function main() {
  const containerName = 'my-container';
  const blobName = 'my-blob';

  const timestamp = Date.now();
  const fileName = `my-new-file-${timestamp}.txt`;

  // create container client
  const containerClient = await blobServiceClient.getContainerClient(
    containerName
  );

  // create blob client
  const blobClient = await containerClient.getBlockBlobClient(blobName);

  // download file
  const downloadResult = await blobClient.downloadToFile(fileName);

  if (downloadResult.errorCode) throw Error(downloadResult.errorCode);

  console.log(
    `${fileName} downloaded ${downloadResult.contentType}, isCurrentVersion: ${downloadResult.isCurrentVersion}`
  );
}

main()
  .then(() => console.log(`success`))
  .catch((err: unknown) => {
    if (err instanceof Error) {
      console.log(err.message);
    }
  });

dotenv パッケージは、.env ファイルからストレージ アカウント名を読み取るために使用されます。 このファイルをソース コード管理にチェックインすることはしないでください。 ローカル サービス プリンシパルを DefaultAzureCredential 設定の一部として使用した場合、その資格情報のセキュリティ情報も .env ファイル内に格納されます。

Azure の外部で実行するサーバーとクライアントにアプリケーションをデプロイする場合は、ニーズに合わせていずれかの資格情報を作成します。

ContainerClient オブジェクトを作成する

ContainerClient オブジェクトは、BlobServiceClient から、または直接作成できます。

BlobServiceClient から ContainerClient オブジェクトを作成する

BlobServiceClient から ContainerClient オブジェクトを作成する

// Azure Storage dependency
import {
  BlobServiceClient,
  StorageSharedKeyCredential
} from '@azure/storage-blob';

// For development environment - include environment variables from .env
import * as dotenv from 'dotenv';
dotenv.config();

// Azure Storage resource name
const accountName = process.env.AZURE_STORAGE_ACCOUNT_NAME as string;
if (!accountName) throw Error('Azure Storage accountName not found');

// Azure Storage resource key
const accountKey = process.env.AZURE_STORAGE_ACCOUNT_KEY as string;
if (!accountKey) throw Error('Azure Storage accountKey not found');

// Create credential
const sharedKeyCredential = new StorageSharedKeyCredential(
  accountName,
  accountKey
);

const baseUrl = `https://${accountName}.blob.core.windows.net`;
const containerName = `my-container`;

// Create BlobServiceClient
const blobServiceClient = new BlobServiceClient(
  `${baseUrl}`,
  sharedKeyCredential
);

async function main(): Promise<void> {
  try {
    // Create container client
    const containerClient = await blobServiceClient.getContainerClient(
      containerName
    );

    // do something with containerClient...
    let i = 1;

    // List blobs in container
    for await (const blob of containerClient.listBlobsFlat({
      includeMetadata: true,
      includeSnapshots: false,
      includeTags: true,
      includeVersions: false,
      prefix: ''
    })) {
      console.log(`Blob ${i++}: ${blob.name}`);
    }
  } catch (err) {
    console.log(err);
    throw err;
  }
}

main()
  .then(() => console.log(`success`))
  .catch((err: unknown) => {
    if (err instanceof Error) {
      console.log(err.message);
    }
  });

ContainerClient を直接作成する

// Azure Storage dependency
import { ContainerClient } from '@azure/storage-blob';

// Azure authentication for credential dependency
import { DefaultAzureCredential } from '@azure/identity';

// For development environment - include environment variables from .env
import * as dotenv from 'dotenv';
dotenv.config();

// Azure Storage resource name
const accountName = process.env.AZURE_STORAGE_ACCOUNT_NAME as string;
if (!accountName) throw Error('Azure Storage accountName not found');

// Azure SDK needs base URL
const baseUrl = `https://${accountName}.blob.core.windows.net`;

// Unique container name
const timeStamp = Date.now();
const containerName = `my-container`;

async function main(): Promise<void> {
  try {
    // create container client from DefaultAzureCredential
    const containerClient = new ContainerClient(
      `${baseUrl}/${containerName}`,
      new DefaultAzureCredential()
    );

    // do something with containerClient...
    let i = 1;

    // List blobs in container
    for await (const blob of containerClient.listBlobsFlat({
      includeMetadata: true,
      includeSnapshots: false,
      includeTags: true,
      includeVersions: false,
      prefix: ''
    })) {
      console.log(`Blob ${i++}: ${blob.name}`);
    }
  } catch (err) {
    console.log(err);
    throw err;
  }
}

main()
  .then(() => console.log(`success`))
  .catch((err: unknown) => {
    if (err instanceof Error) {
      console.log(err.message);
    }
  });

dotenv パッケージは、.env ファイルからストレージ アカウント名を読み取るために使用されます。 このファイルをソース コード管理にチェックインすることはしないでください。

BlobClient オブジェクトを作成する

次に示す BlobClient オブジェクトは、ContainerClient から、または直接作成できます。

BLOB クライアントの一覧:

ContainerClient から BlobClient オブジェクトを作成する

// Azure Storage dependency
import {
  BlobClient,
  BlobDownloadHeaders,
  BlobGetPropertiesHeaders,
  BlobGetPropertiesResponse,
  BlockBlobClient,
  ContainerClient
} from '@azure/storage-blob';

// For development environment - include environment variables from .env
import * as dotenv from 'dotenv';
import { getContainerClientFromDefaultAzureCredential } from './auth-get-client';
dotenv.config();

const containerName = `my-container`;
const containerClient: ContainerClient =
  getContainerClientFromDefaultAzureCredential(containerName);

const blobName = `my-blob`;

async function main(containerClient: ContainerClient): Promise<void> {
  // Create BlobClient object
  const blobClient: BlobClient = containerClient.getBlobClient(blobName);

  // do something with blobClient...
  const properties: BlobGetPropertiesHeaders = await blobClient.getProperties();
  if (properties.errorCode) throw Error(properties.errorCode);

  console.log(`Blob ${blobName} properties:`);

  // get BlockBlobClient from blobClient
  const blockBlobClient: BlockBlobClient = blobClient.getBlockBlobClient();

  // do something with blockBlobClient...
  const downloadResponse: BlobDownloadHeaders = await blockBlobClient.download(
    0
  );
  if (downloadResponse.errorCode) throw Error(downloadResponse.errorCode);
}

main(containerClient)
  .then(() => console.log(`success`))
  .catch((err: unknown) => {
    if (err instanceof Error) {
      console.log(err.message);
    }
  });

BlobClient を直接作成する

// Azure Storage dependency
import {
  BlockBlobClient,
  BlockBlobUploadHeaders,
  BlockBlobUploadResponse
} from '@azure/storage-blob';
import { getBlockBlobClientFromDefaultAzureCredential } from './auth-get-client';

// For development environment - include environment variables from .env
import * as dotenv from 'dotenv';
dotenv.config();

// Container must exist prior to running this script
const containerName = `my-container`;

// Random blob name and contents
const timeStamp = Date.now();
const blobName = `${timeStamp}-my-blob.txt`;
const fileContentsAsString = 'Hello there.';

const blockBlobClient: BlockBlobClient =
  getBlockBlobClientFromDefaultAzureCredential(containerName, blobName);

async function main(
  blockBlobClient: BlockBlobClient
): Promise<BlockBlobUploadHeaders> {
  // Get file url - available before contents are uploaded
  console.log(`blob.url: ${blockBlobClient.url}`);

  // Upload file contents
  const result: BlockBlobUploadHeaders = await blockBlobClient.upload(
    fileContentsAsString,
    fileContentsAsString.length
  );

  if (result.errorCode) throw Error(result.errorCode);

  // Get results
  return result;
}

main(blockBlobClient)
  .then((result) => {
    console.log(result);
    console.log(`success`);
  })
  .catch((err: unknown) => {
    if (err instanceof Error) {
      console.log(err.message);
    }
  });

/*

Response looks like this:

{
  etag: '"0x8DAD247F1F4896E"',
  lastModified: 2022-11-29T20:26:07.000Z,
  contentMD5: <Buffer 9d 6a 29 63 87 20 77 db 67 4a 27 a3 9c 49 2e 61>,
  clientRequestId: 'a07fdd1f-5937-44c7-984f-0699a48a05c0',
  requestId: '3580e726-201e-0045-1a30-0474f6000000',
  version: '2021-04-10',
  date: 2022-11-29T20:26:06.000Z,
  isServerEncrypted: true,
  'content-length': '0',
  server: 'Windows-Azure-Blob/1.0 Microsoft-HTTPAPI/2.0',
  'x-ms-content-crc64': 'BLv7vb1ONT8=',
  body: undefined
}
*/

dotenv パッケージは、.env ファイルからストレージ アカウント名を読み取るために使用されます。 このファイルをソース コード管理にチェックインすることはしないでください。

関連項目