はじめに

いまさら感も否めませんが、devcontainer.jsonの書き方をよく忘れるので、自分用の備忘録も兼ねて記事に残しておこうと思います。

導入手順

VSCodeに拡張機能(extension)を追加

VSCodeでDockerコンテナ内の開発環境に接続するには、拡張機能であるRemote Developmentが必要となるので、インストールしましょう。

vscode.png)

devcontainer.jsonの追加

extensionが追加できたら、次は設定ファイルであるdevcontainer.jsonと格納用フォルダを用意しましょう。

/ProjectRoot
  └ .devcontainer
      └　devcontainer.json

Remote Developmentを利用したいプロジェクトのrootフォルダ配下に.devcontainerフォルダを作成し、そこにdevcontainer.jsonを作ります。

devcontainer.jsonには、下記のように展開するDockerコンテナの定義（下記の例だとdocker-compose.yml）、利用したいVSCodeの拡張機能や、ポートフォワーディングの設定などを記載していきます。

{
    "name": "sample_project",
    "dockerComposeFile": "../docker-compose.yml",
    "service": "web",
    "extensions": [
        "mhutchie.git-graph",
    ],
    "forwardPorts": [
        8080
    ],
    "workspaceFolder": "/app",
}

設定の方法についての詳細は、公式ドキュメントはdevcontainer.json referenceを読んでいただきたいのですが、日本語に翻訳されていないうえに、設定項目が多いので、筆者がよく使う設定項目にピックアップしてまとめてみました。

`image`

開発に利用する単一のDockerコンテナをDockerHub、Azure Container Registryから参照する場合に設定します。（どちらもログインが必要なため、あらかじめアカウントを用意しておく必要があります）

`dockerFile`

開発に利用する単一のDockerコンテナをローカルのDockerfileを使用する場合に設定します。

`dockerComposeFile`

開発に利用する複数のDockerコンテナをローカルのdocker-compose.ymlを使用する場合に設定します。（後述するserviceを設定し、実際に乗り込むコンテナを一意に設定する必要があります。）

注意する点としては、指定するdocker-compose.ymlまでのパスはdevcontainer.jsonからの相対パスにする必要がある点です。（プロジェクトのルート配下に置いている場合は、../docker-compose.ymlになります。）

`service`

dockerComposeFileを利用する場合に必須となる項目で、docker-compose.ymlの定義の中から実際に開発時に乗り込むコンテナのサービス名を設定します。（webサービスの場合、大概はアプリケーションサーバ用のコンテナになると思います）