VS Codeのエージェントモードを拡張するには、を試してください！

Docker Compose の使用

Docker Compose は、連携して動作する複数のコンテナーをオーケストレーションする方法を提供します。たとえば、リクエストを処理するサービスとフロントエンド Web サイト、または Redis キャッシュなどのサポート機能を使用するサービスなどです。アプリ開発にマイクロサービス モデルを使用している場合は、Docker Compose を使用して、アプリ コードを Web リクエストを使用して通信する複数の独立して実行されるサービスに分割できます。この記事は、Node.js、Python、.NET のいずれであっても、アプリで Docker Compose を有効にするのに役立ち、また、これらのシナリオで Visual Studio Code のデバッグを構成するのにも役立ちます。

また、単一コンテナーのシナリオでは、Docker Compose を使用することで、単一の Dockerfile では不可能なツールに依存しない構成が可能になります。コンテナーのボリュームマウント、ポートマッピング、環境変数などの構成設定は、docker-compose YML ファイルで宣言できます。

VS Code でコンテナー ツール拡張機能を使用して Docker Compose を使用するには、Docker Compose の基本に精通している必要があります。

プロジェクトへの Docker Compose サポートの追加

すでに 1 つ以上の Dockerfile がある場合は、コマンド パレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) を開き、Containers: Add Docker Compose Files to Workspace コマンドを使用して Docker Compose ファイルを追加できます。プロンプトに従ってください。

コマンド パレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) を開き、Containers: Add Docker Files to Workspace コマンドを使用することで、Dockerfile を追加すると同時に Docker Compose ファイルをワークスペースに追加できます。Docker Compose ファイルを追加するかどうか尋ねられます。既存の Dockerfile を保持したい場合は、Dockerfile を上書きするかどうか尋ねられたら No を選択してください。

コンテナー ツール拡張機能は、docker-compose.yml ファイルをワークスペースに追加します。このファイルには、本番環境で想定されるコンテナーを起動するための構成が含まれています。場合によっては、docker-compose.debug.yml も生成されます。このファイルは、デバッガーを有効にするための簡素化された起動モードを提供します。

Screenshot of project with docker-compose files

VS Code のコンテナー ツール拡張機能は、すぐに使えるファイルを生成しますが、シナリオに合わせて最適化するためにカスタマイズすることもできます。その後、Containers: Compose Up コマンド (docker-compose.yml ファイルを右クリックするか、コマンド パレットでコマンドを見つけます) を使用して、すべてを一度に開始できます。また、VS Code のコマンドプロンプトまたはターミナル ウィンドウから docker-compose up コマンドを使用してコンテナーを開始することもできます。Docker Compose の動作を構成する方法と、使用可能なコマンドライン オプションについては、Docker Compose のドキュメントを参照してください。

docker-compose ファイルを使用すると、.json 構成ファイルではなく、docker-compose ファイルでポートマッピングを指定できるようになります。例については、Docker Compose のドキュメントを参照してください。

ヒント: Docker Compose を使用するときは、ホストポートを指定しないでください。代わりに、Docker にランダムな利用可能なポートを選択させて、ポートの競合問題を自動的に回避します。

プロジェクトに新しいコンテナーを追加する

別のアプリやサービスを追加したい場合は、再度 Containers: Add Docker Compose Files to Workspace を実行し、既存の docker-compose ファイルを上書きすることを選択できますが、これらのファイル内のカスタマイズは失われます。compose ファイルへの変更を保持したい場合は、docker-compose.yml ファイルを手動で変更して新しいサービスを追加できます。通常は、既存のサービスセクションをコピーして貼り付けて新しいエントリを作成し、新しいサービスに合わせて名前を適切に変更します。

Containers: Add Docker Files to Workspace コマンドを再度実行して、新しいアプリ用の Dockerfile を生成できます。各アプリやサービスには独自の Dockerfile がありますが、通常、ワークスペースごとに 1 つの docker-compose.yml と 1 つの docker-compose.debug.yml ファイルがあります。

Python プロジェクトでは、Dockerfile、.dockerignore、docker-compose*.yml ファイルはすべてワークスペースのルートフォルダーにあります。別のアプリやサービスを追加する場合は、Dockerfile をそのアプリのフォルダーに移動します。

Node.js プロジェクトでは、Dockerfile と .dockerignore ファイルは、そのサービスの package.json の隣に配置されます。

.NET の場合、Docker Compose ファイルを作成すると、フォルダー構造はすでに複数のプロジェクトを処理するように設定されており、.dockerignore と docker-compose*.yml はワークスペースのルートに配置されます (たとえば、プロジェクトが src/project1 にある場合、ファイルは src にあります)。したがって、別のサービスを追加するときは、別のフォルダー (例: project2) に別のプロジェクトを作成し、前述のように docker-compose ファイルを再作成または変更します。

デバッグ

まず、対象プラットフォームのデバッグ ドキュメントを参照して、VS Code でのコンテナー内のデバッグの基本を理解してください。

Docker Compose でデバッグする場合は、前のセクションで説明した 2 つの Docker Compose ファイルのいずれかを使用して、Containers: Compose Up コマンドを実行し、適切な Attach 起動構成を使用してアタッチします。通常の起動構成を使用して直接起動すると、Docker Compose は使用されません。

Attach 起動構成を作成します。これは launch.json のセクションです。このプロセスはほとんど手動ですが、場合によっては、コンテナー ツール拡張機能が、テンプレートとして使用してカスタマイズできる事前構成済みの起動構成を追加することで役立ちます。各プラットフォーム (Node.js、Python、.NET) のプロセスは、次のセクションで説明します。

Node.js

  1. デバッグ タブで、構成ドロップダウンを選択し、新しい構成を選択して、Containers: Attach 構成テンプレート Containers: Attach to Node を選択します。

  2. docker-compose.debug.yml でデバッグポートを構成します。これはファイルを作成するときに設定されるため、変更する必要はないかもしれません。以下の例では、ポート 9229 がホストとコンテナーの両方でデバッグに使用されます。

     version: '3.4'

 services:
   node-hello:
     image: node-hello
     build: .
     environment:
       NODE_ENV: development
     ports:
       - 3000
       - 9229:9229
     command: node --inspect=0.0.0.0:9229 ./bin/www

  3. 複数のアプリがある場合は、各アプリに一意のポートを持たせるために、一部のアプリのポートを変更する必要があります。launch.json で正しいデバッグポートを指定し、ファイルを保存できます。これを省略すると、ポートは自動的に選択されます。

    以下は、Node.js の起動構成 (アタッチ) を示す例です。

     "configurations": [
     {
         "type": "node",
         "request": "attach",
         "name": "Containers: Attach to Node",
         "remoteRoot": "/usr/src/app",
         "port": 9229 // Optional; otherwise inferred from the docker-compose.debug.yml.
     },
     // ...
 ]

  4. Attach 構成の編集が完了したら、launch.json を保存し、新しい起動構成をアクティブな構成として選択します。デバッグ タブで、構成ドロップダウンから新しい構成を見つけます。

    Screenshot of Configuration dropdown

  5. docker-compose.debug.yml ファイルを右クリックし、Compose Up を選択します。

  6. HTML を返す HTTP エンドポイントを公開するサービスにアタッチしても、Web ブラウザーは自動的に開きません。ブラウザーでアプリを開くには、サイドバーでコンテナーを選択し、右クリックして Open in Browser を選択します。複数のポートが構成されている場合は、ポートを選択するように求められます。

  7. 通常の方法でデバッガーを起動します。デバッグ タブから、緑色の矢印 (開始ボタン) を選択するか、F5 を使用します。

Python

Docker Compose を使用して Python をデバッグするには、次の手順に従います。

  1. デバッグ タブで、構成ドロップダウンを選択し、新しい構成を選択し、Python Debugger を選択して、Remote Attach 構成テンプレートを選択します。

    Screenshot of Python Remote Attach

  2. デバッグに使用するホストマシン (例: localhost) とポートを選択するように求められます。Python のデフォルトのデバッグポートは 5678 です。複数のアプリがある場合は、各アプリに一意のポートを持たせるために、いずれかのポートを変更する必要があります。launch.json で正しいデバッグポートを指定し、ファイルを保存できます。これを省略すると、ポートは自動的に選択されます。

         "configurations": [
     {
        "name": "Python Debugger: Remote Attach",
        "type": "debugpy",
        "request": "attach",
        "port": 5678,
        "host": "localhost",
        "pathMappings": [
            {
                "localRoot": "${workspaceFolder}",
                "remoteRoot": "/app"
            }
        ]
    }

  3. Attach 構成の編集が完了したら、launch.json を保存します。デバッグ タブに移動し、Python Debugger: Remote Attach をアクティブな構成として選択します。

  4. すでに有効な Dockerfile がある場合は、Containers: Add Docker Compose Files to Workspace コマンドを実行することをお勧めします。これにより、docker-compose.yml ファイルと、ボリュームをマップしてコンテナー内で Python デバッガーを起動する docker-compose.debug.yml が作成されます。Dockerfile がまだない場合は、Containers: Add Docker Files to Workspace を実行し、Docker Compose ファイルを含めるために Yes を選択することをお勧めします。

    注: デフォルトでは、Containers: Add Docker Files to Workspace を使用すると、Django と Flask のオプションを選択すると、Gunicorn 用に構成された Dockerfile がスキャフォールディングされます。コンテナー内での Python クイックスタートの手順に従って、続行する前に正しく構成されていることを確認してください。

  5. docker-compose.debug.yml ファイル (以下に例を示します) を右クリックし、Compose Up を選択します。

    version: '3.4'

services:
  pythonsamplevscodedjangotutorial:
    image: pythonsamplevscodedjangotutorial
    build:
      context: .
      dockerfile: ./Dockerfile
    command: ["sh", "-c", "pip install debugpy -t /tmp && python /tmp/debugpy --wait-for-client --listen 0.0.0.0:5678 manage.py runserver 0.0.0.0:8000 --nothreading --noreload"]
    ports:
      - 8000:8000
      - 5678:5678

  6. コンテナーがビルドされて実行されたら、Python Debugger: Remote Attach 起動構成を選択した状態で F5 を押してデバッガーをアタッチします。

    Screenshot of debugging in Python

    注: 特定のファイルに Python デバッガーをインポートしたい場合は、debugpy README で詳細情報を確認できます。

  7. HTML を返す HTTP エンドポイントを公開するサービスにアタッチしても、Web ブラウザーが自動的に開かない場合があります。ブラウザーでアプリを開くには、コンテナー エクスプローラーでコンテナーを右クリックし、Open in Browser を選択します。複数のポートが構成されている場合は、ポートを選択するように求められます。

    Screenshot - Open in Browser

    これで、コンテナー内で実行中のアプリをデバッグしています。

.NET

  1. デバッグ タブで、構成ドロップダウンを選択し、新しい構成を選択して、Container Attach 構成テンプレート Containers: .NET Attach (Preview) を選択します。

  2. VS Code は、デフォルトのパスを使用してホストマシンからターゲットコンテナーに vsdbg をコピーしようとします。Attach 構成で、既存の vsdbg インスタンスへのパスを指定することもできます。

     "netCore": {
     "debuggerPath": "/remote_debugger/vsdbg"
 }

  3. Attach 構成の編集が完了したら、launch.json を保存し、新しい起動構成をアクティブな構成として選択します。デバッグ タブで、構成ドロップダウンから新しい構成を見つけます。

  4. docker-compose.debug.yml ファイルを右クリックし、Compose Up を選択します。

  5. HTML を返す HTTP エンドポイントを公開するサービスにアタッチしても、Web ブラウザーは自動的に開きません。ブラウザーでアプリを開くには、サイドバーでコンテナーを選択し、右クリックして Open in Browser を選択します。複数のポートが構成されている場合は、ポートを選択するように求められます。

  6. 通常の方法でデバッガーを起動します。デバッグ タブから、緑色の矢印 (開始ボタン) を選択するか、F5 を使用します。

    Screenshot of starting debugging

  7. コンテナーで実行されている .NET アプリにアタッチしようとすると、アプリのコンテナーを選択するように求めるプロンプトが表示されます。

    Screenshot of container selection

    このステップをスキップするには、launch.json の Attach 構成でコンテナー名を指定します。

        "containerName": "Your ContainerName"

    次に、デバッガー (vsdbg) をコンテナーにコピーするかどうか尋ねられます。Yes を選択します。

    Screenshot of debugger prompt

すべてが正しく構成されていれば、デバッガーは .NET アプリにアタッチされます。

Screenshot of debug session

ボリューム マウント

デフォルトでは、コンテナー ツール拡張機能はデバッグ コンポーネントのボリューム マウントを行いません。.NET や Node.js では、必要なコンポーネントがランタイムに組み込まれているため、その必要はありません。アプリでボリューム マウントが必要な場合は、docker-compose*.yml ファイルの volumes タグを使用して指定します。

volumes:
    - /host-folder-path:/container-folder-path

複数の Compose ファイルを持つ Docker Compose

ワークスペースには、開発、テスト、本番などのさまざまな環境を処理するために、複数の docker-compose ファイルを含めることができます。構成の内容は複数のファイルに分割できます。たとえば、すべての環境に共通の情報を定義するベース compose ファイルと、環境固有の情報を定義する個別のオーバーライド ファイルなどです。これらのファイルが docker-compose コマンドへの入力として渡されると、これらのファイルは単一の構成に結合されます。デフォルトでは、Containers: Compose Up コマンドは単一のファイルを compose コマンドへの入力として渡しますが、コマンドのカスタマイズを使用して、compose up コマンドを複数のファイルを入力として渡すようにカスタマイズできます。または、カスタム タスクを使用して、目的のパラメータで docker-compose コマンドを呼び出すこともできます。

注: ワークスペースに docker-compose.yml と docker-compose.override.yml があり、他の compose ファイルがない場合、docker-compose コマンドは入力ファイルなしで呼び出され、暗黙的にこれらのファイルを使用します。この場合、カスタマイズは不要です。

コマンドのカスタマイズ

コマンドのカスタマイズでは、要件に基づいて compose up コマンドをカスタマイズするさまざまな方法が提供されます。以下は、compose up コマンドのサンプル コマンド カスタマイズです。

ベースファイルとオーバーライドファイル

ワークスペースにベース compose ファイル (docker-compose.yml) と各環境用のオーバーライド ファイル (docker-compose.dev.yml、docker-compose.test.yml、docker-compose.prod.yml) があり、常にベース ファイルとオーバーライド ファイルで docker compose up を実行すると仮定します。この場合、compose up コマンドは次の例のようにカスタマイズできます。compose up コマンドが呼び出されると、${configurationFile} は選択されたファイルに置き換えられます。

"docker.commands.composeUp": [
    {
        "label": "override",
        "template": "docker-compose -f docker-compose.yml ${configurationFile}  up -d --build",
    }
]

テンプレート マッチング

環境ごとに異なる入力ファイルのセットがあると仮定します。正規表現の一致を持つ複数のテンプレートを定義できます。選択されたファイル名は、この match プロパティと照合され、対応するテンプレートが使用されます。

"containers.commands.composeUp": [
    {
        "label": "dev-match",
        "template": "docker-compose -f docker-compose.yml -f docker-compose.debug.yml -f docker-compose.dev.yml up -d --build",
        "match": "dev"
    },
    {
        "label": "test-match",
        "template": "docker-compose -f docker-compose.yml -f docker-compose.debug.yml -f docker-compose.test.yml up -d --build",
        "match": "test"
    },
    {
        "label": "prod-match",
        "template": "docker-compose -f docker-compose.yml -f docker-compose.release.yml -f docker-compose.prod.yml up -d --build",
        "match": "prod"
    }
]

コマンドが呼び出されたときにテンプレートを選択する

コマンド テンプレートから match プロパティを省略すると、compose up コマンドが呼び出されるたびに、使用するテンプレートを尋ねられます。例:

"containers.commands.composeUp": [
    {
        "label": "dev",
        "template": "docker-compose -f docker-compose.yml -f docker-compose.common.dev.yml ${configurationFile} up -d --build"
    },
    {
        "label": "test",
        "template": "docker-compose -f docker-compose.yml -f docker-compose.common.test.yml ${configurationFile} up -d --build"
    },
    {
        "label": "prod",
        "template": "docker-compose -f docker-compose.yml -f docker-compose.common.prod.yml ${configurationFile} up -d --build"
    },
],

カスタム タスク

コマンドのカスタマイズを使用する代わりに、次のようなタスクを定義して docker-compose コマンドを呼び出すこともできます。このオプションの詳細については、カスタム タスクを参照してください。

{
  "type": "shell",
  "label": "compose-up-dev",
  "command": "docker-compose -f docker-compose.yml -f docker-compose.Common.yml -f docker-compose.dev.yml up -d --build",
  "presentation": {
    "reveal": "always",
    "panel": "new"
  }
}

次のステップ

12/21/2022