Dev Containers チュートリアル

このチュートリアルでは、Docker コンテナー内で Visual Studio Code を、Dev Containers 拡張機能を使用して実行する手順を説明します。このチュートリアルを完了するために、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 を確認する

Docker が実行されたら、新しいターミナル ウィンドウを開いてコマンドを入力し、すべてが機能していることを確認できます。

docker --version
# Docker version 18.09.2, build 6247962

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

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

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

インストールを確認する

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

リモート ステータス バー項目は、VS Code が実行されているコンテキスト (ローカルまたはリモート) をすばやく表示でき、この項目をクリックすると Dev Containers コマンドが表示されます。

サンプルを取得する

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

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

注: vscode-remote-try-python や vscode-remote-try-java などの他の開発コンテナー サンプルもありますが、このチュートリアルでは vscode-remote-try-node を使用します。

コンテナーがビルドされるまで待つ

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

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

コンテナーを確認する

コンテナーが実行され、接続されると、ステータス バーの左下でリモート コンテキストが変更されているのがわかります。

環境を確認する

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

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

node --version; npm --version

これにより、以下のバージョンが表示されます。

アプリケーションの実行

これで F5 を押すと、コンテナー内でアプリケーションが実行されます。プロセスが開始されたら、https://:3000 に移動すると、シンプルな Node.js サーバーが実行されているのが確認できます！

コンテナー接続を終了する

ファイル > リモート接続を閉じるで、コンテナーでのセッションを終了し、VS Code をローカルで実行する状態に戻すことができます。

仕組み

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

Dev Containers 拡張機能は、.devcontainer フォルダー内のファイル、具体的には devcontainer.json と、オプションの Dockerfile または docker-compose.yml を使用して開発コンテナーを作成します。

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

まず、指定された Dockerfile またはイメージ名 (この例では mcr.microsoft.com/devcontainers/javascript-node:0-18) からイメージがビルドされます。次に、devcontainer.json の設定の一部を使用してコンテナーが作成され、起動されます。最後に、devcontainer.json の設定に従って Visual Studio Code 環境が再びインストールおよび構成されます。たとえば、この例の開発コンテナーは 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 に接続します。

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 リポジトリから抜粋したものです。

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

おめでとうございます

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

これは、開発コンテナーを使用して何ができるかについての簡単な概要でした。次のステップとして、マシン上の既存のフォルダーをコンテナーで開く方法、またはコンテナーで GitHub リポジトリまたは PR を開く方法を確認することをお勧めします。

その他のリモート開発拡張機能を確認してください。

• Remote - SSH
• WSL

または、Remote Development拡張機能パックをインストールして、すべてを入手してください。

トラブルシューティング

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