はじめに
エブリーでデリッシュキッチンの開発をしている本丸です。
4月に新卒の開発研修を行ったのですが、配属されたチームが異なることなどもあり開発環境が揃っていないという問題がありました。
anyenvやgoenvなどを設定してもらうという手もあったのですが、それ自体の設定にも手間がかかってしまうためDev Containerの設定を用意してその場は乗り切りました。
本記事では、Dev Containerの基本的な使い方から、Docker Composeとの連携、拡張機能の設定まで、実際の開発現場で役立つ知識をお届けできればと思っています。
Dev Containerとは
Dev Containerは、開発環境をコンテナ化する仕組みです。Visual Studio CodeやCursorなどで利用することができ、開発に必要なツールやライブラリ、設定をすべてコンテナに封じ込めることができます。
主な利点
- 環境の統一: チーム全員が同じ開発環境で作業できる
- 簡単に開発環境を作成できる: 新しいメンバーも数分で開発環境を構築可能
- 隔離性: プロジェクトごとに独立した環境を持てる、AIエージェントを使う上で意図しない環境の変更を防げる
使い方
基本的な使い方
1. Dev Container設定ファイルの作成
プロジェクトルートに.devcontainer/devcontainer.jsonを作成します。
{ "name": "Go", // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile "image": "mcr.microsoft.com/devcontainers/go:1-1.24-bookworm", ... // Configure tool-specific properties. "customizations": { // Configure properties specific to VS Code. "vscode": { "settings": {}, "extensions": [ "streetsidesoftware.code-spell-checker" ] } }, ... // Use 'portsAttributes' to set default properties for specific forwarded ports. // More info: https://containers.dev/implementors/json_reference/#port-attributes "portsAttributes": { "9000": { "label": "Hello Remote World", "onAutoForward": "notify" } } ... }
2. 開発環境の起動
devcontainer.jsonの作成が終わったらあとは開発環境のコンテナを起動するだけです。
- VS CodeでDev Containers拡張機能をインストール
- コマンドパレット（Cmd+Shift+P）で「Dev Containers: Reopen in Container」を実行
これだけで、統一された開発環境が起動します。
サンプルコードで試すことができる
基本的な設定に関してはサンプルコードを参考にすることもできます。 サンプルコードを試す方法は簡単で
- コマンドパレット（Cmd+Shift+P）で「Dev Containers: Try a Dev Container Sample...」を実行
- 開発したい言語を指定する
これだけで、簡単なサーバーを実行するためのサンプルコードを試すことができます。
ちなみに、「Dev Container設定ファイルの作成」で例示したものはサンプルコードのdevcontainer.jsonを引用したものです。
開発環境と同時にローカルの実行環境も立ち上げる
基本的な使い方では、イメージを指定して実行を行っていましたがDocker Composeファイルを指定して実行することもできます。
今回は、開発環境とローカルでの実行環境を同時に立ち上げるという形で説明させていただければと思います。
Dev Containerの対応前は下記で動いていたとします。
- Go
- Docker Compose
1. Dev Container用のDocker Composeファイルを作成
今回は、元々のDocker Composeファイルをできるだけ変更することなく進めたかったため、Dev Containerの時だけ使用するDocker Composeファイルを用意することにしました。
プロジェクトルートのdevcontainerディレクトリにcompose-devcontainer.ymlを作成します。（命名はわかりやすいように変更しましたが、任意の名前で大丈夫なはずです。）
services:
dev-env:
image: mcr.microsoft.com/devcontainers/go:1-1.24-bookworm
volumes:
- .:/workspace:cached
ports:
- "9000:9000"
command: sleep infinity
ここでは元々のDocker Composeで動かしていたserviceに加えて新しくdev-envを動作させています。
このdev-envがDev Containerでの開発環境にあたります。
2. devcontainer.jsonをDocker Composeに対応させる
devcontainer.jsonをDocker Composeを使用するように変更していきます。
基本版からDocker Compose版への変更点
- イメージ指定の変更
- "image": "mcr.microsoft.com/devcontainers/go:1-1.24-bookworm",
+ "dockerComposeFile": [
+ "../docker-compose.yml",
+ "compose-devcontainer.yml"
+ ],
imageプロパティを削除してdockerComposeFileプロパティを追加します。この際、複数のYAMLファイルを選択することができます。
- サービスとワークスペースの指定を追加
+ "service": "dev-env",
+ "workspaceFolder": "/workspace",
ここでは、どのサービスを開発環境として使うかなどの指定を行なっています。
変更後の完全なdevcontainer.json
{ "name": "Go", // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile "dockerComposeFile": [ "../docker-compose.yml", "compose-devcontainer.yml" ], ... // Configure tool-specific properties. "customizations": { // Configure properties specific to VS Code. "vscode": { "settings": {}, "extensions": [ "streetsidesoftware.code-spell-checker" ] } }, "service": "dev-env", "workspaceFolder": "/workspace", ... // Use 'portsAttributes' to set default properties for specific forwarded ports. // More info: https://containers.dev/implementors/json_reference/#port-attributes "portsAttributes": { "9000": { "label": "Hello Remote World", "onAutoForward": "notify" } } ... }
拡張機能に関して
Dev Containerでの拡張機能の指定の方法は2つあります。
複数のユーザーで共通で使いたい場合はdevcontainer.jsonに
"customizations": { // Configure properties specific to VS Code. "vscode": { "settings": {}, "extensions": [ "streetsidesoftware.code-spell-checker", ..., ] } },
を追加し、extensionsに任意の拡張機能を指定すれば大丈夫です。
一人のユーザーが複数のDev Containerの環境で同じ拡張機能を使いたい場合はsettings.jsonに
"dev.containers.defaultExtensions": [ "streetsidesoftware.code-spell-checker", ..., ],
を追加し、dev.containers.defaultExtensionsに任意の拡張機能を指定すれば大丈夫です。
まとめ
Dev Containerについて調べたり、触ってみる中でDev Containerをどのように使うのかの具体的なイメージを掴むことができました。 まだ実際の開発の現場で利用はできていないため、実際のプロダクトを開発する際にも取り入れてみたいと思いました。
