TypeScript Function API を使用して Azure リソースグループを管理する

[アーティクル]
10/24/2024

このチュートリアルでは、API を使用してローカル TypeScript Azure Function アプリを作成し、Azure リソースグループを管理し、アプリを Azure にデプロイします。

特徴と機能:

Visual Studio Code でローカルの TypeScript Azure Function アプリプロジェクトを作成する
Visual Studio Code で関数 API 定型コードを作成する
Visual Studio Code から Azure Function にデプロイする
Azure CLI でサービスプリンシパルを作成する
Visual Studio Code を使用してローカルおよびリモートのアプリケーション設定を構成する
パスワードなしの接続には、ローカル環境とリモート環境の両方で DefaultAzureCredential を使用します。
Azure Identity と Azure Resource Management SDK を使用して Azure リソースを管理します
ローカルとクラウドの API を使用して、サブスクリプション内のリソースグループを作成、削除、および一覧表示する

警告

このチュートリアルは迅速な導入を目的としており、"既定でセキュリティ保護" の要件には従っていません。 "既定でセキュリティ保護" という目標を持つこのシナリオの詳細については、「セキュリティに関する考慮事項」を参照してください。

ソースコードは TypeScript で記述されますが、ソースコードは単純です。 async/await を使用する最新の JavaScript に慣れている場合は、このコードには見覚えがあるでしょう。

前提条件

Azure ユーザーアカウントとサブスクリプション: 無料のサブスクリプションを作成します。
Node.js LTS 18+ および npm がローカルマシンにインストールされています。 Node.js のローカル開発環境のバージョンは、利用可能な Azure Function Cloud ランタイムのバージョンのいずれかと一致する必要があります。
ローカルコンピューターにインストールされている Visual Studio Code。
- Azure Function 拡張機能 v1.10.4 以降。
Azure Functions Core Tools v4.0.5095 以降
Azure Cloud Shell または Azure CLI がローカルマシンにインストールされています。

アプリケーションのアーキテクチャ

アプリでは、次の API エンドポイントが提供されます。

メソッド	URL	説明
POST、DELETE	http://localhost:7071/api/resourcegroup	リソースグループを追加または削除します。追加するときに、後でグループの目的を特定するためにタグ (キーと値のペア) を含めます。
GET	http://localhost:7071/api/resourcegroups	サブスクリプションに含まれるすべてのリソースグループを一覧表示します。
GET	http://localhost:7071/api/resources	サブスクリプションやリソースグループ内のすべてのリソースを一覧表示します。

これらのエンドポイントはパブリックですが、実際の環境に展開する前に、API エンドポイントを認証と承認で保護 する必要があります。

サービスプリンシパルの作成時に指定されたスコープであるため、このアプリはサブスクリプションに限定されます。

1. 環境を準備する

Azure Identity SDK を使用するには、ローカルとクラウドの環境を準備する必要があります。

bash ターミナルで、次のコマンドを使用して Azure CLI にサインインします。

az login

Azure サブスクリプション ID を取得する

bash ターミナルでサブスクリプションを取得し、使用するサブスクリプション ID を見つけます。次のクエリは、サブスクリプション ID、サブスクリプション名、およびテナント ID をサブスクリプション名で並べ替えて返します。
```
az account list --query "sort_by([].{Name:name, SubscriptionId:id, TenantId:tenantId}, &Name)" --output table
```
サブスクリプション ID を先ほどの一時ファイルにコピーします。この設定は後で必要になります。

Azure サービスプリンシパルを作成する

Azure サービスプリンシパルでは、個人のユーザー資格情報を使用することなく Azure へのアクセスが提供されます。このチュートリアルでは、サービスプリンシパルはローカル環境とクラウド環境の両方で使用できます。エンタープライズ環境では、環境ごとに個別のサービスプリンシパルが必要になります。

後でサービスプリンシパル を簡単に見つけられるように、サービスプリンシパル名 の形式を決定します。たとえば、形式のアイデアとしては次のものがあります。
- プロジェクトと所有者: resource-management-john-smith。
- 部署と日付: IT-2021-September
bash ターミナルで、 az ad sp create-for-rbac を使用してサービスプリンシパルを作成します。 <SUBSCRIPTION-ID> は、サブスクリプション ID で置き換えてください。
```
az ad sp create-for-rbac --name YOUR-SERVICE-PRINCIPAL-NAME --role Contributor --scopes /subscriptions/<SUBSCRIPTION-ID>
```

出力結果全体を一時ファイルにコピーします。これらの設定は後で必要になります。

{
  "appId": "YOUR-SERVICE-PRINCIPAL-ID",
  "displayName": "YOUR-SERVICE-PRINCIPAL-NAME",
  "name": "http://YOUR-SERVICE-PRINCIPAL-NAME",
  "password": "YOUR-SERVICE-PRINCIPAL-PASSWORD",
  "tenant": "YOUR-TENANT-ID"
}

2. Visual Studio Code でローカルの Azure 関数アプリを作成する

Visual Studio Code で Azure 関数アプリを作成して Azure のリソースグループを管理します。

Function App の作成

Visual Studio Code を使用して、ローカルの関数アプリを作成します。

Bash ターミナルで、新しいディレクトリを作成し、変更します。
```
mkdir my-function-app && cd my-function-app
```
Bash ターミナルで、Visual Studio Code を開きます。
```
code .
```
Visual Studio Code のコマンドパレット Ctrl + Shift + pを開きます。

「Azure Functions: create new project」と入力します。プロンプトに入力するには、次の表を使用します。

プロンプト	Value
関数プロジェクトを含むフォルダーを選択します	デフォルト (現在の) ディレクトリを選択します
言語を選択する	[TypeScript] を選択します。
TypeScript プログラミングモデルを選択する	モデル V4 (プレビュー)を選択します。
Select a template for your project's first function (プロジェクトの最初の関数のテンプレートを選択してください)	[HTTP トリガー] を選択します。
新しい HTTP トリガーを作成する	API 名 `resourcegroups` を入力します。
承認レベル	[匿名] を選択します。この記事の後にこのプロジェクトを続行する場合は、承認レベルを関数に変更してください。関数レベルの認可の詳細を参照してください。

プロジェクトのボイラープレートが作成され、依存関係がインストールされます。

local.settings.json ファイルにサービスプリンシパル設定を追加する

プロジェクトのルートディレクトリにある ./local.settings.json ファイルを開き、次の 5 つの環境変数を含む VALUES セクションを追加します。

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureWebJobsFeatureFlags": "EnableWorkerIndexing",
    "AZURE_CLIENT_ID": "REPLACE-WITH-SERVICE-PRINCIPAL-APPID",
    "AZURE_CLIENT_SECRET": "REPLACE-WITH-SERVICE-PRINCIPAL-PASSWORD",
    "AZURE_SUBSCRIPTION_ID":"REPLACE-WITH-SUBSCRIPTION-ID",
    "AZURE_TENANT_ID":"REPLACE-WITH-SERVICE-PRINCIPAL-TENANT",
    "NODE_ENV":"development"
  }
}

前のセクションの設定を参照して値を追加します。これらの環境変数は、 DefaultAzureCredential を使用するためのコンテキストで必要です。
- AZURE_TENANT_ID: 上記のサービスプリンシパルの出力からの tenant。
- AZURE_CLIENT_ID: 上記のサービスプリンシパルの出力からの appId。
- AZURE_CLIENT_SECRET: 上記のサービスプリンシパルの出力からの password。
サブスクリプション ID も設定する必要があります。リソース管理には Azure SDK を使用する必要があります。
- AZURE_SUBSCRIPTION_ID: リソースグループを含む既定のサブスクリプション。

誤ってソースコードにコミットすることがないように、この local.settings.json ファイルはローカルの git では意図的に無視されます。

Azure ID とリソース管理のための npm 依存関係をインストールする

Visual Studio Code の 統合 bash ターミナルで、Azure ID とリソース管理のための Azure SDK の依存関係をインストールします。

npm install @azure/identity @azure/arm-resources

サブスクリプションに含まれる全リソースグループを JavaScript で一覧表示する

./src/functions/resourcegroups.ts ファイルを開き、その内容を次のものに置き換えます。

import { ResourceGroup } from '@azure/arm-resources';
import {
  app,
  HttpRequest,
  HttpResponseInit,
  InvocationContext
} from '@azure/functions';
import {
  createResourceGroup,
  deleteResourceGroup
} from '../lib/azure-resource-groups';
import { processError } from '../lib/error';

export async function resourcegroup(
  request: HttpRequest,
  context: InvocationContext
): Promise<HttpResponseInit> {
  try {
    console.log(JSON.stringify(request.query));
    console.log(JSON.stringify(request.params));

    const name: string = request.query.get('name');
    const location: string = request.query.get('location');
    console.log(`name: ${name}`);
    console.log(`location: ${location}`);

    switch (request.method) {
      case 'POST': // wait for create to complete before returning
        if (!name || !location) {
          return { body: 'Missing required parameters.', status: 400 };
        }

        if (request.headers.get('content-type') === 'application/json') {
          // create with tags

          const body: Record<string, unknown> =
            (await request.json()) as Record<string, string>;
          const tags: Record<string, string> = body?.tags
            ? (body?.tags as Record<string, string>)
            : null;
          const resourceGroup: ResourceGroup = await createResourceGroup(
            name,
            location,
            tags
          );
          return { jsonBody: resourceGroup, status: 200 };
        } else {
          // create without tags

          const resourceGroup: ResourceGroup = await createResourceGroup(
            name,
            location,
            null
          );
          return { jsonBody: resourceGroup, status: 200 };
        }

      case 'DELETE': // wait for delete to complete before returning
        if (!name) {
          return { body: 'Missing required parameters.', status: 400 };
        }
        await deleteResourceGroup(name);
        return { status: 204 };
    }
  } catch (err: unknown) {
    return processError(err);
  }
}

app.http('resourcegroup', {
  methods: ['DELETE', 'POST'],
  authLevel: 'anonymous',
  handler: resourcegroup
});

このファイルは、 /api/resourcegroups への API リクエストに応答し、サブスクリプション内のすべてのリソースグループのリストを返します。

src に lib という名前のサブディレクトリを作成し、そのディレクトリに azure-resource-groups.ts という名前の新しいファイルを作成します。

次のコードを ./src/lib/azure-resource-groups.ts ファイルにコピーします。

// Include npm dependencies
import {
  ResourceGroup, ResourceManagementClient
} from '@azure/arm-resources';
import { DefaultAzureCredential } from '@azure/identity';
import { getSubscriptionId } from './environment-vars';

const subscriptionId = getSubscriptionId();

// Create Azure authentication credentials
const credentials = new DefaultAzureCredential();

// Create Azure SDK client for Resource Management such as resource groups
const resourceManagement = new ResourceManagementClient(
  credentials,
  subscriptionId
);

// all resources groups in subscription
export const listResourceGroups = async (): Promise<{
  list: ResourceGroup[];
  subscriptionId: string;
}> => {
  const list: ResourceGroup[] = [];
  for await (const resourceGroup of resourceManagement.resourceGroups.list()) {
    list.push(resourceGroup);
  }
  return {
    subscriptionId,
    list
  };
};
export const createResourceGroup = async (
  resourceGroupName: string,
  location: string,
  tags: { [propertyName: string]: string }
): Promise<ResourceGroup> => {
  const resourceGroupParameters = {
    location: location,
    tags
  };

  return await resourceManagement.resourceGroups.createOrUpdate(
    resourceGroupName,
    resourceGroupParameters
  );
};
export const deleteResourceGroup = async (
  resourceGroupName: string
): Promise<void> => {
  return await resourceManagement.resourceGroups.beginDeleteAndWait(
    resourceGroupName
  );
};

このファイルによって、以下が実行されます。

サブスクリプション ID を取得します
DefaultAzureCredential コンテキストを作成します
リソース管理 SDK を使用するために必要な ResourceManagementClient を作成します。
サブスクリプション内のすべてのリソースグループを取得します。

./src/lib ディレクトリに environment-vars.ts という名前の新しいファイルを作成し、そのファイルに次のコードをコピーします。

export const checkAzureAuth = () => {
  // The following code is only used to check you have environment
  // variables configured. The DefaultAzureCredential reads your
  // environment - it doesn't read these variables.
  const tenantId = process.env['AZURE_TENANT_ID'];
  if (!tenantId)
    throw Error('AZURE_TENANT_ID is missing from environment variables.');
  const clientId = process.env['AZURE_CLIENT_ID'];
  if (!clientId)
    throw Error('AZURE_CLIENT_ID is missing from environment variables.');
  const secret = process.env['AZURE_CLIENT_SECRET'];
  if (!secret)
    throw Error('AZURE_CLIENT_SECRET is missing from environment variables.');
};

export const getSubscriptionId = (): string => {
  checkAzureAuth();

  // Get subscription from environment variables
  const subscriptionId = process.env['AZURE_SUBSCRIPTION_ID'];
  if (!subscriptionId)
    throw Error('Azure Subscription is missing from environment variables.');
  return subscriptionId;
};

このファイルは、サブスクリプション ID を返す前に環境変数を確認します。

./src/lib ディレクトリに error.ts という名前の新しいファイルを作成し、そのファイルに次のコードをコピーします。

export function processError(err: unknown): any {
  if (typeof err === 'string') {
    return { body: err.toUpperCase(), status: 500 };
  } else if (
    err['stack'] &&
    process.env.NODE_ENV.toLowerCase() !== 'production'
  ) {
    return { jsonBody: { stack: err['stack'], message: err['message'] } };
  } else if (err instanceof Error) {
    return { body: err.message, status: 500 };
  } else {
    return { body: JSON.stringify(err) };
  }
}

このファイルは、エラーメッセージとともに 500 エラーを返します。 NODE_ENV 変数が productionに設定されていない場合、スタックが返されます。

ローカル関数をテストする

Visual Studio Code 統合ターミナルで、ローカルプロジェクトを実行します。
```
npm start
```
実行中の関数の URL が統合 bash ターミナルに表示されるまで待機します。
Visual Studio Codeで2つ目の統合bashターミナルを開き、 Ctrl + Shift + 5、以下の GET cURLコマンドを使ってAPIを使用します。
```
curl http://localhost:7071/api/resourcegroups
```
サブスクリプションに多数のリソースグループがある場合は、簡単に確認できるように出力をファイルにパイプすることをお勧めします。
```
curl http://localhost:7071/api/resourcegroups > resourcegroups.json
```

応答には、そのサブスクリプション内のすべてのリソースグループの subscriptionId と list が含まれます。

{
  "subscriptionId": "ABC123",
  "list": [
        {
          "id": "/subscriptions/ABC123/resourceGroups/vmagelo-cloudshell",
          "name": "jsmith-cloudshell",
          "type": "Microsoft.Resources/resourceGroups",
          "properties": {
            "provisioningState": "Succeeded"
          },
          "location": "westeurope"
        },
        ... REMOVED FOR BREVITY ...
    ]
}

トラブルシューティング

この記事を完了できない場合は、次の表で問題を調べてください。問題が表に記載されていない場合は、このドキュメントページでイシューを開いてください。

問題点	解決策
アプリが開始されなかった。	エラーを確認します。必要な依存関係がインストールされていることを確認してください。
アプリが開始されたが、200 応答を取得できない。	curl コマンドが正しいローカルルートから要求されていることを確認します。
API によって 200 応答が返されたが、結果が返されなかった。	Azure リソース用の Visual Studio Code 拡張機能を使用して、サブスクリプションにリソースグループがあることを確認します。リソースグループが表示されなくても、問題ありません。このチュートリアルでは、サブスクリプション内のリソースグループを作成および削除するための API を追加します。この API は、ソースコードを Azure に最初にデプロイした後に追加されるため、コードを再デプロイする方法を学習できます。

3. クラウドベースの Azure Function アプリを作成する

Visual Studio Code で、[Azure] アイコンを選択して Azure Explorerを開きます。
+ アイコンを選択して、Azure クラウドに新しい Azure Function アプリを作成します。
[Azure で関数アプリを作成] を選択します。
新しい関数アプリに グローバルに一意の名前 を入力します。名前は、すべての Azure 関数にわたって一意である必要があります。たとえば、 jsmith-rg-managementのようにします。
ローカル関数アプリの作成時に選択したものと同じ Node.js 18+ LTS ランタイム を選択します。
米国西部 3など、自分に近い地理的な場所を選択します。
リソースが作成されるまで待ちます。詳細については、 Azure: アクティビティログ をご覧ください。

4. クラウドベースの Azure Function アプリを構成する

Azure 関数アプリに接続するように Azure アプリ設定を構成する必要があります。ローカルでは、これらの設定は local.settings.json ファイルにあります。このプロセスによって、これらの値がクラウドアプリに追加されます。

Visual Studio Code の Azure エクスプローラーの [リソース] セクションで、 関数アプリ を展開し、関数アプリを選択します。
[アプリケーションの設定] を右クリックし、 [Add New Setting]\(新しい設定の追加\)を選択します。
local.settings.json から 4 つの値を追加します (同じ名前と値を正確に使用してください)。
- AZURE_TENANT_ID: 上記のサービスプリンシパルの出力からの tenant。
- AZURE_CLIENT_ID: 上記のサービスプリンシパルの出力からの appId。
- AZURE_CLIENT_SECRET: 上記のサービスプリンシパルの出力からの password。
- AZURE_SUBSCRIPTION_ID: リソースグループを含む既定のサブスクリプション。
- AzureWebJobsFeatureFlags:EnableWorkerIndexing

Visual Studio Code の Azure 用エクスプローラーの部分的なスクリーンショット。リモート/クラウド関数のアプリ設定が表示されています。

5. Resource Manager 機能アプリをデプロイする

Visual Studio Code で Azure Function アプリをデプロイして、Azure リソースグループを管理します。

Visual Studio Code 拡張機能を使用してホスティング環境にデプロイする

VS Code で、 local.settings.json ファイルを開いて表示します。これにより、これらの名前と値をコピーする次の手順が簡単になります。
Azure ロゴを選択して Azure Explorer を開き、関数でクラウドアイコンを選択してアプリをデプロイします。

または、 Ctrl + Shift + p を押して コマンドパレット を開き、 deploy to function appと入力して、 Azure Functions: Function App にデプロイコマンドを実行してデプロイすることもできます。
[関数アプリにデプロイ] を選択します。
前のセクションで作成した Function App 名を選択します。
デプロイするかどうかを確認するメッセージが表示されたら、 [デプロイ]を選択します。
Azure Functions の VS Code の [出力] パネルに進行状況が表示されます。デプロイ時には関数アプリケーション全体がデプロイされるため、すべての個別の関数に対する変更が一度にデプロイされます。

ブラウザーを使用して関数アプリが使用可能なことを確認する

引き続き Visual Studio Code で、 Azure Functions エクスプローラーを使用して、Azure サブスクリプションのノードを展開し、関数アプリのノードを展開し、 [関数 (読み取り専用)] を展開します。関数名を右クリックし、 [Copy Function Url]\(関数の URL をコピーする\)を選択します。
URL をブラウザに貼り付け、 Enter を押して、クラウド API からリソースグループリストを要求します。

6. 関数アプリに API を追加し、Azure に再デプロイする

次の API を追加して、Visual Studio Code に Azure Function アプリを再デプロイします。

リソースグループを追加および削除する
リソースグループまたはサブスクリプション内のリソースを一覧表示します。

チュートリアルのこの時点では、サブスクリプションのリソースグループを一覧表示する 1 つの API を使用してローカル関数アプリを作成し、そのアプリを Azure にデプロイしました。 Azure 開発者として、リソースグループを作成または削除することがプロセス自動化パイプラインの一部として必要になることがあります。

関数アプリのリソースグループ API を作成する

Azure Functions の Visual Studio Code 拡張機能を使用して、TypeScript ファイルを関数アプリに追加し、リソースグループを作成および削除します。

Visual Studio Code のコマンドパレット Ctrl + Shift + pを開きます。
「Azure Functions: Create Function」と入力し、Enter キーを押してプロセスを開始します。

次の表を使用して、 /api/resourcegroup API を作成します。

プロンプト	値
Select a template for your function (関数のテンプレートを選択してください)	HTTP トリガー
Provide a function name (関数名を指定してください)	`resourcegroup`
承認レベル	[匿名] を選択します。このプロジェクトを続行する場合は、権限レベルを関数に変更してください。関数レベルの認可の詳細を参照してください。

./src/functions/resourcegroup.ts を開き、ファイル全体を次のソースコードに置き換えます。

import { ResourceGroup } from '@azure/arm-resources';
import {
  app,
  HttpRequest,
  HttpResponseInit,
  InvocationContext
} from '@azure/functions';
import {
  createResourceGroup,
  deleteResourceGroup
} from '../lib/azure-resource-groups';
import { processError } from '../lib/error';

export async function resourcegroup(
  request: HttpRequest,
  context: InvocationContext
): Promise<HttpResponseInit> {
  try {
    console.log(JSON.stringify(request.query));
    console.log(JSON.stringify(request.params));

    const name: string = request.query.get('name');
    const location: string = request.query.get('location');
    console.log(`name: ${name}`);
    console.log(`location: ${location}`);

    switch (request.method) {
      case 'POST': // wait for create to complete before returning
        if (!name || !location) {
          return { body: 'Missing required parameters.', status: 400 };
        }

        if (request.headers.get('content-type') === 'application/json') {
          // create with tags

          const body: Record<string, unknown> =
            (await request.json()) as Record<string, string>;
          const tags: Record<string, string> = body?.tags
            ? (body?.tags as Record<string, string>)
            : null;
          const resourceGroup: ResourceGroup = await createResourceGroup(
            name,
            location,
            tags
          );
          return { jsonBody: resourceGroup, status: 200 };
        } else {
          // create without tags

          const resourceGroup: ResourceGroup = await createResourceGroup(
            name,
            location,
            null
          );
          return { jsonBody: resourceGroup, status: 200 };
        }

      case 'DELETE': // wait for delete to complete before returning
        if (!name) {
          return { body: 'Missing required parameters.', status: 400 };
        }
        await deleteResourceGroup(name);
        return { status: 204 };
    }
  } catch (err: unknown) {
    return processError(err);
  }
}

app.http('resourcegroup', {
  methods: ['DELETE', 'POST'],
  authLevel: 'anonymous',
  handler: resourcegroup
});

./src/lib/azure-resource-groups.ts ファイルには、リソースグループを追加および削除するコードがすでに含まれています。

関数アプリのリソース API を作成する

Azure Functions の Visual Studio Code 拡張機能を使用して、TypeScript ファイルを関数アプリに追加し、リソースグループ内のリソースを一覧表示します。

Visual Studio Code のコマンドパレット Ctrl + Shift + pを開きます。
「Azure Functions: Create Function」と入力し、Enter キーを押してプロセスを開始します。

次の表を使用して、 /api/resources API を作成します。

プロンプト	値
Select a template for your function (関数のテンプレートを選択してください)	HTTP トリガー
Provide a function name (関数名を指定してください)	`resources`
承認レベル	[匿名] を選択します。このプロジェクトを続行する場合は、権限レベルを関数に変更してください。関数レベルの認可の詳細を参照してください。

./src/functions/resources.ts を開き、ファイル全体を次のソースコードに置き換えます。

import {
  app,
  HttpRequest,
  HttpResponseInit,
  InvocationContext
} from '@azure/functions';
import {
  listResourceByResourceGroup, listResourceBySubscription
} from '../lib/azure-resource';
import { processError } from '../lib/error';

export async function resources(
  request: HttpRequest,
  context: InvocationContext
): Promise<HttpResponseInit> {
  try {
    const resourceGroupName: string = request.query.get('resourceGroupName');
    context.log(`resourceGroupName: '${resourceGroupName}'`);

    if (resourceGroupName) {
      const resourcesByName = await listResourceByResourceGroup(
        resourceGroupName
      );
      return { jsonBody: resourcesByName };
    } else {
      const resourcesBySubscription = await listResourceBySubscription();
      return { jsonBody: resourcesBySubscription };
    }
  } catch (err: unknown) {
    return processError(err);
  }
}
app.http('resources', {
  methods: ['GET'],
  authLevel: 'anonymous',
  handler: resources
});

./src/lib/azure-resource.ts ファイルを作成し、次のコードをそのファイルにコピーして、リソースグループ内のリソースを一覧表示します。

// Include npm dependencies
import { Resource, ResourceManagementClient } from '@azure/arm-resources';
import { DefaultAzureCredential } from '@azure/identity';
import { getSubscriptionId } from './environment-vars';

const subscriptionId = getSubscriptionId();

// Create Azure authentication credentials
const credentials = new DefaultAzureCredential();

// Create Azure SDK client for Resource Management such as resource groups
const resourceManagement = new ResourceManagementClient(
  credentials,
  subscriptionId
);

// all resources groups in subscription
export const listResourceBySubscription = async (): Promise<{
  list: Resource[];
  subscriptionId: string;
}> => {
  const list: Resource[] = [];

  for await (const resource of resourceManagement.resources.list()) {
    list.push(resource);
  }

  return {
    subscriptionId,
    list
  };
};
// all resources groups in resource group
export const listResourceByResourceGroup = async (
  resourceGroupName: string
): Promise<{
  list: Resource[];
  subscriptionId: string;
  resourceGroupName: string;
}> => {
  const list: Resource[] = [];

  for await (const resource of resourceManagement.resources.listByResourceGroup(
    resourceGroupName
  )) {
    list.push(resource);
  }

  return {
    subscriptionId,
    resourceGroupName,
    list
  };
};

ローカル関数アプリを起動し、新しい API をテストする

Visual Studio Code 統合ターミナルで、ローカルプロジェクトを実行します。
```
npm start
```
実行中の関数の URL が統合 bash ターミナルに表示されるまで待機します。
別の統合 bash ターミナルで次のcurl コマンドを使用して API を呼び出し、リソースグループをサブスクリプションに追加します。任意の名前付け規則を使用して、リソースグループの名前を変更します。
```
curl -X POST 'http://localhost:7071/api/resourcegroup?name=my-test-1&location=westus'

curl -X POST 'http://localhost:7071/api/resourcegroup?name=my-test-1&location=westus' \
  -H 'content-type: application/json' \
  -d '{"tags": {"a":"b"}}'
```
次の Curl コマンドを使用して、サブスクリプションにリストされている新しいリソースグループを表示します。
```
curl http://localhost:7071/api/resource-groups
```

次の Curl コマンドを使用して、追加したリソースグループを削除します。

curl -X DELETE 'http://localhost:7071/api/resourcegroup?name=my-test-1' \
  -H 'Content-Type: application/json'

新しい API を含む関数アプリを Azure に再デプロイする

VS Code で コマンドパレット を Ctrl + Shift + pで開き、 deploy to function appを入力して Azure Functions: Deploy to Function App コマンドを実行します。
アプリの一覧から関数アプリを選択します。
ポップアップウィンドウから [デプロイ] を選択します。
デプロイが完了するまで待機します。

ブラウザーを使用して関数 API を検証する

前の cURL コマンドを使用して、ローカルホストアドレス http://localhost:7071 を https://myfunction.azurewebsites.netなどのAzure Function リソース名に置き換えます。

7. 関数アプリのログを表示してクエリを実行する

Azure portal で Azure Function App のログを表示およびクエリします。

Azure 関数ログに対してクエリを実行する

Azure portal を使用して、関数ログを表示してクエリを実行します。

VS Code で、Azure ロゴを選択して Azure エクスプローラーを開き、 [Functions]\(関数\) で関数アプリを右クリックし、 [ポータルで開く] を選択します。

これにより、Azure portal が開き、Azure 関数が表示されます。
[設定] の [Application Insights] を選択し、 [Application Insights データの表示] を選択します。

このリンクを使用すると、VS Code で Azure 関数を作成したときに作成された個別のメトリックリソースに移動します。
[監視] セクションで、 [ログ] を選択します。 [クエリ] ポップアップウィンドウが表示された場合、ポップアップの右上隅にある [X] を選択して閉じます。
[スキーマとフィルター] ペインの [テーブル] タブで、 traces テーブルをダブルクリックします。

これにより Kusto クエリの traces がクエリウィンドウに入力されます。
API 呼び出しを検索するようにクエリを編集します。
```
traces 
| where message startswith "Executing "
```
[実行] を選択します。

ログに結果が表示されない場合、原因として考えられるのは、Azure 関数への HTTP 要求から Kusto でログが利用できるようになるまでに数分の遅延があることです。数分待って、クエリを再度実行します。

Azure Function App の作成時に Application Insights リソースが追加されたため、このログ情報を取得するために追加の操作を行う必要はありません。
- 関数アプリによって、 ユーザー用の Application Insights が追加されました。
- クエリツールは、Azure portal に含まれています。
- Kusto クエリを記述してログから最小情報を取得する方法について学習する必要はなく、代わりに traces を選択することができます。

8. Azure リソースをクリーンアップする

リソースグループを削除します

VS Code で、Azure ロゴを選択して Azure Explorer を開き、[関数] の下の関数アプリを右クリックし、[ポータルで開く] を選択します。これにより、Azure ポータルが開いて Azure 関数が表示されます。
[概要] セクションで、リソースグループ名を見つけて選択します。この操作により、Azure portal のリソースグループが表示されます。
リソースグループページには、このチュートリアルに関連するすべてのリソースがリストされます。
一番上のメニューで、 [リソースグループの削除] を選択します。
サイドメニューで、リソースグループの名前を入力し、 [削除]を選択します。

サービスプリンシパルを削除する

サービスプリンシパルを削除するには、次のコマンドを実行します。 <YOUR-SERVICE-PRINCIPAL-NAME> をサービスプリンシパルの名前に置き換えます。

az ad sp delete --id <YOUR-SERVICE-PRINCIPAL-NAME>

サンプルコード

GitHub: Azure-Samples/azure-typescript-e2e-apps

セキュリティに関する考慮事項

このソリューションは初心者向けチュートリアルであり、"既定でセキュリティ保護" のためのプラクティスは示していません。ここではソリューションのデプロイを成功させることが目的であるため、意図的にそのようにしています。リソースのセキュリティ保護は、デプロイが成功した後の次の手順になります。このソリューションでは 3 つの Azure サービスが使用され、それぞれに独自のセキュリティ機能と、"既定でセキュリティ保護" の構成に関する考慮事項があります。

Azure Functions - Azure Functions のセキュリティ保護
Azure Storage - Blob Storage のセキュリティに関する推奨事項

次のステップ

Express.js アプリでテキストを音声に変換する

次の方法で共有

TypeScript Function API を使用して Azure リソースグループを管理する

前提条件

アプリケーションのアーキテクチャ

1. 環境を準備する

Azure サブスクリプション ID を取得する

Azure サービスプリンシパルを作成する

2. Visual Studio Code でローカルの Azure 関数アプリを作成する

Function App の作成

local.settings.json ファイルにサービスプリンシパル設定を追加する

Azure ID とリソース管理のための npm 依存関係をインストールする

サブスクリプションに含まれる全リソースグループを JavaScript で一覧表示する

ローカル関数をテストする

トラブルシューティング

3. クラウドベースの Azure Function アプリを作成する

4. クラウドベースの Azure Function アプリを構成する

5. Resource Manager 機能アプリをデプロイする

Visual Studio Code 拡張機能を使用してホスティング環境にデプロイする

ブラウザーを使用して関数アプリが使用可能なことを確認する

6. 関数アプリに API を追加し、Azure に再デプロイする

関数アプリのリソースグループ API を作成する

関数アプリのリソース API を作成する

ローカル関数アプリを起動し、新しい API をテストする

新しい API を含む関数アプリを Azure に再デプロイする

ブラウザーを使用して関数 API を検証する

7. 関数アプリのログを表示してクエリを実行する

Azure 関数ログに対してクエリを実行する

8. Azure リソースをクリーンアップする

リソースグループを削除します

サービスプリンシパルを削除する

サンプルコード

セキュリティに関する考慮事項

次のステップ

フィードバック

その他のリソース

次の方法で共有

TypeScript Function API を使用して Azure リソース グループを管理する

前提条件

アプリケーションのアーキテクチャ

1. 環境を準備する

Azure CLI へのサインイン

Azure サブスクリプション ID を取得する

Azure サービス プリンシパルを作成する

2. Visual Studio Code でローカルの Azure 関数アプリを作成する

Function App の作成

local.settings.json ファイルにサービス プリンシパル設定を追加する

Azure ID とリソース管理のための npm 依存関係をインストールする

サブスクリプションに含まれる全リソース グループを JavaScript で一覧表示する

ローカル関数をテストする

トラブルシューティング

3. クラウドベースの Azure Function アプリを作成する

4. クラウドベースの Azure Function アプリを構成する

5. Resource Manager 機能アプリをデプロイする

Visual Studio Code 拡張機能を使用してホスティング環境にデプロイする

ブラウザーを使用して関数アプリが使用可能なことを確認する

6. 関数アプリに API を追加し、Azure に再デプロイする

関数アプリのリソースグループ API を作成する

関数アプリのリソース API を作成する

ローカル関数アプリを起動し、新しい API をテストする

新しい API を含む関数アプリを Azure に再デプロイする

ブラウザーを使用して関数 API を検証する

7. 関数アプリのログを表示してクエリを実行する

Azure 関数ログに対してクエリを実行する

8. Azure リソースをクリーンアップする

リソース グループを削除します

サービスプリンシパルを削除する

サンプル コード

セキュリティに関する考慮事項

次のステップ

フィードバック

その他のリソース

TypeScript Function API を使用して Azure リソースグループを管理する

Azure サービスプリンシパルを作成する

local.settings.json ファイルにサービスプリンシパル設定を追加する

サブスクリプションに含まれる全リソースグループを JavaScript で一覧表示する

リソースグループを削除します

サンプルコード