vscode dev container(開発コンテナー) 環境を作ってみよう ～ vscode-remote-try-* リポジトリで始める環境づくり～

前提となる環境

• Windows 10 以降 (私の環境は Windows 11)
• vscode
  • winget からなら winget install vscode で入れられます
• DockerDesktop
  • winget からなら winget install --id Dokcer.DockerDesktop で入れられます

vscode dev container

vscode での開発には vscode remote development … vscoede のリモート開発 というものがあります。 コンテナー、リモートコンピュータ、WSL をフル機能の開発環境として使用するものです。

これは ローカルマシンの構成に影響を与えないことができる為、とても便利です。

今回はそのうち、Dev Containers ... つまりローカルに Docker 環境を用意してそこに vscode を繋ぐ環境を用意してみましょうという話です。

とりあえず 環境の作り方 (序文)

インストールした vscode の左下に >< みたいなマークがあるのを確認できると思います。

フォーカスすると リモートウィンドウを開きます と出るそれです

クリックすると リモートウィンドウを開くオプション が出ますので 今回用事のある Dev Container を選択します。

するとインストールして このドロップダウンは閉じます。

再び >< を押すと Dev Containers 関連の項目が先頭に追加されています。

そこで 新しい開発コンテナー...(New Dev Container...) を選択することで 新しい環境を用意することができます………

例えばその検索欄で php と入力すれば php関連の Dev Containers テンプレートが選択できます。

で、そこを選択すればこと足りるのですが………今回は別に用意された テンプレートを使ってみましょうという話です。

vscode-remote-try-* リポジトリ

microsoft の github リポジトリには vscode-remote-try- で始まる dev containers 向けのリポジトリが幾つかあります。

好きな リポジトリを開いて Code ボタン から Download Zip を選択してダウンロードしてプロジェクトを置くフォルダ等に配置して vscode で開いてください。

vscode を開いて フォルダを開くでそのフォルダを選択してもいいですし、
ターミナルから vscode の実体名である code コマンドの 第二引数に 対象となるフォルダのパスを含めて 実行して開いてくのも手です。

そうしたのであれば 左下の >< から コンテナーで再度開く を実施します。

これで 環境（デバッグ込み）が作成できました。

詳しい環境情報については フォルダの .ddvcontainer/devcontainer.json および README.md から確認することができます。

サンプルファイルもあるのでとりあえず作ってみる際には参考になると思われます。

以上。