次の方法で共有

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

  • [アーティクル]

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

前提条件

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」と入力して選択します。

    Screenshot of the option to initialize a new app.

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

    Screenshot of selecting the todo-nodejs-mongo sample template.

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

ファイル 説明
launch.json デバッグ Web や デバッグ API などのデバッグ構成を定義します。 デバッグ構成オプションを表示するには、[表示] メニューから [実行] を選択します。 利用可能なデバッグ構成は、ウィンドウの上部に一覧表示されます。 Visual Studio Code でのデバッグの詳細については、「デバッグ」を参照してください。
tasks.json Web サーバーまたは API サーバーを起動するための構成を定義します。 これらの構成オプションを表示するには、コマンド パレットを開き、タスク: 実行タスクを実行します。 Visual Studio Code タスクの詳細については、「タスクを使用した外部ツールとの統合」を参照してください。

Note

C# SWA-func MS SQL テンプレートを使用している場合は、API の開始タスクを手動で開始してから、API をデバッグする (F5) 必要があります。 実行中の .NET プロセスの一覧から選択するように求められたら、アプリケーションの名前を索して選択します。

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

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

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

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

    Screenshot of option to provision the Azure resources for a new app.

API をデバッグする

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

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

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

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

    Screenshot of setting the debug configuration to Debug API.

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

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

    Screenshot of the message in the Debug Console indicating the debugger is listening on port 3100.

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

    Screenshot of using cURL to connect to the API server.

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

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

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

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

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

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

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

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

    Screenshot of running a Visual Studio Code Task.

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

    Screenshot of selecting the option to Start API and Web.

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

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

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

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

    Screenshot of setting the debug configuration to Debug Web.

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

    Screenshot of the sample Node JS Mongo DB app.

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

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

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

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

前提条件

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

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

    Note

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

  2. Visual Studio Preview を開きます。

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

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

    Screenshot of the Visual Studio option to turn on integration with the Azure Developer CLI.

API ソリューションを開く

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

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

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

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

    Screenshot of the message indicating the Azure Developer CLI is initialized.

実行とデバッグ

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

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

    Screenshot of the breakpoint set in the sample code.

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

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

    Screenshot of the status bar message indicating the debugger is listening on port 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. ドロップダウン メニューで、次のいずれかを選択します。

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

    Screenshot of the options to manage the Azure Developer CLI environment in Visual Studio.

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

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

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

    Screenshot of option to provision Azure Developer CLI environment resources in Visual Studio.

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

アプリを公開する

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

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

  2. 公開を選択します。

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

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

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

    Screenshot of message in Debug Console indicating debugger is listening on port 3100.

  6. 環境を選択する。

  7. 完了を選択します。

その他のリソース

サポートを要求します

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

次のステップ

GitHub Actions を使用してパイプラインを構成し、更新をプッシュする