クイック スタート:Azure Dev Spaces を使用して Kubernetes 上の Visual Studio Code と Node.js でデバッグと反復処理を行うQuickstart: Debug and iterate with Visual Studio Code and Node.js 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.

Azure Dev Spaces では、次のものを使用してデバッグと反復処理を行うこともできます。Azure Dev Spaces also allows you debug and iterate using:

前提条件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.

注意

この use-dev-spaces コマンドでは、Azure Dev Spaces CLI がまだインストールされていない場合にはこれもインストールされます。The use-dev-spaces command will also install the Azure Dev Spaces CLI if its not already installed. Azure Dev Spaces CLI を Azure Cloud Shell にインストールすることはできません。You cannot install the Azure Dev Spaces CLI in the Azure Cloud Shell.

$ 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/nodejs/getting-started/webfrontend ディレクトリに移動して、 [開く] をクリックします。Open Visual Studio Code, click File then Open..., navigate to the dev-spaces/samples/nodejs/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 からパブリック エンドポイントを構成するように求められた場合は、Yes を選択してパブリック エンドポイントを有効にします。When Visual Studio Code also prompts you to configure your public endpoint, choose 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 Code で Kubernetes のコードをビルドして実行するBuild and run code in Kubernetes from Visual Studio Code

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

サーバーの起動

このコマンドによって、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/nodejs/getting-started/webfrontend ディレクトリを開いたことを確認してください。Also verify you opened the dev-spaces/samples/nodejs/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 Server](サーバーの起動) を再実行します。To deploy an updated version of your service, you can update any file in your project and rerun Launch Server. 例:For example:

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

  2. server.js の 13 行目を以下に更新します。Update line 13 in server.js to:

        res.send('Hello from webfrontend in Azure');
    
  3. 変更を保存します。Save your changes.

  4. [Launch Server](サーバーの起動) を再実行します。Rerun Launch Server.

  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 Server (AZDS)](サーバーの起動 (AZDS)) を使用して、サービスを開始します。Start your service using Launch Server (AZDS).

[表示][エクスプローラー] の順にクリックして、 [エクスプローラー] ビューに戻ります。Navigate back to the Explorer view by clicking View then Explorer. server.js を開き、13 行目のどこかをクリックして、カーソルをそこに置きます。Open server.js and click somewhere on line 13 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 に戻って、13 行目が強調表示されていることを確認します。Return to Visual Studio Code and observe line 13 is highlighted. 設定したブレークポイントによって、13 行目でサービスが一時停止されました。The breakpoint you set has paused the service at line 13. サービスを再開するには、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.

server.js の 13 行目にカーソルを置いて F9 キーを押すことで、ブレークポイントを削除します。Remove the breakpoint by putting your cursor on line 13 in server.js and hitting F9.

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

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

デバッグ モードを [Attach to a Server (AZDS)](サーバーへのアタッチ (AZDS)) に変更して、サービスを開始します。Change the debug mode to Attach to a Server (AZDS) and start the service:

このコマンドによって、Azure Dev Spaces のサービスがビルドされ、稼働します。This command builds and runs your service in Azure Dev Spaces. また、サービスのコンテナーで nodemon プロセスが開始され、VS Code がそれにアタッチされます。It also starts a nodemon process in your service's container and attaches VS Code to it. nodemon プロセスでは、ソース コードに変更が加えられた際の自動再起動が可能であり、自分のローカル コンピューターでの開発と同様のより高速な内部ループ開発が実現します。The nodemon process allows for automatic restarts when source code changes are made, enabling faster inner loop development similar to developing on your local machine.

サービスの開始後、ブラウザーを使用してそこに移動し、それを操作します。After the service starts, navigate to it using your browser and interact with it.

サービスが稼働している間に、VS Code に戻って server.js の 13 行目を更新します。While the service is running, return to VS Code and update line 13 in server.js. 例:For example:

    res.send('Hello from webfrontend in Azure while debugging!');

ファイルを保存して、ブラウザーでサービスに戻ります。Save the file and return to your service in a browser. サービスを操作して、更新されたメッセージが表示されることに注目します。Interact with the service and notice your updated message is displayed.

nodemon の実行中、コードの変更が検出されると、すぐに Node プロセスが自動的に再起動されます。While running nodemon, the Node process is automatically restarted as soon as any code changes are detected. この自動再起動プロセスは、自分のローカル コンピューターでサービスを編集して再起動するエクスペリエンスに似ていて、内部ループ開発エクスペリエンスを提供します。This automatic restart process is similar to the experience of editing and restarting your service on your local machine, providing an inner loop development experience.

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.