🚀 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 ファイルで宣言できます。

Docker 拡張機能を使用して VS Code で Docker Compose を使用するには、Docker Compose の基本を既に理解している必要があります。

Docker Compose のサポートをプロジェクトに追加する

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

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

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

Screenshot of project with docker-compose files

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

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

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

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

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

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

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

Node.js プロジェクトでは、Dockerfile および .dockerignore ファイルは、そのサービスの package.json の横にあります。

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

デバッグ

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

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

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

Node.js

  1. デバッグ タブで、構成 ドロップダウンを選択し、新しい構成 を選択して、Docker Attach 構成テンプレート Node.js Docker Attach (プレビュー) を選択します。

  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": "Docker: Attach to Node",
             "remoteRoot": "/usr/src/app",
             "port": 9229 // Optional; otherwise inferred from the docker-compose.debug.yml.
         },
         // ...
     ]
    
  4. アタッチ 構成の編集が完了したら、launch.json を保存し、新しい起動構成をアクティブな構成として選択します。デバッグ タブで、構成 ドロップダウンで新しい構成を見つけます。

    Screenshot of Configuration dropdown

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

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

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

Python

Docker Compose で Python をデバッグするには、次の手順に従います

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

    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. アタッチ 構成の編集が完了したら、launch.json を保存します。デバッグ タブに移動し、アクティブな構成として Python デバッガー: リモートアタッチ を選択します。

  4. 有効な Dockerfile が既にある場合は、Docker: Docker Compose ファイルをワークスペースに追加 コマンドを実行することをお勧めします。これにより、docker-compose.yml ファイルと docker-compose.debug.yml が作成されます。これらはボリュームをマッピングし、コンテナーで Python デバッガーを起動します。Dockerfile がまだない場合は、Docker: Docker ファイルをワークスペースに追加 を実行し、はい を選択して Docker Compose ファイルを含めることをお勧めします。

    : デフォルトでは、Docker: Docker ファイルをワークスペースに追加 を使用する場合、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 デバッガー: リモートアタッチ 起動構成を選択して F5 を押してデバッガーをアタッチします。

    Screenshot of debugging in Python

    注: 特定のファイルに Python デバッガーをインポートする場合は、詳細が debugpy README に記載されています。

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

    Screenshot - Open in Browser

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

.NET

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

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

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

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

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

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

    Screenshot of starting debugging

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

    Screenshot of container selection

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

        "containerName": "Your ContainerName"
    

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

    Screenshot of debugger prompt

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

Screenshot of debug session

ボリュームマウント

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

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

複数の Compose ファイルを使用した Docker Compose

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

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

コマンドのカスタマイズ

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

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

ワークスペースにベース compose ファイル (docker-compose.yml) と環境ごとのオーバーライドファイル (docker-compose.dev.ymldocker-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 プロパティと照合され、対応するテンプレートが使用されます。

"docker.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 コマンドが呼び出されるたびに使用するテンプレートを尋ねられます。例:

"docker.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"
  }
}

次のステップ