プロジェクトを Azure Developer CLI に対応させる

Azure Developer CLI (azd) を使用すると、開発者は GitHub でホストされているテンプレートを使用して、クラウド用のアプリケーションをスキャフォールディングできます。 Microsoft では、作業を開始するための いくつかのテンプレート が用意されています。 この記事では、独自のアプリケーションを azd に対応させる方法を学びます。

テンプレート アーキテクチャを理解する

次の図は、azd テンプレートを作成するプロセスの概要を示しています。

すべての azd テンプレートは、azd 規則に基づいて同じファイル構造を持ちます。 次の階層は、このチュートリアルでビルドするディレクトリ構造体を示しています。

├── .azdo                                        [ Configures an Azure Pipeline ]
├── .devcontainer                                [ For DevContainer ]
├── .github                                      [ Configures a GitHub workflow ]
├── .vscode                                      [ VS Code workspace configurations ]
├── .azure                                       [ Stores Azure configurations and environment variables ]
├── infra                                        [ Contains infrastructure as code files ]
│   ├── main.bicep/main.tf                       [ Main infrastructure file ]
│   ├── main.parameters.json/main.tfvars.json    [ Parameters file ]
│   └── core/modules                             [ Contains reusable Bicep/Terraform modules ]
└── azure.yaml                                   [ Describes the app and type of Azure resources]

テンプレートを初期化する

この azd init コマンドは、アプリ リソースをプロビジョニングして Azure にデプロイするためにアプリケーションを初期化するために使用されます。 このコマンドを実行すると、次のセクションで説明するテンプレートを初期化するために、2 つの異なるワークフローから選択するように求められます。

• 現在のディレクトリのコードを使用する: このオプションを選択すると、ディレクトリ内のコードを分析して、プログラミング言語、フレームワーク、データベース システムなど、使用するテクノロジを識別するように指示 azd できます。 azd では、サービス定義ファイルや、コードとしてのインフラストラクチャ ファイルを azure.yaml 含むフォルダーなど、テンプレート資産が infra 自動的に生成されます。

• テンプレートを選択する: 既存のテンプレートを開始点として使用するには、このオプションを選択します。 既定では、 azd Awesome AZD ギャラリーからテンプレートを参照できますが、独自のテンプレート ギャラリーを構成することもできます。 テンプレートを選択すると、そのテンプレートのアセットが既存のプロジェクト ディレクトリに追加されます。

これらの各ワークフローの詳細については、以下のセクションで説明します。

ディレクトリでコードを使用する

1. 独自のプロジェクトを使用して、先に進む手順に従うことができます。 ただし、サンプル アプリケーションを使用する場合は、次のスターター リポジトリをコンピューター上の空のディレクトリに複製します。

   git clone https://github.com/Azure-Samples/msdocs-python-flask-webapp-quickstart
   

2. プロジェクトのルート ディレクトリに任意のコマンド ライン ツールを開きます。

3. コマンドを azd init 実行してテンプレートを初期化します。

   azd init
   

4. メッセージが表示されたら、現在のディレクトリのコードを使用する オプションを選択します。 azd はプロジェクトを分析し、検出されたサービスと推奨される Azure ホスティング リソースの概要を提供します。

5. [確認] を選択 し、アプリの初期化を続行します。 azd は、プロジェクトのルート ディレクトリに次の資産を生成します。

   • 適切な azure.yaml サービス定義を持つファイル。
   • infraプロジェクトをプロビジョニングして Azure にデプロイするためのコードとしてのインフラストラクチャ ファイルを含むフォルダー。
   • .azure環境変数がファイルに設定されている.envフォルダー。

   この検出と生成プロセスの詳細については、この記事の後半で説明します。

6. 生成されたファイルは、提供されたサンプル アプリに対してもそのまま動作し、独自のアプリでも使用できます。 必要に応じて、生成されたファイルをニーズに合わせて変更できます。 たとえば、アプリが識別azdされたリソース以外の Azure リソースに依存している場合は、フォルダー内infraのコードとしてのインフラストラクチャ ファイルをさらに変更する必要がある場合があります。

7. コマンドを azd up 実行して、アプリをプロビジョニングして Azure にデプロイします。

   azd up
   

8. メッセージが表示されたら、目的のサブスクリプションと場所を選択して、プロビジョニングとデプロイのプロセスを開始します。

9. プロセスが完了したら、出力内のリンクを azd クリックして、ブラウザーでアプリを開きます。

初期化手順を調べる

現在のディレクトリ ワークフローで [コードの使用] を選択すると、コマンドによってプロジェクトが分析され、azd init検出された内容に基づいてコードが自動生成されます。 以下のセクションでは、このプロセスのしくみと、現在サポートされているテクノロジの詳細について説明します。

検出

このコマンドは azd init 、プロジェクト ディレクトリとサブディレクトリにあるサポートされている言語のプロジェクト ファイルを検出します。 azd また、パッケージの依存関係をスキャンして、アプリが使用する Web フレームワークまたはデータベースに関する情報を収集します。 必要に応じて、確認の概要プロンプトに示されているように、検出されたコンポーネントを手動で追加または編集できます。

現在の検出ロジックは次のとおりです。

• サポートされている言語:
  • Python
  • JavaScript/TypeScript
  • .NET
  • Java
• サポートされているデータベース:
  • MongoDB
  • PostgreSQL
• Python と JavaScript/TypeScript では、Web フレームワークとデータベースが自動的に検出されます。
• JavaScript/TypeScript プロジェクトがフロントエンド (またはクライアント側) の Web フレームワークを使用する場合は、フロントエンド サービスとして分類されます。 サービスで現在検出されていないフロントエンド Web フレームワークを使用している場合は、JQuery を選択して同等のフロントエンド サービスの分類と動作を提供できます。

世代

検出されたコンポーネントを確認したら、 azd init アプリケーションを Azure にデプロイするために必要なコードとしてのインフラストラクチャ ファイルを生成します。

生成ロジックは次のとおりです。

• サポートされているホスト:
  • Azure Container Apps。
• データベースの場合、データベース テクノロジとサービスの間でサポートされているマッピングが使用されます。
  • MongoDB: MongoDB 用 Azure CosmosDB API
  • PostgreSQL: Azure Database for PostgreSQL フレキシブル サーバー
  • Redis: Azure Container Apps Redis アドオン
• データベースを使用するサービスには、既定で事前構成されたデータベースへの接続を提供する環境変数があります。
• フロントエンド サービスとバックエンド サービスの両方が検出されると、バックエンド サービスに対する Azure ホスト上の CORS 構成が更新され、フロントエンド サービスの既定のホスティングが許可されますメイン。 これは、コード構成ファイルとしてのインフラストラクチャで必要に応じて変更または削除できます。

開発コンテナーのサポートを追加する

また、テンプレートを開発コンテナーや Codespaces と互換性のあるものにすることもできます。 開発コンテナーを使用すると、コンテナーをフル機能の開発環境として使用できます。 これはアプリケーションの実行、コードベースの操作に必要なツール、ライブラリ、またはランタイムの分離、継続的インテグレーションとテストの支援に使用できます。 開発コンテナーは、プライベート クラウドまたはパブリック クラウドでローカルまたはリモートで実行できます。 (ソース: https://containers.dev/)

開発コンテナーのサポートを追加するには:

1. プロジェクトのルートに .devcontainer フォルダーを作成します。

2. 目的の構成で devcontainer.json フォルダー内に .devcontainer ファイルを作成します。 azdスターター テンプレートには、プロジェクトにコピーして必要に応じて変更できるサンプル devcontainer.json ファイルが用意されています。

開発コンテナーの操作の詳細については、Visual Studio Code のドキュメントを参照してください。

CI/CD パイプラインのサポートを追加する

次の手順を使用して、GitHub アクションまたは Azure DevOps を使用して、テンプレートに CI/CD のサポートを追加することもできます。

1. GitHub アクション用の .github フォルダーまたは .ado Azure DevOps 用のフォルダーをプロジェクトのルートに追加します。

2. ワークフロー ファイルを新しいフォルダーに追加します。 スターター テンプレートには azd 、 プロジェクトにコピーして必要に応じて変更できる各プラットフォーム用のサンプル GitHub Actions ワークフロー ファイル と サンプル Azure DevOps Pipelines ファイルが用意されています。

3. また、ワークフローを main.parameters.json 実行するために必要な環境変数を使用して infra 、フォルダー内のファイルを更新する必要がある場合もあります。

テンプレートの使用

テンプレート の 選択ワークフローでは、開始点として使用する既存 azd のテンプレートを選択できます。 選択したテンプレートの内容がプロジェクトのルート ディレクトリに追加されます。 ほとんどのテンプレートには必要なファイルとフォルダーのセットが用意されており、一部の azd テンプレートには、選択したアプリケーション スタック用に Azure リソースをプロビジョニングするための完全なコードとしてのインフラストラクチャ ファイルが含まれています。

この例では、スターター - Bicep テンプレートを使用します。このテンプレートには、テンプレートのazd基本的な構造と、使用を開始するための便利な定型コードが含まれています。

1. 既存のサンプル アプリケーションを使用する前の手順に従うために、次のスターター プロジェクトをコンピューター上の空のディレクトリに複製します。

   git clone https://github.com/Azure-Samples/msdocs-python-flask-webapp-quickstart
   

2. 選択したコマンド ライン ツールで、複製されたプロジェクトのルート ディレクトリに移動します。

3. コマンドを azd init 実行してテンプレートを azd 初期化します。

   azd init
   

4. メッセージが表示されたら、テンプレートを選択するオプションを 選択します。

5. テンプレートの一覧から [Starter - Bicep] を選択します。 テンプレートを見つけるには、キーボードの方向キーを使用して一覧をスクロールする必要がある場合があります。

6. プロンプトが表示されたら、testenv などの短い環境名を入力します。

7. 実行 azd initすると、次のアセットがプロジェクトに追加されます。

   ├── .azdo                                        [ Configures an Azure Pipeline ]
   ├── .devcontainer                                [ For DevContainer ]
   ├── .github                                      [ Configures a GitHub workflow ]
   ├── .vscode                                      [ VS Code workspace configurations ]
   ├── .azure                                       [ Stores Azure configurations and environment variables ]
   ├── infra                                        [ Contains infrastructure as code files ]
   │   ├── main.bicep/main.tf                       [ Main infrastructure file ]
   │   ├── main.parameters.json/main.tfvars.json    [ Parameters file ]
   │   └── core/modules                             [ Contains reusable Bicep/Terraform modules ]
   └── azure.yaml                                   [ Describes the app and type of Azure resources]
   

Bicep ファイルを更新する

これで、プロジェクトにテンプレートのコア構造とアセットが azd 含まれるようになりました。 ただし、特定のプロジェクト用に Azure リソースをプロビジョニングするには、フォルダー内の Bicep ファイルを infra 更新する必要があります。 サンプル アプリケーションをホストするには、次のリソースが必要です。

• Azure App Service プラン
• Linux 上で実行される Azure App Service

1. Visual Studio Code など、任意のエディターで最上位レベルのプロジェクト ディレクトリを開きます。

2. エディターでファイルを main.bicep 開きます。 このファイルには、重要な変数、パラメーター、名前付け規則を設定するための便利な定型コードが含まれています。 50 行目のコメント ブロックの下に Add resources to be provisioned below、次の Bicep を追加します。

   // Creates an app service instance to host the app
   module web './core/host/appservice.bicep' = {
     name: 'web'
     scope: rg
     params: {
       name: '${abbrs.webSitesAppService}web-${resourceToken}'
       location: location
       tags: union(tags, { 'azd-service-name': 'web' })
       appServicePlanId: appServicePlan.outputs.id
       runtimeName: 'python'
       runtimeVersion: '3.8'
       scmDoBuildDuringDeployment: true
     }
   }
   
   // Create an App Service Plan to group applications under the same payment plan and SKU
   module appServicePlan './core/host/appserviceplan.bicep' = {
     name: 'appserviceplan'
     scope: rg
     params: {
       name: '${abbrs.webServerFarms}${resourceToken}'
       location: location
       tags: tags
       sku: {
         name: 'B1'
       }
     }
   }
   

   Note

   • サブスクリプション ID に基づいて一意の文字列が生成され、変数として ${resourceToken} 使用されます。 このトークンは、azd によって作成されたすべての Azure リソースの名前に追加されます。 azd はタグを使用してリソースを識別するので、組織の名前付け規則に基づいて名前を変更できます。
   • App Service のタグは 'azd-service-name': 'web' 、デプロイ ホストを識別するために使用される値 azd です。 この値は、azure.yaml ファイル内のサービスに定義されているものと同じである必要があります。

azure.yaml ファイルを更新する

アプリをデプロイするには、azd はアプリの詳細を知る必要があります。 このファイルは azure.yaml 、アプリ内の各サービスのソース コードの場所、言語、および Azure ホスティング サービスを定義するために使用されます。 完全な詳細情報については、「azure.yaml スキーマ」を参照してください。

1. プロジェクトの azure.yaml ルートを開きます。

2. ファイルの下部に次の行を追加します。

   name: msdocs-python-flask-webapp-quickstart
   services:
     web:
       project: .
       language: py
       host: appservice
   

テンプレートをプロビジョニングしてデプロイする

1. すべての変更を保存し、次のコマンドを実行して、アプリ リソースをプロビジョニングして Azure にデプロイします。

   azd up
   

2. コマンドが完了したら、コマンド出力のリンクをクリックして、デプロイされたサイトに移動します。

これで、プロジェクトは Azure Developer CLI と互換性があり、テンプレートとして使用できます。

Note

azdでは、既定でアプリをコンテナー化するための Buildpack の使用もサポートされています。 テンプレートが azd Azure Container Apps または Azure Kubernetes Service を対象とするが、Docker ファイルが含まれていない場合は、 azd Buildpack を使用してイメージが自動的に生成されます。

CI/CD パイプラインを構成する

テンプレートに GitHub Actions または Azure Pipelines のサポートが含まれている場合は、次の手順を使用して CI/CD パイプラインを構成できます。

1. 次のコマンドを実行して、リポジトリに更新をプッシュします。 この更新により、GitHub Actions ワークフローがトリガーされます。

   azd pipeline config    
   

2. ブラウザーを使用して、プロジェクトの GitHub リポジトリに移動します。

3. [アクション] を選択して、ワークフローが実行されているのを確認します。

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

この記事で作成したリソースが不要になったら、次のコマンドを実行してください:

azd down

関連項目

• Bicepファイルの操作の概要については、「Visual Studio Code を使用して Bicep ファイルを作成する」を参照してください。
• Bicep サンプル
• Azure Resource Manager テンプレート (ARM テンプレート) を Bicep に逆コンパイルする方法
• Azure Developer CLI の azure.yaml スキーマ

サポートを要求します

バグ報告、支援要請、または Azure Developer CLI の新機能の提案を行う方法については、トラブルシューティングとサポートのページを参照してください。

次のステップ

Azure Developer CLI FAQ