VSCode の便利拡張、Dev Containers の使い方

Dev Containers とは

Dev Containers は Visual Studio Code の拡張の一つ^[1]で、コンテナ内のファイル操作やコマンド実行を、ローカル環境と同じ使い心地で利用できるようにする拡張です。実行する Dockerfile などをリポジトリの設定ファイルとして含めることが可能なため、Dockerfile 内で開発に用いるツールなどのバージョンを指定することで、同じ開発環境を再現・利用することが容易になります。

Dev Containers の使い方

Dev Containers はデフォルトで典型的な開発用のコンテナをいくつか提供してくれているため、自分で設定ファイルを用意しなくても、使いたいテンプレートをコマンドパレットから選択することで、ベースとなる設定ファイルを自動生成 & コンテナ環境の作成を行ってくれます。

Dev Containers がインストール済みの場合、下図のようにウィンドウ左下に >< のようなボタンが追加されています。Dev Containers の設定ディレクトリである .devcontainers がない場合、ここをクリックして コンテナで再度開く をコマンドパレットから選択することで初期設定を開始できます。

次のダイアログで ワークスペースに構成を追加する を選択することで、リポジトリに設定ファイルを追加して他の開発者と同じ環境を共有することができます。ユーザー データ フォルダーに構成を追加する を選択すると設定ファイルはリポジトリに追加されず、ローカルでのみ Dev Containers を利用できます。

次にベースとなるテンプレートを選択します。これには .Net や Java, Python などの言語ごとのテンプレートや、Ubuntu, Debian, Alpine Linux などのより汎用的なテンプレートがあります^[2]。

各テンプレートでは開発環境や OS のバージョンなどを追加で指定できる場合もあります(以下は Ubuntu を選択した場合)。

最後に追加でインストールするソフトウェアなどを選択します(Features と呼ばれます)。Features には Docker-in-Docker を実現するものや Node や Conda などの開発環境をインストールするものなど様々なものがあるため、必要に応じて選択するとよいでしょう^[3]。

Features の選択後、しばらく待っていればコンテナが立ち上がり、開発を開始できます。Dev Containers 環境を正しく構築できた場合、以下のように左下の >< に 開発コンテナー: * という表示が追加されているはずです。

Dev Containers ではリポジトリは /workspaces/$project ($project はリポジトリのあるディレクトリ名; 変更可能)としてコンテナ内にバインドマウントされ、また VSCode のターミナルもコンテナ内環境になっています。.devcontainers/ 以下にベースとして選択したコンテナを構築する Dockerfile が配置されるため、これをカスタマイズして Dev Containers 内で利用するツールをカスタマイズできます。

まとめ

Dev Containers を利用することでリポジトリに開発環境の情報を含めることができ、これによって開発者間のツールバージョンの違いなどに起因する問題が起きにくくなります。どんどん活用しましょう！

おまけ

自分は Dev Containers のトラブルシューティングの記事を書いていたはず。この記事どこから生えてきたの…？

脚注

1. Remote Development 拡張をインストールすると、他の拡張とともにインストールされます。一緒にインストールされる Remote - SSH や WSL 拡張も便利なのでおすすめです。

2. テンプレートの一覧は以下 URL でも確認できます: https://containers.dev/templates

3. Features の一覧は以下 URL でも確認できます: https://containers.dev/features