はじめに

VSCode の devcontainer、とっても便利ですよね。
今回は、devcontainer をより便利に使う為のテクニックをご紹介します。

devcontainer の使い分け

とあるアプリを、フロントエンドとバックエンドそれぞれ１つの github リポジトリにまるっとまとめて開発しちゃいたい、といったことはありませんか？
このような場合に、リポジトリ内にフロントエンド用とバックエンド用でそれぞれ devcontainer を作成できると便利だと考えたので、出来ないか調査・検証してみました。
結論、できましたのでその方法を共有できればと思います。

ディレクトリ構造

下記のような形になります。

root@nimowagukari:/srv/work/multiple-devcontainer-test# tree -a -I .git
.
└── .devcontainer
    ├── backend
    │   └── devcontainer.json
    └── frontend
        └── devcontainer.json

3 directories, 2 files
root@nimowagukari:/srv/work/multiple-devcontainer-test# 

root@nimowagukari:/srv/work/multiple-devcontainer-test# git diff
diff --git a/.devcontainer/backend/devcontainer.json b/.devcontainer/backend/devcontainer.json
index efef13e..042b0f7 100644
--- a/.devcontainer/backend/devcontainer.json
+++ b/.devcontainer/backend/devcontainer.json
@@ -1,12 +1,16 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the
 // README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
 {
-       "name": "Node.js",
+       "name": "backend",
        // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
        "image": "mcr.microsoft.com/devcontainers/javascript-node:1-20-bullseye",
        "features": {
                "ghcr.io/devcontainers/features/git:1": {}
-       }
+       },
+       "runArgs": [
+               "--name",
+               "${localWorkspaceFolderBasename}-backend"
+       ]
 
        // Features to add to the dev container. More info: https://containers.dev/features.
        // "features": {},
diff --git a/.devcontainer/frontend/devcontainer.json b/.devcontainer/frontend/devcontainer.json
index efef13e..d380a74 100644
--- a/.devcontainer/frontend/devcontainer.json
+++ b/.devcontainer/frontend/devcontainer.json
@@ -1,12 +1,16 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the
 // README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
 {
-       "name": "Node.js",
+       "name": "frontend",
        // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
        "image": "mcr.microsoft.com/devcontainers/javascript-node:1-20-bullseye",
        "features": {
                "ghcr.io/devcontainers/features/git:1": {}
-       }
+       },
+       "runArgs": [
+               "--name",
+               "${localWorkspaceFolderBasename}-frontend"
+       ]
 
        // Features to add to the dev container. More info: https://containers.dev/features.
        // "features": {},
root@nimowagukari:/srv/work/multiple-devcontainer-test#

.devcontainer 直下にディレクトリを作成し、その中に devcontainer.json を配置する形になります。

コンテナを起動する際の操作にも注意が必要です。

開くフォルダは、.devcontainer フォルダの直上のフォルダ
その後、対象の devcontainer 名を選択する

おわりに

いかがでしたでしょうか。
devcontainer を利用して新たに monorepo で開発を進めようと考えている場合には、是非活用してみて下さい。