VSCode DevContainerを利用する

VSCodeのDevContainerについては、windowsの開発環境をおおむねWSL2に寄せたので特に必要だと思っていなかったけれど、少し話題になったので セットアップしてみた記録。

事前

• WSL2がセットアップされている。
• WSL2上でdocker daemonが自動起動している。(私はsystemdで自動起動させています)
• WSL2上にdocker buildxがインストールされている。

install

VSCodeでDevContainer拡張をインストールする

setting

VSCodeの設定で Dev>Containers: Execute in WSL にチェックを入れる。

使ってみる

手元にtauriのプロジェクトがあったのでそこで利用してみた。

.devcontainer.json

{
  "name": "Node.js",
  "build": { "dockerfile": "Dockerfile" },

  "remoteUser": "node",
  "mounts": [
    "source=try-node-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume",
    "source=try-node-pnpm-store,target=${containerWorkspaceFolder}/.pnpm-store,type=volume",
    "source=try-node-tauri-target,target=${containerWorkspaceFolder}/src-tauri/target,type=volume"
  ],
  "customizations": {
    "vscode": {
      "settings": {},
      "extensions": [
        "streetsidesoftware.code-spell-checker",
        "tauri-apps.tauri-vscode",
        "svelte.svelte-vscode",
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "rust-lang.rust-analyzer"
      ]
    }
  },

  "portsAttributes": {
    "3000": {
      "label": "Hello Remote World",
      "onAutoForward": "notify"
    }
  },

  "postCreateCommand": "sudo chown -R node:node /${containerWorkspaceFolder}/.pnpm-store && sudo chown -R node:node /${containerWorkspaceFolder}/node_modules && sudo corepack enable && pnpm install"
}

Dockerfile

FROM node:20

RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
RUN apt update && apt install -yqq sudo && apt clean && rm -rf /var/cache/apt
RUN echo 'node ALL=(ALL:ALL) NOPASSWD: ALL' >> /etc/sudoers

工夫したポイント

• devcontainer.jsonで .pnpm-store node_modulesを volumeにした
• Dockerfileでsudoコマンドをいれ、nodeユーザでsudoできるようにしたところ

volume にしたところ、所有者が root:rootになってしまったため、postCreateCommandで所有者を変更するためにsudoコマンドが必要になってしまった。

というあたり。

通常はあらかじめディレクトリを作って所有者を変えておけばいいのだけれど、今回のものは /workspaces/directory_name/volume_path にマウントされるため、ディレクトリ名が動的に変更されるため、事前にディレクトリを作成できないので対応不可能。という状況です。

Dev>Containers: Execute in WSL のおかげで、 windowsでVSCodeを開いていても、DevContainer起動しようとすると、windows上のpathでwsl上のdockerコマンドを打ってくれるので、 c:\xxx みたいなpathが /mnt/c/xxx になっており、c:\xxx をbind mountしようとしてマウントできない。と言われずに済むようになり、事前にwsl2で開く手間が省けるのがいいところですかね。