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

第27章：.devcontainer/devcontainer.json 最小を置く📁✨

この章は「ワンクリックで“いつもの開発環境”が立ち上がる」状態を作る回です😆🧰 やることはシンプルで、.devcontainer/devcontainer.json を1枚置くだけです👍

1) ゴール🎯✨​

  • VS Codeでフォルダを開いて 👉 Dev Containers: Reopen in Container を押すだけで ✅ Node/TS入りのコンテナが起動して、そこで開発できるようになる！📦🐳 （devcontainer.json はプロジェクト配下の .devcontainer/devcontainer.json か、ルート直下の .devcontainer.json に置けます）(Visual Studio Code)

2) まず「最低限の配置」を作る🧱📁​

こんな感じにします👇（Dockerfile は前の章までで作ってある想定）

myapp/
  Dockerfile
  package.json
  package-lock.json
  src/
    index.ts
  .devcontainer/
    devcontainer.json

3) 最小 devcontainer.json（Dockerfile を使う版）✅✨​

ここがこの章の本体です👇

{
  "name": "node-ts",
  "build": {
    "dockerfile": "../Dockerfile",
    "context": ".."
  }
}

ポイントは2つだけ！🧠✨

  • "build.dockerfile" は devcontainer.json から見た相対パスです。(devcontainers.github.io) だから .devcontainer/devcontainer.json からルートの Dockerfile を指すなら ../Dockerfile ✅
  • "build.context" は Docker build の作業ディレクトリです。デフォルトは "."（つまり .devcontainer/）なんだけど、これだと package.json が見えなくて詰みやすいです💥 なので "context": ".." を付けるのが事故りにくいです。(devcontainers.github.io)

ここ、初心者が一番ハマる場所です😇 「Dockerfile は見つかったのに、COPY が失敗する / package.json が無いって言われる」系は、だいたい context が原因！

4) VS Code で起動する手順（最短ルート）🏃‍♂️💨​

  1. プロジェクトを VS Code で開く📂
  2. コマンドパレット（F1）で Dev Containers: Reopen in Container を実行🚪🐳
  3. あとは待つだけ（初回はビルドが走る）🔧✨
  4. 左下に「リモートっぽい表示」が出て、コンテナに入れてたら成功🎉 （拡張やツールが “コンテナ内” に入って動くのが Dev Containers の強みです）(marketplace.visualstudio.com)

もしまだコンテナに入ってない状態なら、Dev Containers: Open Folder in Container... でもOKです。(Visual Studio Code)

5) 「最小」から1歩だけ便利にする👣✨（おすすめ）​

最小で動いたら、次はこれを足すと幸せになりやすいです😊💡

A. ESLint など “拡張” を自動インストール🧩⬇️​
{
  "name": "node-ts",
  "build": { "dockerfile": "../Dockerfile", "context": ".." },
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint"
      ]
    }
  }
}

VS Code の公式ドキュメントにもこの形で例が載ってます。(Visual Studio Code)

B. 初回だけ npm ci まで自動で走らせる📦⚡​
{
  "name": "node-ts",
  "build": { "dockerfile": "../Dockerfile", "context": ".." },
  "postCreateCommand": "npm ci"
}
  • .devcontainer の中身を変えたら Rebuild が必要です。(Visual Studio Code)
  • postCreateCommand は「コンテナ作成後に1回だけ」走るので、依存インストールと相性がいいです👍（npm install みたいな用途が想定されています）(Visual Studio Code)

6) よくある詰まりポイント🧯💥（最短で直す）​

❶ COPY package.json が失敗する / ファイルが無いと言われる​

👉 "build.context": ".." を付ける（これが9割）(devcontainers.github.io)

❷ 設定変えたのに反映されない​

👉 Dev Containers: Rebuild Container（設定変更は自動反映されない設計です）(Visual Studio Code)

❸ ワークスペースのマウント位置を変えたい​

👉 workspaceMount / workspaceFolder を使います（自動マウント挙動を上書きできる）(Visual Studio Code)

7) AIに投げると爆速になるやつ🤖⚡（コピペでOK）​

  • 最小 devcontainer.json をあなたの Dockerfile に合わせて作らせる

    • 「.devcontainer/devcontainer.json を最小で作って。Dockerfile はプロジェクトルートにある。ハマりやすい build.context も正しく入れて」

  • エラー貼って原因を特定させる

    • 「Dev Containers のビルドログを貼るので、原因と直し方を “最短手順” で出して。直すべきのは devcontainer.json / Dockerfile のどれ？」

  • 拡張セットを提案させる（Node/TS向け）

    • 「Node+TypeScriptで最低限入れると嬉しい VS Code 拡張を devcontainer.json の customizations で提案して。理由も1行で」

8) この章の“できた判定”✅🎉​

  • .devcontainer/devcontainer.json がある
  • Reopen in Container で開ける(Visual Studio Code)
  • そして “次回以降も同じ環境” が再現できる😆🔁

次の章（第28章）で、Windows での安定運用（WSL2 / Docker Desktop まわり）に入ると、「なぜか動かない」系が激減します🪟🐧🔥