以下に 2.3 devcontainer.json の構成要素を初学者向けに図解
を、一行ずつ日本語コメント付きのコード例付きで再提示します。
Rails開発環境を想定しています。
devcontainer.json
の構成要素を初学者向けに図解(コメント付きコード)devcontainer.json
は「この開発用コンテナをどう動かすか」をVSCodeに伝える設定ファイル.devcontainer
ディレクトリにこのファイルを置くだけで、VSCodeが開発環境を自動構築できる// .devcontainer/devcontainer.json
{
// VSCodeで表示される開発環境の名前(ウィンドウやコンテナ名として表示される)
"name": "auth-dev",
// 使用するDockerfileのパス(この.devcontainerフォルダ内のDockerfileを指定)
"dockerFile": "Dockerfile",
// Dockerのビルドコンテキスト(..はauthの1つ上、プロジェクトルートを意味する)
"context": "..",
// コンテナ内でVSCodeが使う作業ディレクトリ(ファイル編集やターミナルのカレントディレクトリ)
"workspaceFolder": "/workspace",
// コンテナ内のポート3000をホストに公開(Railsサーバ用ポート)
"forwardPorts": [3000],
// ホスト側のauthディレクトリをコンテナの/workspaceにバインドマウント(リアルタイム同期)
"mounts": [
"source=${localWorkspaceFolder}/../app/auth,target=/workspace,type=bind"
],
// コンテナ構築直後に実行するコマンド(gemのインストールとDB初期化)
"postCreateCommand": "bundle install && rails db:setup",
// 開発用ユーザー(コンテナ内で使用する一般ユーザー、通常は"vscode")
"remoteUser": "vscode"
}
.devcontainer/
├── devcontainer.json ← 設計図(VSCodeがこのファイルを読み取って開発環境を作る)
└── Dockerfile ← 実際にどんな環境にするかを定義(rubyやnodeのインストールなど)
開発の流れ:
1. VSCodeでauthリポジトリを開く
2. .devcontainer/devcontainer.jsonが見つかる
3. 「Reopen in Container」をクリック
4. Dockerfileで指定された環境が構築される
5. postCreateCommandでRailsの初期設定が自動実行される
6. /workspaceにauthのコードがマウントされて開発できる
devcontainer.json は、開発者のための「プレハブ作業部屋の設計図」。
中に置く道具(rubyやyarn)、どの部屋で作業するか(workspaceFolder)、作業前に何を準備するか(postCreateCommand)などが全て書かれている。