クイック スタート:Azure Dev Spaces を使用して Kubernetes 上の Visual Studio Code と Java でデバッグと反復処理を行うQuickstart: Debug and iterate with Visual Studio Code and Java on Kubernetes using Azure Dev Spaces

このガイドでは、以下の方法について説明します。In this guide, you will learn how to:

  • Azure でマネージド Kubernetes クラスターを使用して Azure Dev Spaces をセットアップする。Set up Azure Dev Spaces with a managed Kubernetes cluster in Azure.
  • Visual Studio Code を使用して、コンテナー内のコードを繰り返し開発する。Iteratively develop code in containers using Visual Studio Code.
  • Visual Studio Code で開発空間のコードをデバッグする。Debug the code in your dev space from Visual Studio Code.

前提条件Prerequisites

Azure Kubernetes Service クラスターを作成するCreate an Azure Kubernetes Service cluster

サポートされているリージョンで AKS クラスターを作成する必要があります。You need to create an AKS cluster in a supported region. 下記のコマンドを使用すると、MyResourceGroup というリソース グループと MyAKS という AKS クラスターが作成されます。The below commands create a resource group called MyResourceGroup and an AKS cluster called MyAKS.

az group create --name MyResourceGroup --location eastus
az aks create -g MyResourceGroup -n MyAKS --location eastus --disable-rbac --generate-ssh-keys

AKS クラスターで Azure Dev Spaces を有効にするEnable Azure Dev Spaces on your AKS cluster

use-dev-spaces コマンドを使用して AKS クラスターで Dev Spaces を有効にし、プロンプトに従います。Use the use-dev-spaces command to enable Dev Spaces on your AKS cluster and follow the prompts. 下記のコマンドを使用すると、MyResourceGroup グループ内の MyAKS クラスターで Dev Spaces が有効になり、default 開発空間が作成されます。The below command enables Dev Spaces on the MyAKS cluster in the MyResourceGroup group and creates a default dev space.

$ az aks use-dev-spaces -g MyResourceGroup -n MyAKS

'An Azure Dev Spaces Controller' will be created that targets resource 'MyAKS' in resource group 'MyResourceGroup'. Continue? (y/N): y

Creating and selecting Azure Dev Spaces Controller 'MyAKS' in resource group 'MyResourceGroup' that targets resource 'MyAKS' in resource group 'MyResourceGroup'...2m 24s

Select a dev space or Kubernetes namespace to use as a dev space.
 [1] default
Type a number or a new name: 1

Kubernetes namespace 'default' will be configured as a dev space. This will enable Azure Dev Spaces instrumentation for new workloads in the namespace. Continue? (Y/n): Y

Configuring and selecting dev space 'default'...3s

Managed Kubernetes cluster 'MyAKS' in resource group 'MyResourceGroup' is ready for development in dev space 'default'. Type `azds prep` to prepare a source directory for use with Azure Dev Spaces and `azds up` to run.

サンプル アプリケーション コードを取得するGet sample application code

この記事では、Azure Dev Spaces サンプル アプリケーションを使用して、Azure Dev Spaces の使い方のデモを行います。In this article, you use the Azure Dev Spaces sample application to demonstrate using Azure Dev Spaces.

GitHub からアプリケーションを複製します。Clone the application from GitHub.

git clone https://github.com/Azure/dev-spaces

Visual Studio Code でサンプル アプリケーションを準備するPrepare the sample application in Visual Studio Code

Visual Studio Code を開き、 [ファイル][開く] の順にクリックし、dev-spaces/samples/java/getting-started/webfrontend ディレクトリに移動して、 [開く] をクリックします。Open Visual Studio Code, click File then Open..., navigate to the dev-spaces/samples/java/getting-started/webfrontend directory, and click Open.

これで、webfrontend プロジェクトが Visual Studio Code で開かれました。You now have the webfrontend project open in Visual Studio Code. アプリケーションをご利用の開発スペースで実行するには、コマンド パレット内の Azure Dev Spaces 拡張機能を使用して Docker および Helm チャート資産を作成します。To run the application in your dev space, generate the Docker and Helm chart assets using the Azure Dev Spaces extension in the Command Palette.

Visual Studio Code でコマンド パレットを開くには、 [表示][コマンド パレット] の順にクリックします。To open the Command Palette in Visual Studio Code, click View then Command Palette. Azure Dev Spaces」の入力を開始して、Azure Dev Spaces: Prepare configuration files for Azure Dev Spaces をクリックします。Begin typing Azure Dev Spaces and click on Azure Dev Spaces: Prepare configuration files for Azure Dev Spaces.

Azure Dev Spaces の構成ファイルを準備する

また、Visual Studio Code で基本イメージ、公開ポート、およびパブリック エンドポイントの構成を求められたら、基本イメージに Azul Zulu OpenJDK for Azure (Free LTS)、公開ポートに 8080、パブリック エンドポイントに Yes を選択します。When Visual Studio Code also prompts you to configure your base images, exposed port and public endpoint, choose Azul Zulu OpenJDK for Azure (Free LTS) for the base image, 8080 for the exposed port, and Yes to enable a public endpoint.

基本イメージの選択

公開ポートの選択

パブリック エンドポイントを選択する

このコマンドでは、Dockerfile および Helm チャートを生成することで、ご利用のプロジェクトを Azure Dev Spaces で実行するための準備が行われます。This command prepares your project to run in Azure Dev Spaces by generating a Dockerfile and Helm chart. また、デバッグ構成が含まれた .vscode ディレクトリが、お客様のプロジェクトのルートに生成されます。It also generates a .vscode directory with debugging configuration at the root of your project.

Visual Studio で Kubernetes のコードをビルドして実行するBuild and run code in Kubernetes from Visual Studio

左側の [デバッグ] アイコンをクリックし、上部の [Launch Java Program (AZDS)](Java プログラムの起動 (AZDS)) をクリックします。Click on the Debug icon on the left and click Launch Java Program (AZDS) at the top.

Java プログラムの起動

このコマンドによって、Azure Dev Spaces のサービスがビルドされ、稼働します。This command builds and runs your service in Azure Dev Spaces. 下部にある [ターミナル] ウィンドウに、Azure Dev Spaces が動作しているサービスのビルド出力と URL が表示されます。The Terminal window at the bottom shows the build output and URLs for your service running Azure Dev Spaces. "デバッグ コンソール" にログの出力が表示されます。The Debug Console shows the log output.

注意

"コマンド パレット" に Azure Dev Spaces コマンドが表示されない場合は、Azure Dev Spaces 用 Visual Studio Code 拡張機能がインストールされていることを確認してください。If you don't see any Azure Dev Spaces commands in the Command Palette, make sure you have installed the Visual Studio Code extension for Azure Dev Spaces. また、Visual Studio Code で dev-spaces/samples/java/getting-started/webfrontend ディレクトリを開いたことを確認してください。Also verify you opened the dev-spaces/samples/java/getting-started/webfrontend directory in Visual Studio Code.

パブリック URL を開くと、実行中のサービスを確認できます。You can see the service running by opening the public URL.

[デバッグ][デバッグの停止] の順にクリックして、デバッガーを停止します。Click Debug then Stop Debugging to stop the debugger.

コードの更新Update code

サービスの更新バージョンをデプロイするには、ご自分のプロジェクトにある任意のファイルを更新して、 [Launch Java Program (AZDS)](Java プログラムの起動 (AZDS)) を再実行します。To deploy an updated version of your service, you can update any file in your project and rerun Launch Java Program (AZDS). 例:For example:

  1. ご利用のアプリケーションがまだ実行されている場合は、 [デバッグ][デバッグの停止] の順にクリックしてそれを停止します。If your application is still running, click Debug then Stop Debugging to stop it.

  2. src/main/java/com/ms/sample/webfrontend/Application.java の 19 行目を以下に更新します。Update line 19 in src/main/java/com/ms/sample/webfrontend/Application.java to:

    return "Hello from webfrontend in Azure!";
    
  3. 変更を保存します。Save your changes.

  4. [Launch Java Program (AZDS)](Java プログラムの起動 (AZDS)) を再実行します。Rerun Launch Java Program (AZDS).

  5. 稼働中のご自分のサービスに移動して、変更を確認します。Navigate to your running service and observe your changes.

  6. [デバッグ][デバッグの停止] の順にクリックして、ご自分のアプリケーションを停止します。Click Debug then Stop Debugging to stop your application.

デバッグ用のブレークポイントを設定して使用するSetting and using breakpoints for debugging

[Launch Java Program (AZDS)](Java プログラムの起動 (AZDS)) を使用して、サービスを開始します。Start your service using Launch Java Program (AZDS). また、これによりサービスがデバッグ モードで実行されます。This also runs your service in debugging mode.

[表示][エクスプローラー] の順にクリックして、 [エクスプローラー] ビューに戻ります。Navigate back to the Explorer view by clicking View then Explorer. src/main/java/com/ms/sample/webfrontend/Application.java を開き、19 行目のどこかをクリックして、カーソルをそこに置きます。Open src/main/java/com/ms/sample/webfrontend/Application.java and click somewhere on line 19 to put your cursor there. ブレークポイントを設定するには、F9 キーを押すか、 [デバッグ][ブレークポイントの設定/解除] の順にクリックします。To set a breakpoint hit F9 or click Debug then Toggle Breakpoint.

ブラウザーでサービスを開き、メッセージが表示されないことに注目します。Open your service in a browser and notice no message is displayed. Visual Studio Code に戻って、19 行目が強調表示されていることを確認します。Return to Visual Studio Code and observe line 19 is highlighted. 設定したブレークポイントによって、19 行目でサービスが一時停止されました。The breakpoint you set has paused the service at line 19. サービスを再開するには、F5 キーを押すか、 [デバッグ][続行] の順にクリックします。To resume the service, hit F5 or click Debug then Continue. ブラウザーに戻って、メッセージが表示されたことに注目します。Return to your browser and notice the message is now displayed.

デバッガーがアタッチされた状態で Kubernetes でサービスを稼働している間、デバッグ情報 (呼び出し履歴、ローカル変数、例外情報など) にフル アクセスできます。While running your service in Kubernetes with a debugger attached, you have full access to debug information such as the call stack, local variables, and exception information.

src/main/java/com/ms/sample/webfrontend/Application.java の 19 行目にカーソルを置いて F9 キーを押すことで、ブレークポイントを削除します。Remove the breakpoint by putting your cursor on line 19 in src/main/java/com/ms/sample/webfrontend/Application.java and hitting F9.

Visual Studio Code でコードを更新するUpdate code from Visual Studio Code

デバッグ モードでサービスが稼働している間に、src/main/java/com/ms/sample/webfrontend/Application.java の 19 行目を更新します。While the service is running in debugging mode, update line 19 in src/main/java/com/ms/sample/webfrontend/Application.java. 例:For example:

return "Hello from webfrontend in Azure while debugging!";

ファイルを保存します。Save the file. [デバッグ][デバッグの再起動] の順にクリックします。または、 [デバッグ] ツール バーで、 [デバッグの再起動] ボタンをクリックします。Click Debug then Restart Debugging or in the Debug toolbar, click the Restart Debugging button.

デバッグの更新

ブラウザーでサービスを開き、更新されたメッセージが表示されることに注目します。Open your service in a browser and notice your updated message is displayed.

Azure Dev Spaces では、コードが編集されるたびに新しいコンテナー イメージをリビルドして再デプロイするのではなく、既存のコンテナー内でコードの増分再コンパイルを実行して、編集とデバッグのループを高速化します。Instead of rebuilding and redeploying a new container image each time code edits are made, Azure Dev Spaces incrementally recompiles code within the existing container to provide a faster edit/debug loop.

Azure リソースをクリーンアップするClean up your Azure resources

az group delete --name MyResourceGroup --yes --no-wait

次の手順Next steps

Azure Dev Spaces を使用して複数のコンテナーにまたがるより複雑なアプリケーションを開発する方法と、別の空間で別のバージョンまたは分岐を使用して作業することによって共同開発を簡略化する方法について学習します。Learn how Azure Dev Spaces helps you develop more complex applications across multiple containers, and how you can simplify collaborative development by working with different versions or branches of your code in different spaces.