💻 6月3日の MS Build で開催される VS Code Live に参加しましょう。

Dev Containers チュートリアル

このチュートリアルでは、Dev Containers 拡張機能を使用して Docker コンテナ内で Visual Studio Code を実行する方法を解説します。このチュートリアルを完了するにあたって、Docker の事前の知識は必要ありません。

Docker コンテナ内部で VS Code を実行することには多くの利点がありますが、このチュートリアルでは、ローカル環境から分離された開発環境を構築するために Docker コンテナを使用することに重点を置いています。

前提条件

Visual Studio Code がインストールされている必要があります。

Docker のインストール

コンテナを作成および管理するには Docker が必要です。

Docker Desktop

Docker Desktop、またはリモートホスト上の Docker や Docker 互換の CLI といったその他の Docker オプションをダウンロードしてインストールしてください。

Docker の起動

Docker Desktop アプリケーションを実行して Docker を起動します。アクティビティトレイに Docker のクジラのアイコンが表示されていれば、正常に実行されています。

Docker の起動には数分かかる場合があります。クジラのアイコンがアニメーションしている場合は、おそらくまだ起動処理中です。アイコンをクリックしてステータスを確認できます。

Docker status

Docker の確認

Docker が起動したら、新しいターミナルウィンドウを開き、以下のコマンドを入力してすべてが正常に動作していることを確認できます。

docker --version
# Docker version 18.09.2, build 6247962

拡張機能をインストールする

Dev Containers 拡張機能を使用すると、Docker コンテナ内で Visual Studio Code を実行できます。

Dev Containers 拡張機能のインストール

Dev Containers extension

インストールの確認

Dev Containers 拡張機能がインストールされると、ステータスバーの左端に新しい項目が表示されます。

Remote Status bar item

リモートステータスバー項目では、VS Code が現在どのコンテキスト（ローカルかリモートか）で実行されているかを素早く確認でき、この項目をクリックすると Dev Containers のコマンドが表示されます。

Dev Containers commands

サンプルの取得

Docker コンテナを作成するために、Node.js プロジェクトを含む GitHub リポジトリを開きます。

コマンドパレット（F1）を開き、Dev Containers: Try a Dev Container Sample... コマンドを実行して、リストから Node のサンプルを選択します。

Select a sample from the list

注: vscode-remote-try-python や vscode-remote-try-java といった他の dev container サンプルもありますが、このチュートリアルでは vscode-remote-try-node を使用します。

コンテナのビルド待ち

その後ウィンドウが再読み込みされますが、まだコンテナが存在しないため、VS Code がコンテナを作成し、サンプルリポジトリを分離された コンテナボリューム にクローンします。これには時間がかかる場合があります。進行状況の通知でステータスを確認できます。幸いなことに、コンテナは既に存在するため、次にフォルダーを開くときにはこの手順は不要です。

Dev Container Progress Notification

コンテナのビルド後、VS Code は自動的にそれに接続し、ローカルファイルシステムのプロジェクトフォルダーをコンテナ内にマッピングします。

コンテナの確認

コンテナが実行され接続されると、ステータスバーの左下にリモートコンテキストが表示されます。

Building image

環境の確認

コンテナ内で開発することの利点の1つは、ローカルの開発環境に影響を与えることなく、アプリケーションが必要とする特定のバージョンの依存関係を使用できることです。

このチュートリアルの特定のコンテナには Node.js v18 がインストールされています。新しいターミナル Terminal > New Terminal (⌃⇧` (Windows, Linux Ctrl+Shift+`)) を開き、以下を入力して確認できます。

node --version; npm --version

以下のようなバージョンが表示されるはずです。

Node.js version check

アプリケーションの実行

ここで F5 を押すと、コンテナ内でアプリケーションが実行されます。プロセスが開始されたら https://:3000 にアクセスすると、実行中の単純な Node.js サーバーが表示されるはずです！

Running the application

コンテナ接続の終了

File > Close Remote Connection を使用して、コンテナ内のセッションを終了し、ローカルでの VS Code 実行に戻ることができます。

仕組み

次のセクションでは、Dev Containers 拡張機能がどのようにコンテナをセットアップおよび構成するかについて詳しく説明します。

Dev Containers 拡張機能は、.devcontainer フォルダー内のファイル（devcontainer.json、およびオプションの Dockerfile や docker-compose.yml）を使用して開発コンテナを作成します。

先ほど確認した例では、プロジェクトに devcontainer.json を含む .devcontainer フォルダーがありました。devcontainer.json は mcr.microsoft.com/devcontainers/javascript-node:0-18 イメージを使用しています。このイメージの詳細は devcontainers/images リポジトリで確認できます。

まず、提供された Dockerfile またはイメージ名（この例では mcr.microsoft.com/devcontainers/javascript-node:0-18）からイメージがビルドされます。次に、devcontainer.json の設定を使用してコンテナが作成・起動されます。最後に、Visual Studio Code 環境がインストールされ、devcontainer.json の設定に従って再度構成されます。例えば、この例の開発コンテナは streetsidesoftware.code-spell-checker 拡張機能をインストールします。

注: ベースイメージの内容に基づいて、追加の構成がコンテナに自動的に適用されます。たとえば、上記の streetsidesoftware.code-spell-checker 拡張機能に加え、mcr.microsoft.com/devcontainers/typescript-node の一部であるため "dbaeumer.vscode-eslint" も含まれます。これは devcontainer.json を使用したプリビルド時に自動的に行われます。詳しくは プリビルドセクション を参照してください。

これらすべてが完了すると、ローカルの Visual Studio Code が新しい開発コンテナ内で実行されている Visual Studio Code Server に接続します。

Architecture

devcontainer.json

devcontainer.json は、基本的に開発コンテナがどのようにビルドおよび開始されるかを決定する設定ファイルです。

//devcontainer.json
{
  "name": "Node.js",

  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
  "image": "mcr.microsoft.com/devcontainers/javascript-node:0-18",

  // Features to add to the dev container. More info: https://containers.dev/features.
  // "features": {},

  "customizations": {
    "vscode": {
      "settings": {},
      "extensions": ["streetsidesoftware.code-spell-checker"]
    }
  },

  // "forwardPorts": [3000],

  "portsAttributes": {
    "3000": {
      "label": "Hello Remote World",
      "onAutoForward": "notify"
    }
  },

  "postCreateCommand": "yarn install"

  // "remoteUser": "root"
}

上記の例は、チュートリアルで使用した vscode-remote-try-node リポジトリから抽出されたものです。

オプション 説明
image VS Code が開発コンテナを作成するために使用するコンテナレジストリ（Docker Hub、GitHub Container Registry、Azure Container Registry）上のイメージ名です。
dockerfile image を参照する代わりに、イメージとして使用する Dockerfile への相対パスである dockerfile プロパティを使用することもできます。
features 追加する Dev Container Feature ID と関連オプションのオブジェクト。
customizations VS Code の settings や extensions プロパティなど、ツール固有のプロパティを構成します。
settings デフォルトの settings.json 値をコンテナ/マシン固有の設定ファイルに追加します（例: "terminal.integrated.defaultProfile.linux": "bash"）。
extensions コンテナ作成時に内部にインストールされる拡張機能 ID の配列。
forwardPorts コンテナ内のポートリストをローカルで使用可能にします。
portsAttributes 特定の転送ポートに対してデフォルトのプロパティを設定します。
postCreateCommand コンテナ作成後に実行するコマンド文字列またはコマンド引数のリスト。
remoteUser コンテナ内で VS Code（およびサブプロセス）を実行するユーザーを上書きします。デフォルトは containerUser です。

devcontainer.json オプションの 完全なリスト を確認できます。

おめでとうございます

おめでとうございます。このチュートリアルは正常に完了しました!

以上が、dev container を使用して何ができるかの概要です。次のステップとして、マシン上の既存のフォルダーをコンテナで開く方法や、GitHub リポジトリや PR をコンテナで開く方法を確認することをお勧めします。

他のリモート開発拡張機能もチェックしてください。

または、リモート開発拡張機能パックをインストールして、すべてを取得してください。

トラブルシューティング

Docker コンテキストの確認

Docker を新規にインストールしたものではなく、Dev Containers: Try a Dev Container Sample... サンプルで現在のコンテキストに問題が発生する場合は、Docker コンテキストを確認してください。新規インストールでは 'default' コンテキストが使用されるため、それを現在のコンテキストとして再設定できます。

# Displays the list of contexts, '*' denotes the current context
docker context list

# Switches the list to the 'default' context
docker context use default
5/28/2026
© . This site is unofficial and not affiliated with Microsoft.