VSCodeを窓から投げ捨て半日格闘してようやく辿り着いたWSL2におけるCLI完結型Docker開発環境の全記録 🚀

✍️ 執筆について

本書は、前回の記事で構築した環境をベースにしつつ、VS Codeの自動制御から意図的に離脱し、コマンドラインのみで開発環境を再定義しようと試みた記録である。その過程で直面した仕様上の壁を、AIアシスタントとの対話と検証によって一つずつ解消していった共創の成果物である。

🔗 前回の記事

WSL2でClaude Codeが異常に重い？Dev Containersへの移行で爆速開発環境を構築する

0. 環境の定義（凡例）

本文中における各環境の呼び方を以下の通り定義する。

• [WSL]: Windows上のターミナル（Ubuntu等）で直接操作する階層
• [Container]: Docker内で動作しているプロジェクト専用の隔離環境
• [Browser]: Windows上で動作するWebブラウザ

1. 構築の背景と目的 🎯

前回の構築でDev Containersによる高速な開発環境を手に入れたが、今回はさらに一歩進み、VS CodeというGUIエディタの介在すら排した**「純粋なCUI環境」**への移行を目指した。

GUIを脱ぎ捨て、すべての操作をターミナル上で完結させることで、リソースを最小限に抑えつつ、より自律的な開発フローを実現する。

2. 開発環境の階層構造 🏗️

本環境は、Docker DesktopのWSL2バックエンドを活用した多層構造となっている。

1. Windows 11: 管理用Docker Desktopおよび閲覧用ブラウザの実行。
2. WSL2 (Ubuntu): ソースコードの保存場所。Docker本体（デーモン）とファイルシステムレベルで高速に連携する主戦場。
3. Docker Container: VS CodeのDev Containers用イメージを流用したランタイム。
4. tmux: コンテナという「一つの部屋」の中に複数の作業机（仮想端末）を置くための心臓部。

3. 発生した課題と具体的な解決コマンド 🛠️

① コンテナの常駐化（VS Codeの「魔法」を解く）

通常、Dockerコンテナは「特定のアプリを実行し、終われば消える」使い捨ての道具だ。しかし、開発環境として使う場合は**「人間が入り込んで作業するための空の部屋」**として永続的に存在し続ける必要がある。

• VS Code用コンテナの特殊性:
  VS Codeが生成するコンテナは、実は背後でVS Code専用のサーバープロセスを動かすことで「部屋の電気をつけたまま」にしている。
• 手動起動の壁:
  VS Codeを通さずに docker run すると、コンテナは「やるべき仕事がない」と判断して即座に終了（Exited）してしまう。
• なぜ流用するのか:
  VS Code用イメージには開発に必要なライブラリや設定が既に詰まっている。この「資産」を活かしつつ、自力で部屋の電気をつけ続ける（常駐化）のが今回の狙いだ。

[WSL] 起動コマンド:

docker run -d \
  -p 3000:3000 \
  --name project-x-container \
  -v /home/user/MyProject/project-x:/workspaces/project-x \
  [イメージ名]:latest \
  /bin/sh -c "while sleep 1000; do :; done"

💡 解決のポイント
最後に /bin/sh -c "while sleep 1000; do :; done" という「何もしないが死なないプロセス」を PID 1 に注入。これでコンテナを強制的に延命（常駐化）させている。

② ツールチェーンの再整備（コンテナ内OSの補強）

コンテナはあくまで「実行環境」であり、OSレベルの便利ツール（tmuxなど）は入っていないことが多い。コンテナを再構築するたびにこれらは消えるため、手動での再導入が必要になる。

[WSL] ツール追加コマンド:

# rootユーザーとしてコンテナに潜入
docker exec -it -u root project-x-container bash

# [Container] 内部での実行
apt update && apt install -y tmux
npm install -g @anthropic-ai/claude-code
exit

③ 運用を自動化するエイリアスの策定 ⚡

環境構築を「儀式」にしないため、一撃で作業を開始できるエイリアスを ~/.bashrc に定義する。

[WSL] エイリアス設定:

alias x-go='docker start project-x-container && docker exec -it -u node -w /workspaces/project-x -e LANG=C.UTF-8 project-x-container tmux -u new-session -A -s dev'

文字化け対策
-e LANG=C.UTF-8 は、コンテナに日本語の扱い方を教える設定だ。これがないと、AIエージェントの出力やログが解釈不能な記号に化けてしまう。

4. 最終運用フロー 🔄

1. [WSL]: x-go を実行。一瞬でコンテナが起動し、tmux セッションに接続される。
2. [Container/tmux]: ペインを分割（Ctrl+b → "）。上段でNext.jsサーバーを起動。

# 上段ペイン：外部アクセスを許可して起動
npm run dev -- -H 0.0.0.0

1. [Container/tmux]: 下段ペインでAIエージェントを起動して実装を進める。
2. [Browser]: Windows側から http://localhost:3000 を叩き、リアルタイムに動作を確認。

5. 結論 🏁

VS Codeという「至れり尽くせりな環境」から離れることで、ポート転送やプロセス管理といったDocker本来の仕様に正面から向き合うことになった。

不自由さはあるが、コマンドライン一つですべてを支配できるこの環境こそ、真に手に馴染む開発ツールと言えるだろう。AIとの半日にわたる格闘は、自動化の裏側にある「技術の根っこ」を理解する最高の時間となった。