メインコンテンツまでスキップ

第31章：おまけ：VS Codeのコンテナ開発（必要な人だけ）🧊🧰

この章は「Composeでスタック一発起動はもうできた！🐳✨」って人が、さらに “PCを汚さず、エディタ込みで環境を固定する” ためのオプションです😊 使うのは VS Code の Dev Containers（旧 Remote - Containers）だよ〜！🧩💡 (Visual Studio Code)

1) Dev Containersってなに？🤔🧠​

ざっくり言うと…

✅ VS Codeが“コンテナの中に入って”開発する仕組みです🧑‍💻➡️📦 プロジェクトに devcontainer.json を置いておくと、VS Code がその定義に沿って 開発用コンテナを作って接続してくれます✨ (Visual Studio Code)

ポイントはここ👇

  • 「アプリを動かすコンテナ」だけじゃなくて、開発に必要な道具（Node/CLI/拡張機能など）もまとめて固定できる🧰✨ (Visual Studio Code)
  • 定義ファイルは Dev Container Specification（containers.dev）に沿うので、VS Code 以外や CI でも使える思想になってるよ📐🌍 (Dev Containers)

2) どんな人に効く？💥（“必要な人だけ”の理由）🎯​

✅ 使うと気持ちよくなるケース😍​

  • 複数プロジェクトを並行していて、Nodeのバージョンやツールが混ざりがち😵‍💫
  • チーム開発で「動かないんだけど…」が出る（環境差）🌀
  • OSやPCを変えても、すぐ同じ開発環境に戻りたい🛫➡️🧊
  • 「エディタ拡張」「lint/format」「補助ツール」まで 丸ごとテンプレ化したい🎁

✅ 逆に、今は不要なケース🙆‍♂️​

  • すでに Compose で困ってない & 個人開発で環境差が問題になってない
  • “とにかく最短で作りたい”フェーズ（学習コストを増やさないのが正解）🏃‍♂️💨

3) 仕組みの全体像（超ざっくり）🧩🗺️​

Dev Containers は、基本こういう役割分担です👇

  • Compose：複数サービス（API/DB/Redis/Worker…）を起動・接続管理🐳
  • Dev Containers：そのうち どれか1つのコンテナに VS Code が接続して、エディタ体験を“コンテナ内”に移す🧊🧑‍💻 (Dev Containers)

特に Compose と連携するときは、devcontainer.json に👇が出てきます：

  • dockerComposeFile：どの Compose ファイルを使うか📄 (Dev Containers)
  • service：VS Code が “入る” コンテナ名はどれ？🏠 (Dev Containers)
  • runServices：起動しておきたいサービス一覧（DB/Redisなど）🚦 (Dev Containers)
  • forwardPorts：ポート転送を固定する（DBの5432とか）🌐 (Dev Containers)

4) 最短の導入手順（VS Code操作）🪄🧑‍💻​

ステップA：拡張機能を入れる🧩​

VS Code で Dev Containers 拡張を入れます（名称変更されてこの名前になったよ）🧊✨ (Visual Studio Code)

ステップB：設定ファイルを自動生成（おすすめ）🤖📄​

VS Code のコマンドから Dev Containers: Add Dev Container Configuration Files... を実行すると、テンプレから作れます🎁 (Visual Studio Code) 「いきなり全部手書き」より事故が減る！🚑💨

ステップC：コンテナで開く🧊➡️​

コマンドで Reopen in Container（または類似の「コンテナで開く」）を選ぶと、定義に沿って起動→接続してくれます🚀 (Visual Studio Code)

5) Compose教材の“完成品”に足す最小セット🧱✨​

ここからは「すでに compose.yaml がある」前提で、最小の差分だけで Dev Containers を組み込みます😊

パターン1：APIコンテナにVS Codeが入る（いちばん素直）🏠🧊​

① フォルダ構成📁​

プロジェクト直下にこう置くのが定番です👇

  • .devcontainer/devcontainer.json

② .devcontainer/devcontainer.json（例）🧾✨​

※あなたの compose.yaml に合わせて service 名は調整してね（例では api / db / redis / worker）😊

{
  "name": "compose-stack-dev",
  "dockerComposeFile": ["../compose.yaml"],
  "service": "api",
  "runServices": ["db", "redis", "worker"],
  "workspaceFolder": "/workspace",

  // VS Codeが自動転送しないケースもあるので固定しておくと安心👍
  "forwardPorts": [3000, "db:5432", "redis:6379"],

  // 初回だけ走らせたい（依存導入など）
  "postCreateCommand": "npm ci",

  // VS Code側の拡張や設定も“プロジェクトに同梱”できる🎁
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode"
      ]
    }
  }
}
  • dockerComposeFile / service は Compose 連携の要点です🧩 (Dev Containers)
  • forwardPorts は “db:5432” のようにサービス指定もできるのが地味に便利！🐘🌐 (Dev Containers)

パターン2：“開発専用 dev サービス”を作って、そこにVS Codeが入る（中〜上級寄り）🧪🧊​

「APIはAPIとして起動」「VS Codeは dev コンテナへ」みたいに分けたい人向けです😊 メリットは👇

  • dev には ツールを盛ってOK（git, curl, jq, DBクライアント等）🧰✨
  • API/Worker の起動コマンドを汚しにくい🧼

ただし Compose 側の設計が少し増えるので、必要になったらでOK🙆‍♂️

6) Windowsでハマりやすいところ（ここ超大事）🪟🧨​

① “遅い”問題：リポジトリ置き場で体感が激変💥🐢➡️🐇​

Dev Containers はファイルをたくさん読むので、置き場が悪いと「重い…」になりがち😇

VS Code公式の推奨は👇

  • ソースを WSL 2 のファイルシステム側に置くと速くなりやすい🏎️💨 (Visual Studio Code)
  • もしくは Clone Repository in Container Volume（コンテナ用ボリュームにクローン）も高速化に効くよ📦⚡ (Visual Studio Code)

「Dev Containers が重くて嫌い」にならないための最重要ポイントです😂🔥

② Docker Desktop の WSL 2 バックエンドは基本ONでOK🐳🧠​

Docker Desktop は WSL 2 を使う構成が主流で、起動速度やリソース効率が良くなりやすいです🚀 Docker公式でも、WSL 2 の前提や統合設定が整理されています📘 (Docker Documentation)

（メモ）WSL のバージョンを新しめに保つのも安定に効くよ〜🧯 (Docker Documentation)

③ パーミッション（権限）で詰まる人へ🔒😵​

「コンテナ内で作ったファイルが編集しづらい」みたいな権限問題が出ることがあります。

Dev Container にはユーザーやUID/GID調整に関するプロパティがあって、たとえば updateRemoteUserUID は bind mount の権限問題を避ける目的で用意されています🧩 (Dev Containers)

とはいえ、まずは最小構成でOK！ 困ったときにだけ、ここを疑うのが良いです🕵️‍♂️🔍

7) 便利機能だけつまみ食い🍽️✨（覚えると強い）​

✅ ポート転送を固定（forwardPorts）🌐​

APIだけじゃなく、DB/Redis を “サービス名付き” で転送できるのが便利！🐘🟥 (Dev Containers)

✅ Features / Templates（後から道具を足す）🧰➕​

Dev Containers には Features（追加機能） や Templates（雛形） があります🎁 「あとから git や CLI を足したい」みたいなときにラク！ (Dev Containers)

✅ Dev Container CLI（CIや自動化に寄せる）🤖⚙️​

VS Code だけじゃなく、devcontainer.json から環境を作るための dev container CLI も用意されています🧩 (Visual Studio Code) 「CIで devcontainer を使ってテスト」みたいな発想にも繋がります🧪🚀 (Visual Studio Code)

8) AI（Copilot / Codex）で“安全に”作るコツ🤖🛡️​

Dev Containers は 叩き台をAIに作らせるのがめちゃ相性いいです😄✨ でも、事故ポイントもあるのでチェックもセットでね✅

使える指示（例）🧠💬​

  • 「既存の compose.yaml を使って Dev Containers を設定したい。VS Code が接続する service は api。.devcontainer/devcontainer.json を作って」
  • 「forwardPorts で API:3000 と db:5432 と redis:6379 を常に転送して」
  • 「初回 postCreateCommand で npm ci を実行して」

AIの出力で“必ず見る”チェック✅🕵️‍♂️​

  • 🔥 秘密情報を json や compose に直書きしてない？（APIキーとか）
  • 🧱 service 名が compose の services: と一致してる？
  • 📁 dockerComposeFile のパスが .devcontainer から見て正しい？ (Dev Containers)
  • 🌐 ポートが転送される想定どおり？（forwardPorts） (Dev Containers)

9) ミニ課題（10分）⏱️✨​

  1. .devcontainer/devcontainer.json を作る（パターン1でOK）🧊
  2. VS Code で “コンテナで開く” を実行🚀
  3. コンテナ内ターミナルで node -v と npm -v を確認🔎
  4. npm test や npm run lint を “コンテナの中で” 実行してみる🧪✨

できたら勝ちです🏆🎉

まとめ：この章で得られる“うまみ”😋✨​

  • Composeで作ったスタックに、VS Codeごと環境固定を足せる🧊🧑‍💻
  • “環境差”による事故が減って、再現性がさらに上がる📦✨ (Visual Studio Code)
  • Windowsの体感は「どこにソースを置くか」が超重要（WSL2/Volume推奨）🏎️💨 (Visual Studio Code)

次に、こちらから選ぶのがおすすめだよ👇😊✨

  • 「Dev Containers もテンプレ化したい！」→ 第30章のスターターキット化と合体🎁🚀
  • 「重い/反映されない/遅いが出た！」→ 第28章（遅いを潰す）に戻って改善🏎️💥

必要なら、あなたの compose.yaml のサービス名（api/db/redis/worker など）に合わせて、この章の devcontainer.json を “そのままコピペで動く形” に寄せた完成版も作れるよ〜！😄🧩