WindowsのVS CodeでDev Container開発環境を構築する手順
WindowsのVS CodeでDev Container開発環境を構築する手順
WindowsでDev Container環境を構築する際に、ちょっと特殊な要件があったのでその手順を共有しておきます。かなりニッチなシチュエーションなので、該当する方は少ないかもしれませんが、同じような状況の方の参考になれば幸いです。
この記事が対象とするシチュエーション
以下のような状況にある方向けの手順です：
環境について
- Windows 11でVS Codeを使用
- Docker Desktop や Rancher Desktop などのDocker環境が設定済み
- Dev Containerを使った開発環境を構築したい
リポジトリの状況
- 対象リポジトリはGitHubなどのリモートに存在
- リポジトリには
.devcontainerフォルダ/設定がまだ存在しない - 自分で
.devcontainer/devcontainer.jsonを用意して利用したい
パフォーマンス要件
- WindowsとWSL2間のファイルアクセスによるパフォーマンス劣化を避けたい
- すべての作業をLinuxファイルシステム上で直接実行したい
もしリポジトリに既に.devcontainer設定がある場合や、通常のクローン後にDev Container化したい場合は、別のアプローチの方が適しているかと思います。
構築手順
1. VS Codeの起動
VS Codeを起動します。
2. Dev Containers拡張機能のインストール（初回のみ）
VS Code拡張機能から「Dev Containers」をインストールします。
3. リモートリポジトリのクローン
- VS Codeのコマンドパレット（
Ctrl+Shift+PまたはF1）を開く - 「Dev Containers: Clone Repository in Container Volume...」と入力して選択
※環境によってコマンド名が若干異なる場合があります - GitHubのURL（例:
https://github.com/your-username/your-repo.git）を入力してEnterを押す
4. テンプレートの選択
リポジトリに.devcontainer設定がないため、Dev Containerの初期化にテンプレートの選択が求められます。
- 適当なテンプレートを選択（後で差し替えるため、何を選んでも問題なし）
- 追加機能なども適当に選択
5. 自動クローンとコンテナ構築
VS Codeが指定されたリポジトリを、WSL2のDockerボリューム（Linuxファイルシステム上）にクローンします。
クローン完了後、選択したテンプレートを基にDev Containerが自動構築され、コンテナ内でVS Codeが開かれます。
6. 設定ファイルの差し替えと再構築
-
.devcontainer/devcontainer.jsonを事前に用意した設定ファイルに差し替える - 「コンテナの再構築」のメッセージが表示されるので、再構築を実行
7. 完了
開発環境の構築が完了しました。これで、yarn install、yarn build、yarn lintなどのすべてのコマンドが、Linuxファイルシステム上で直接実行されるようになります。
この手順を採用する理由
一見すると「テンプレート選択→差し替え」は無駄な手順に見えますが、これには重要な意味があります：
- Container Volume内でのクローン：最初からLinuxファイルシステム上にリポジトリが配置される
- 高パフォーマンス：WindowsとLinux間のファイルアクセスオーバーヘッドが発生しない
- 設定の柔軟性：個人の開発環境に合わせて柔軟に設定可能
まとめ
この手順により、WindowsでもLinuxネイティブに近い高速な開発環境を構築できます。Dev Containerを使うことで、チーム間での基本的な環境統一も図りつつ、個人の設定は柔軟にカスタマイズできるため、開発効率の大幅な向上が期待できます。
Discussion