Zenn
🐋

devcontainer.jsonの書き方と主要なプロパティ

2024/12/13に公開
VS Code
docker-compose
devcontainer
tech

本記事の概要

本記事では、VSCodeの拡張機能Dev Containersで使用される設定ファイルdevcontainer.jsonの概要、および、docker-composeを使用した具体的な設定例、name、dockerComposeFile、service、workspaceFolderなどの主要なプロパティを解説します。

devcontainer.jsonとは

devcontainer.jsonは、VSCodeの拡張機能であるDev Containersで利用される設定ファイルです。devcontainer.jsonによってVSCodeがコンテナを認識し、設定や拡張機能を自動的にインストールさせることができます。これにより、プロジェクトで必要なツールやライブラリ、コンテナ設定をコード化することが可能となり、開発者間の環境の差異を解消できます。

devcontainer.jsonの基本的な構成

devcontainer.jsonはJSONで記述します。基本的な流れとしては、どのコンテナ環境を用いるのか、どのフォルダを対象とするか、ユーザやポートなどの設定を行い、コンテナ起動後の初期処理を指定します。

devcontainer.jsonの配置場所

devcontainer.jsonは、一般的にプロジェクトのルートディレクトリ直下にある.devcontainerディレクトリ直下に配置します。

簡易的な構成例

簡易的な構成例を示します。
今回はdocker-composeの利用を前提としています。

devcontainer.json
{
    "name": "ml-experiment-env",
    "dockerComposeFile": "..docker-compose.yml",
    "service": "app",
    "workspaceFolder": "/workspace",
    "customizations": {
        "vscode": {
            "extensions": [
                "ms-python.python",
                "ms-toolsai.jupyter",
                "MS-CEINTL.vscode-language-pack-ja",
                "charliermarsh.ruff"
            ],
            "settings": {
                "python.defaultInterpreterPath": "/usr/bin/python3",
                "[python]": {
                    "editor.codeActionsOnSave": {
                        "source.fixAll.ruff": "explicit",
                        "source.organizeImports.ruff": "explicit"
                    },
                    "editor.defaultFormatter": "charliermarsh.ruff",
                    "editor.formatOnSave": true,
                    "editor.formatOnType": true
                }
            }
        }
    },
    "forwardPorts": [8888],
    "remoteUser": "root",
    "shutdownAction": "stopCompose"
}

主要なプロパティ

プロパティ 説明
name 開発コンテナの名前を指定する。VSCode上の表示名として使用される。
dockerComposeFile 使用するdocker-compose.ymlのパスを.devcontainerディレクトリからの相対パスで指定する。
service docker-compose.yml内の、開発環境として使用するサービス名を指定。指定したサービスがVS Codeから接続される主コンテナとなる。
workspaceFolder コンテナ内のワークスペースディレクトリのパスを指定する。
customizations > vscode > extensions コンテナ内にインストールするVSCode拡張機能を指定。拡張機能のIDを配列で指定する。
customizations > vscode > settings コンテナ内でのVSCodeの設定。settings.jsonと同様の形式で設定する。
forwardPorts 自動的にホストに転送するポート番号を指定する。配列で複数のポートを指定できる。
remoteUser コンテナ内で使用するユーザー名を指定する。
shutdownAction コンテナを終了する際の動作を指定する。
postCreateCommand コンテナ作成後に実行するコマンドを指定する。

まとめ

devcontainer.jsonは、Dev Containersによる開発環境の標準化を実現する設定ファイルです。チーム内での環境差異を解消し、必要な拡張機能や設定を自動的に適用できます。コンテナ構成、ワークスペース設定、VSCode拡張機能などの主要なプロパティを適切に設定することで、効率的で再現性の高い開発環境を構築することができます。

参考情報

https://containers.dev/implementors/json_reference/
https://github.com/microsoft/vscode-dev-containers/tree/main

Discussion