Azure Developer CLI で有効になっているアプリの実行とデバッグ

Azure Developer CLI (azd) 用の Visual Studio Code 拡張機能を使用して、ローカル コンピューターでアプリを実行およびデバッグします。 このガイドでは、Azure 上で Node.js API と MongoDB を使用した React Web アプリのテンプレートを使用します。 この記事で学習した原則は、任意のAzure 開発者 CLI テンプレートに適用できます。

前提条件

• azd をインストールする
• Node.js テンプレートで azd を実行する
• npm を使用した Node.js (v 16.13.1 LTS)

Azure Developer CLI 用の Visual Studio Code 拡張機能のインストール

Visual Studio Code 経由

1. Visual Studio Code を開きます。

2. [表示] メニューの [拡張子] を選択します。

3. 検索フィールドに「Azure Developer CLI」と入力します。

4. [インストール] を選択します。

マーケットプレイス経由

1. ブラウザーを使用して、[Azure Developer CLI - VS Code 拡張機能] ページに移動します。

2. [インストール] を選択します。

新しいアプリを初期化する

1. Visual Studio Code で新しいディレクトリを作成して開きます。

2. [表示] メニューの [コマンド パレット] を選択します。

3. 「Azure Developer: init」と入力して選択します。

   

4. Azure-Samples/todo-nodejs-mongo テンプレートを選択します。

   

.vscode ディレクトリに含まれる次のファイルを調べます。

Azure リソースのプロビジョニング

デバッグを開始する前に、必要な Azure リソースをプロビジョニングします。

1. コマンド パレットを開きます。

2. 「Azure Developer: Provision Azure resources」と入力します。

   

API をデバッグする

デバッグ構成 Debug APIは、API サーバーを自動的に実行し、デバッガーをアタッチします。 このパターンをテストするには、次の手順を実行します。

1. プロジェクトの src/api/src/routes ディレクトリから、lists.ts を開きます。

2. 16 行目にブレークポイントを設定します。

3. アクティビティ バーで、[実行とデバッグ]>[API のデバッグ] デバッグ構成 >[デバッグの開始] 矢印を選択します。

   

4. [表示] メニューから、[デバッグ コンソール] を選択します。

5. デバッガーがポート 3100 でリッスン中であることを示すメッセージを待ちます。

   

6. 任意のターミナル シェルで、「curl http://localhost:3100/lists」 のコマンドを入力します。

   

7. 以前に設定したブレークポイントにヒットすると、アプリの実行が一時停止します。 この時点で、次のような標準的なデバッグ タスクを実行できます。

   • 変数の検査
   • 呼び出し履歴を確認する
   • 他のブレークポイントを設定します。

8. [<F5>] キーを押してアプリの実行を続行します。 サンプル アプリは空のリストを返します。

React フロントエンド アプリをデバッグする

デバッグ Web 構成を使用するには、次の両方を開始する必要があります。

• API サーバー
• 開発 Web サーバー

このパターンをテストするには、次の手順を実行します。

1. コマンド パレットを開き、[タスク: タスクを実行] を実行します。

   

2. [API と Web の開始] を入力して選択する

   

   Web ブラウザーで次の URL に移動して、ローカル Web サーバーが動作しているかどうかを確認します: http://localhost:3000。

3. プロジェクトの src/web/src/components ディレクトリで、todoItemListPane.tsx を開きます。

4. 150 行目 (deleteItems 関数の最初の行) にブレークポイントを設定します。

5. アクティビティ バーで、[実行とデバッグ]>[Web のデバッグ] デバッグ構成 >[デバッグの開始] 矢印を選択します。

   

6. Web アプリを実行すると、既定のブラウザーで http://localhost:3000 の URL が開く原因となります。 アイテムを追加し、一覧から選択し、[削除] を選択することで、アプリをデバッグできるようになりました。

   

7. 以前に設定したブレークポイントにヒットすると、アプリの実行が一時停止します。 この時点で、次のような標準的なデバッグ タスクを実行できます。

   • 変数の検査
   • 呼び出し履歴を確認する
   • 他のブレークポイントを設定する

8. [<F5>] キーを押してアプリの実行を続行すると、選択した項目が削除されます。

Visual Studio と Azure Developer CLI (azd) を使用して、ローカル コンピューター上でビルドされたアプリを実行およびデバッグします。 このガイドでは、Azure 上で C# API と MongoDB を使用した React Web アプリのテンプレートを使用します。 この記事で学習した原則は、任意のAzure 開発者 CLI テンプレートに適用できます。

前提条件

• azd をインストールする
• Node.js テンプレートで azd を実行する
• .NET SDK 6.0

プレビュー機能をインストールして有効にする

1. Visual Studio Preview をインストールする

   Note

   これは Visual Studio とは異なります。 Visual Studio のプレビュー以外のバージョンがある場合でも、これをインストールする必要があります。

2. Visual Studio Preview を開きます。

3. [ツール]メニューから [オプション]>[プレビュー機能] を選択します。

4. azd との統合、Azure Developer CLI が有効になっていることを確認します。

   

API ソリューションを開く

1. /src/api ディレクトリで Todo.Api.sln ソリューションを開きます。

   azd 統合機能を有効にしている場合は、azure.yaml ファイルが検出されます。 Visual Studio がアプリ モデルを自動的に初期化し、azd env refresh を実行します。

2. [接続済みサービス] を展開して、すべての依存関係を表示します。

   Azure App Service で実行されている Web フロントエンドは、API ソリューションの一部ではありませんが検出され、サービスの依存関係に含められます

   

実行とデバッグ

1. プロジェクトの src/api ディレクトリから、ListController.cs を開きます。

2. 20 行目にブレークポイントを設定します。

   

3. [<F5>] をクリックします。

4. Web サーバーがポート 3101 でリッスン中であることを示すメッセージを待ちます。

   

5. お好きなブラウザで、https://localhost:3101/lists のアドレスを入力してください。

6. 以前に設定したブレークポイントにヒットすると、アプリの実行が一時停止します。 この時点で、次のような標準的なデバッグ タスクを実行できます。

   • 変数の検査
   • 呼び出し履歴を確認する
   • 他のブレークポイントを設定する

7. [<F5>] キーを押してアプリの実行を続行します。

   サンプル アプリは、リスト (以前に Web フロントエンドを起動していない場合は空のリスト) を返します。

   [{"id":"fb9c1cb3811349b993421fc0e815c4c1","name":"My List","description":null,"createdDate":"2022-06-27T01:10:16.7721172+00:00","updatedDate":null}]
   

その他の azd 統合

azd 環境の管理

azd 環境を管理するには:

1. [サービスの依存関係] ペインの右上隅にある [...] アイコンを選択します。

2. ドロップダウン メニューで、次のいずれかを選択します。

   • 新規環境の作成
   • 特定の環境を現在のアクティブな環境として選択して設定する
   • 環境のプロビジョニングを解除する

   

環境リソースをプロビジョニングする

ご自分の環境に Azure リソースをプロビジョニングできます。

1. [接続済みサービス] で、右上のアイコンをクリックして、環境リソースを復元/プロビジョニングします。

   

2. 環境名、サブスクリプション、場所を確認します。

アプリを公開する

更新を行う場合は、次の手順を実行してアプリを発行できます。

1. ソリューション エクスプローラーで、[接続済みサービス] を展開します。

2. 公開を選択します。

3. [発行プロファイルの追加] を選択します。

4. [Azure の ターゲット] を選択し、[次へ] を選択します。

5. [Azure Developer CLI Environment] を選択し、[次へ] を選択します。

   

6. 環境を選択する。

7. 完了を選択します。

その他のリソース

• Visual Studio 接続済みサービス
• Visual Studio での発行ツールの概要