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 を起動するには、Docker Desktop アプリケーションを実行します。アクティビティトレイを見て 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: Dev Container サンプルを試す... コマンドを実行して、リストから Node サンプルを選択します。

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

コンテナがビルドされるのを待つ

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

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

コンテナの確認

コンテナが実行され、接続されると、ステータスバーの左下でリモートコンテキストの変更を確認できます。

環境の確認

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

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

node --version; npm --version

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

アプリケーションの実行

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

コンテナ接続の終了

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

仕組み

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

Dev Containers 拡張機能は、.devcontainer フォルダー内のファイル、つまり devcontainer.json と、オプションの Dockerfile または docker-compose.yml を使用して、Dev Container を作成します。

先ほど試した例では、プロジェクトには .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 の一部の設定を使用してコンテナが作成および起動されます。最後に、Visual Studio Code 環境が devcontainer.json の設定に従って再度インストールおよび構成されます。たとえば、この例の Dev Container は streetsidesoftware.code-spell-checker 拡張機能をインストールします。

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

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

devcontainer.json

devcontainer.json は基本的に、Dev Container のビルド方法と起動方法を決定する構成ファイルです。

//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 オプションの完全なリストを確認できます。

おめでとうございます

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

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

他のリモート開発拡張機能もご確認ください。

• Remote - SSH
• WSL

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

トラブルシューティング

Docker コンテキストの確認

新しい Docker インストールを使用しておらず、Dev Containers: Dev Container サンプルを試す... サンプルで現在のコンテキストに問題が発生する場合は、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