Azure Developer CLI テンプレートを調べてカスタマイズする

このクイック スタートでは、Azure Developer CLI テンプレートを調べてカスタマイズします。 hello-azd テンプレートは、Azure Developer CLI (azd) を使用して Azure にアプリケーションをビルドしてデプロイするための簡単な開始点を提供します。 このクイック スタートでは、「 クイック スタート - azd テンプレートをデプロイ する」の記事で示されている概念について説明します。

[前提条件]

ブラウザーでこのクイック スタートを完了するには、次のものが必要です。

  • GitHub Codespaces へのアクセス

または、ローカル ツールを使用してこのクイック スタートを完了するには、次のようにします。

  • ローカル コンピューターにインストールされている Azure Developer CLI
  • Visual Studio Code または選択したエディター
  • ローカル コンピューターにインストールされている Docker デスクトップ

Azure Developer CLI テンプレートの構造を調べる

azd テンプレートは、追加の資産を含む標準コード リポジトリです。 すべての azd テンプレートは、 azd 規則に基づいて同様のファイル構造を共有します。

  • infra フォルダー - すべての Bicep または Terraform インフラストラクチャが azd テンプレートのコード ファイルとして含まれます。 azd は、これらのファイルを実行して、アプリに必要な Azure リソースを作成します。
  • src フォルダー - アプリのソース コードが含まれています。 azd は、 azure.yamlの構成に基づいてコードをパッケージ化してデプロイします。
  • azure.yaml ファイル - プロジェクト内のソース コード フォルダーを、デプロイ用の infra フォルダーに定義されている Azure リソースにマップする構成ファイル。 たとえば、API サービスと Web フロントエンド サービスを別々のフォルダーに定義し、デプロイのために異なる Azure リソースにマップすることができます。
  • .azure フォルダー - リソースをデプロイする場所など、重要な Azure 構成が含まれています。

たとえば、ほとんどの azd テンプレートは、次のフォルダー構造と一致します。

Azure Developer CLIテンプレート構造を示すスクリーンショット。

テンプレート構造の詳細については、 Azure Developer CLI テンプレートの概要 に関する記事 azd 参照してください。

サンプル テンプレートを設定する

hello-azd は、1 つのコマンドを使用して Azure にデプロイできる azd の重要な機能を紹介するように設計されたサンプル テンプレートです。 テンプレートには、 azd に関する情報を含むわかりやすい UI と、サポート チケットをアップロードして表示できる小さなデモ ツールが用意されています。

このテンプレートでは、次の機能がサポートされています。

  • コンテナー化されたアプリをパッケージ化して Azure Container Apps にデプロイする
  • アプリに必要な Azure リソース (Azure Cosmos DB データベースなど) を作成します
  • コマンドを使用して azd pipeline configを自動的に構成できます

テンプレートを設定するには、次の手順に従います。

  1. GitHub で hello-azd テンプレート リポジトリ を開きます。

  2. [ コード ] ボタンを選択し、[ Codespaces] を選択します。

  3. 新しい Codespace を作成して、ブラウザーで完全に構成された開発環境を起動します。 環境が初期化されるまで少し待つ必要がある場合があります。

  4. Codespaces 環境が読み込まれたら、azd コマンドを使用してazd init テンプレートを初期化します。

    azd init -t hello-azd

  5. メッセージが表示されたら、azdなどのhelloazd環境の名前を入力します。

テンプレートを調べる

任意のツールでテンプレートを開くと、フォルダー構造を参照して、テンプレートの動作 azd 調べることができます。

  1. src フォルダーを展開して、アプリのソース コードを表示します。

    • hello-azd テンプレートには、azdについて学習し、サンプル チケット データを管理するための簡単な UI を提供するコンテナー化された .NET アプリが含まれています。 azd では、JavaScript や Python などの他の言語もサポートされています。
    • azd upを実行すると、アプリはコンテナー イメージとしてパッケージ化され、Azure Container Apps にデプロイされます。

  2. infra フォルダーを展開して、コード ファイルとしてインフラストラクチャを探索します。

    • このテンプレートでは、Bicep ファイル (.bicep) を使用して Azure リソースを作成しますが、Terraform (.tf) を使用することもできます。

    • main.bicep ファイルは、infra フォルダー内の他の Bicep モジュール (Azure Storage アカウントなど) を参照して、Azure リソースを作成します。

      // Omitted...

// Create a storage account
module storage './core/storage/storage-account.bicep' = {
    name: 'storage'
    scope: rg
    params: {
    name: !empty(storageAccountName) ? storageAccountName : '${abbrs.storageStorageAccounts}${resourceToken}'
    location: location
    tags: tags
    containers: [
        {
        name: 'attachments'
        }
    ]
    }
}

// Omitted...

  3. テンプレートのルートで、 azure.yaml ファイルを開き、基本的なテンプレート構成を表示します。

    • テンプレートは、 acaと呼ばれる 1 つのサービスを定義します。

    • aca サービス構成では、azd フォルダー内のソース コードをパッケージ化し、前に調べておいた Bicep モジュールによってプロビジョニングされた Azure Container App にデプロイするようにsrcに指示します。

    • docker構成では、アプリをパッケージ化してコンテナーとしてデプロイするようにazdに指示します。

      metadata:
  template: hello-azd-dotnet  # Specifies the template being used
name: azd-starter  # Name of the project
services:
  aca:  # Define the Azure Container App service
    project: ./src  # Path to the source code
    language: csharp  # Programming language
    host: containerapp  # Hosting service
    docker:
      path: ./Dockerfile  # Location of the Dockerfile

テンプレートを更新する

テンプレートを変更して、デプロイされたアプリとリソースに影響を与えることができます。 この例では、アプリに 2 つの小さな変更を加え、デプロイされた結果を調べます。

  • アプリ ヘッダーのウェルカム テキストを独自のメッセージに更新する
  • 作成したストレージ アカウントを更新して、1 つではなく 2 つの BLOB コンテナーを作成するようにします

これらの変更を行うには、次の手順を実行します。

  1. src > Components > Pages フォルダーで、Home.razor コンポーネントを開きます。

  2. ページの上部にある Hello、Azure Developer CLI! ヘッダー テキストを、 Hello、カスタマイズされたテンプレート などの別のメッセージに置き換えて、変更を保存します。

    <MudText Typo="Typo.h2" GutterBottom="true">Hello, customized template!</MudText>

  3. infra フォルダーで、main.bicep ファイルを開きます。

  4. ストレージ アカウントと BLOB コンテナーを作成する 75 行目の Bicep コードのブロックを見つけます。

    // Create a storage account
module storage './core/storage/storage-account.bicep' = {
  name: 'storage'
  scope: rg
  params: {
    name: !empty(storageAccountName) ? storageAccountName : '${abbrs.storageStorageAccounts}${resourceToken}'
    location: location
    tags: tags
    containers: [
      {
        name: 'attachments'
      }
    ]
  }
}

    コードを次のスニペットに置き換えます。

    // Create a storage account
module storage './core/storage/storage-account.bicep' = {
  name: 'storage'
  scope: rg
  params: {
    name: !empty(storageAccountName) ? storageAccountName : '${abbrs.storageStorageAccounts}${resourceToken}'
    location: location
    tags: tags
    containers: [
      {
        name: 'attachments'
      },
      {
        name: 'archive'
      }
    ]
  }
}

テンプレートを実行する

変更を行った後、 azd up コマンドを使用して、アプリ リソースをプロビジョニングしてデプロイします。

  1. プロジェクト ディレクトリでターミナルを開きます。

  2. テンプレートをプロビジョニングしてデプロイするには、 azd up コマンドを実行します。

    azd up

    このコマンドは次の操作を行います:

    • デプロイ用にアプリをパッケージ化する
    • 必要な Azure リソースをプロビジョニングする
    • 更新された変更を使用してアプリケーションをデプロイする
    • デプロイされたアプリケーションの URL を印刷する

  3. 更新されたアプリケーションをライブで表示するには、ブラウザーの azd コンソール出力ログに出力された URL を開きます。

    更新されたアプリ ヘッダーを示すスクリーンショット。

  4. 作成された 2 つの BLOB コンテナーを表示するには、Azure portal で作成されたストレージ アカウントに移動します。

    作成された BLOB コンテナーを示すスクリーンショット。

結論

このクイック スタートでは、 hello-azd テンプレートの構造を調べ、そのアプリケーションとインフラストラクチャをカスタマイズし、Azure Developer CLI を使用して Azure にデプロイしました。 より高度なシナリオについては、他のテンプレートを調べるか、 azd ドキュメントの詳細を確認してください。

次のステップ

  • 最終更新: