VS Code

前提条件

1. VS Code
2. Dev Containers拡張機能 (ms-vscode-remote.remote-containers)
3. マシン上でDockerまたはPodmanが実行されていること（はじめにを参照）。VS Code Dev ContainersはバックエンドとしてPodmanもサポートしています。

クイックスタート

git clone https://github.com/f5-sales-demo/devcontainer.git
code devcontainer

VS Codeが.devcontainer/devcontainer.jsonを検出し、**「コンテナで再度開く」**という通知を表示します。それをクリックするか、コマンドパレットを使用してください：

Dev Containers: Reopen in Container

VS Codeがイメージをビルド（またはプル）し、コンテナを起動し、拡張機能をインストールして、コンテナ内のターミナルを開きます。

仕組み

.devcontainer/devcontainer.jsonファイルは、VS CodeにDocker Composeを使用するよう指示します：

"dockerComposeFile": ["../docker-compose.yml", "../docker-compose.build.yml"],
"service": "dev",
"workspaceFolder": "/workspace"

devcontainerの設定にはビルドファイルが明示的に含まれているため、「コンテナで再度開く」や「コンテナのリビルド」を使用する際に、VS Codeがイメージをローカルでビルドできます。

拡張機能

拡張機能はコンテナ内に自動的にインストールされます：

拡張機能	説明
Python	Python言語サポート
ESLint	JavaScript/TypeScriptリンティング
Prettier	コードフォーマット
Docker	Dockerfileとcomposeサポート
Terraform	HCL言語サポート
Go	Go言語サポート
Rust Analyzer	Rust言語サポート
YAML	YAML言語サポート
Kubernetes	Kubernetesマニフェストサポート

拡張機能を追加するには、.devcontainer/devcontainer.jsonのcustomizations.vscode.extensions配列を編集してください。

ポートフォワーディング

VS Codeはcomposeファイルで定義されたポートを自動的にフォワーディングします。noVNCディスプレイはhttp://localhost:6080/vnc.htmlで利用可能です。ポートの準備ができるとVS Codeが通知します。

追加のポートは、VS Codeのポートパネルからオンデマンドでフォワーディングできます。

Devcontainer CLIの代替方法

VS Code UIよりもコマンドラインを好む場合：

npm install -g @devcontainers/cli

devcontainer up --workspace-folder .
devcontainer exec --workspace-folder . zsh

リビルド

Dockerfileやcomposeファイルを変更した後：

Dev Containers: Rebuild Container

これによりイメージがリビルドされ、コンテナが再起動されます。名前付きボリューム（workspace、home）はリビルド後も永続化されます。