はじめに
みなさんは DevContainer を利用されていますか？
「何それ？」と思う方も多かったので、備忘録も兼ねてまとめました。
ちなみに、私は 毎日使わない日はない ほど活用しています。
devcontainerとは？
詳細な解説はさまざまなサイトにあるので省略しますが、私の一言で言うならば、「開発環境のIaC（Infrastructure as Code）」 だと考えています。
例えば、新しいプロジェクトに参加するとき、
- どの開発言語をインストールすればいいのか？
- どのバージョンを使うべきか？
といったことを確認しないと、開発を始められません。（README に書かれていればいいのですが……）
また、複数のプロジェクトに関わると、ローカル環境にさまざまな言語やツールがインストールされ、環境が汚れてしまいます。
DevContainer を使えば、これらの問題をすべて解決できます。
VScodeの設定
拡張機能で「dev containers」をインストールしておく
あとは、Docker がインストールされていれば動作します。
（例）React の開発環境構築
React の開発環境を想定し、私がよく使う DevContainer の設定を紹介します。
mkdir .devcontainer
touch .devcontainer/devcontainer.json
{
"name": "DinD",
"image": "mcr.microsoft.com/devcontainers/base:bullseye",
"features": {
"ghcr.io/devcontainers/features/docker-in-docker:2": {},
"ghcr.io/devcontainers/features/node:1": { "version": 22 }
},
"mounts": [
"source=${localEnv:HOME}${localEnv:USERPROFILE}/.ssh/,target=/home/vscode/.ssh/,type=bind,consistency=cached"
],
"containerEnv": {
"TZ": "Asia/Tokyo"
},
"postCreateCommand": "docker --version",
"customizations": {
"vscode": {
"extensions": [
"mhutchie.git-graph",
"dbaeumer.vscode-eslint",
"stylelint.vscode-stylelint",
"esbenp.prettier-vscode",
"VisualStudioExptTeam.vscodeintellicode",
"christian-kohler.path-intellisense",
"oderwat.indent-rainbow",
"formulahendry.auto-rename-tag",
"vscode-icons-team.vscode-icons",
"MariusAlchimavicius.json-to-ts",
"wix.vscode-import-cost"
],
"settings": {
"editor.formatOnSave": true,
"editor.tabSize": 2,
"editor.renderWhitespace": "all",
"editor.fontSize": 14,
"editor.fontFamily": "MS Gothic",
"editor.renderLineHighlight": "all",
"editor.rulers": [40, 80, 120],
"editor.bracketPairColorization.enabled": true,
"files.trimFinalNewlines": true,
"files.trimTrailingWhitespace": true,
"files.encoding": "utf8",
"terminal.integrated.fontFamily": "MS Gothic",
"git.autofetch": true,
"workbench.tree.indent": 15,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
},
"remoteUser": "vscode"
}
使い方
ここまでの設定が完了したら、VSCode を 一度閉じて 再起動し、プロジェクトを開きます。
すると、以下のような通知が表示されるので、「コンテナーで再度開く」 を選択します。
これにより、devcontainer.json の設定に従い Docker 上に開発環境が構築され、自動でその環境内に入った状態 で開き直してくれます。
確認
ターミナルで node のバージョンを確認してみましょう。
DevContainer 内に Node.js や Docker がインストールされた状態 になっているはずです。
devcontainer.jsonの解説
image
コンテナのベースイメージです。
features
追加機能を指定できます。今回は Docker と Node.js を追加しています。
バージョンを細かく指定できるため、バージョンごとの動作差異を検証しやすいのが利点です。
mounts
SSH キーや AWS クレデンシャル情報などを コンテナ内で利用できるようにする 設定です。
（sshの場合、ssh-agentを利用する方法もあります。その場合は、この設定は不要です。）
containerEnv
環境変数の設定です。今回は タイムゾーンを Asia/Tokyo に指定 しました。
customizations
VSCode の拡張機能や設定を事前にインストールできます。
通常、.vscode/settings.json に書く内容と同じですが、環境構築時点で適用される のがメリットです。
拡張機能の中には 再起動しないと動作しないもの があります。
環境が立ち上がったら、一度 VSCode を再起動 しましょう。
remoteUser
ターミナルでのログインユーザーを指定します。
（今回は vscode を指定しましたが、デフォルトと同じなので省略可能です。）
環境の動作確認
必要なツールをインストール
npm install -g yarn typescript ts-node typesync npm-check-updates npm@11.1.0
プロジェクトの作成
yarn create vite hello-world --template=react-ts
cd hello-world
yarn install
開発環境を起動
yarn dev --host
確認
ブラウザで http://localhost:5173/ を開きます。
さいごに
環境構築に時間をかけたくない方や、開発環境をどこでも簡単に再現したい方にDevContainerは非常に便利です。
興味がある方は、ぜひ試してみてください！
