📛

【VSCode】憧れのコンテナ開発環境を5分で作る DevContainer

2023/05/19に公開

コンテナで開発環境作りたいけど、Dockerfile書くのがどうにも面倒で踏ん切りつかないことがよくあります。

DevContainer を使えば、コンテナを使ったポータビリティの高い開発環境を簡単に定義・構築できます。びっくりするくらい簡単に始めてみましょう。

いいところ

ポータビリティの高い開発環境が作れる
コンテナ自体のポータビリティを生かして、devcontainerが動く環境さえ整っていれば誰でも同じ環境を再現できます。devcontainer.json をコードと一緒に置いておけば配布やバージョン管理も容易です。

Dockerを意識しなくて良い
docker build docker run を叩いたりする必要がないので強力にオペミスを防止できます。初学者にも優しいですね。

エコシステムが整っている
今回のようにVSCodeのGUIから扱えるほか、DevContainer CLI、GitHub CodeSpaces など、誰でも・どこでも・簡単に利用できる仕組みが整ってきています。
https://github.com/devcontainers/cli
https://github.co.jp/features/codespaces

悪いところ

激しいメモリ消費...

Get Started !

前提

  1. VSCode に Remote Development 拡張機能を導入して使います
    https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

  2. Docker が動くようにしておきます。DesktopでもCEでも構いません。

はじめかた

  1. 適当なディレクトリで コマンドパレット(Fn + F1) > "Add Dev Container Configuration Files" を選択します

  2. お好みのベースイメージを選択します。

  3. お好みのFeatureを選びます。開発に必要なツールがあれば選択してください。

  4. .DevContainer/ディレクトリとdevcontainer.jsonが生成されます。

devcontainer.json
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/ubuntu
{
	"name": "Ubuntu",
	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
	"image": "mcr.microsoft.com/devcontainers/base:jammy",
	"features": {
		"ghcr.io/devcontainers/features/aws-cli:1": {},
		"ghcr.io/devcontainers/features/docker-in-docker:2": {},
		"ghcr.io/devcontainers/features/python:1": {}
	}
...
}
  1. コマンドパレット > "Open Folder in Container..." を選択して、.DevContainer/の存在するディレクトリを指定します。

  2. しばらく待って...無事ビルドが完了し、コンテナに接続されました。

仕組み

VSCode Server: (VSCodeのバックエンドだけを切り出したもの)をコンテナ内で動作させることで、ローカルのエディタ環境を汚さない仕組みです。
さらにローカルにあるプロジェクトディレクトリをマウントしていて、データは手元に置きつつ実行環境はスクラップ&ビルドが容易なコンテナ内に置いておくといったことを実現しています。
"https://code.visualstudio.com/docs/devcontainers/containers"
(画像: https://code.visualstudio.com/docs/devcontainers/containers)

株式会社エーピーコミュニケーションズ

Discussion