開発コンテナのチュートリアル

このチュートリアルでは、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 を開始するには、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: 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 がインストールされており、新しいターミナルを Terminal > New Terminal (⌃⇧` (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 の設定の一部を使用してコンテナが作成され、開始されます。最後に、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 に接続します。

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 をコンテナで開く方法を確認することをお勧めします。

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

• リモート - 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