Claude Code×DevContainer環境構築ガイド – Node.js・Python対応

Claude Code×DevContainer環境構築ガイド - Node.js・Python対応

SHARE

目次

はじめに

どうも、今月はあまりブログを書くことができなかった龍ちゃんです！

ブログを書かなかった時というのは、大体何かしらの検証に時間を取られていたという理由なのですが、今月は主にClaude Codeで実際にVibe Codingを行うという検証をしていました。その中で、Claude Codeをいろんなプロジェクトに適用して使ってみるというところなのですが、まず基本となる環境整備が重要だなと感じています。先月までは、「Claude×技術ブログ」というテーマで11本ブログを執筆していました。

今回は、DevContainerにClaude Codeを導入する方法について詳しく解説していきます。これから Claude Code を使って開発を始めたい方や、既存の開発環境に組み込みたい方の参考になれば幸いです。

なぜDevContainerでClaude Codeなのか？

私が基本的に開発をDevContainerで行っている理由は、いくつかのメリットがあるからです。

セキュリティと安全性の向上

rmコマンドで誤ってファイルを壊されるのを防止するという点が大きいですね。Claude Codeは強力なツールですが、AIがコマンドを実行する以上、予期せぬ操作のリスクもゼロではありません。DevContainer環境であれば、最悪の場合でもコンテナを作り直せば元通りです。

チーム開発での設定管理

複数人でコードを開発していく時に、リポジトリ単位で設定を切り分けることができます。プロジェクト固有の設定などがユーザー設定の部分で混在すると管理が大変ですが、DevContainerなら各プロジェクトで独立した環境を維持できます。

Claude Codeの権限制御

さらに重要なのが、Claude Codeに見える範囲を限定することです。権限を与えるとどこまででもディレクトリ走査のようなことができてしまいますが、マウントするファイルを限定することによって影響範囲を小さくすることができます。

Claude Codeのインストールコマンド

どちらの方式でもnpm形式を用いてインストールを行います。公式の情報に乗っているコマンドでインストールを行います。

npm install -g @anthropic-ai/claude-code

基本パターン：Node.jsベースイメージでの導入

最もシンプルな方法

NodeのベースイメージにClaude Codeをインストールするというのは一番簡単な方法です。Nodeのベースイメージなので、npmコマンドがそのまま使えて、追加の設定も最小限で済みます。

実装方法は2つあります：カスタムのDockerfileで構築する方法と、DevContainerの起動コマンドでインストールする方法です。どちらでも問題ないのですが、私は再現性を重視してDockerfile方式を推奨しています。

Dockerfile方式

# .devcontainer/Dockerfile
FROM mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm

WORKDIR /home/node/
USER node

# Claude Codeとnpmを最新版にアップデート
RUN npm install -g \
    npm@11.5.2 \
    @anthropic-ai/claude-code

# バージョン確認用コマンド（デバッグ用）
RUN echo "=== Installed Versions ===" \
    && node --version \
    && npm --version \
    && echo "========================="

# デフォルトコマンド（devContainerではsleep infinityで上書きされる）
CMD ["sleep", "infinity"]

PostCreateCommand方式

{
    "name": "Claude Code Development Environment",
    "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
    "workspaceFolder": "/home/node/workspace",
    "remoteUser": "node",

    "postCreateCommand": "npm install -g npm@11.5.2 @anthropic-ai/claude-code",

    "forwardPorts": [3000, 8000],
    "mounts": [
        "source=${localEnv:HOME}/.claude,target=/home/node/.claude,type=bind,consistency=cached",
        "source=${localEnv:HOME}/.claude.json,target=/home/node/.claude.json,type=bind,consistency=cached"
    ]
}

どちらの方式でも機能的には同じですが、Dockerfile方式の方が起動が早く、確実性が高いと感じています。

応用パターン：他のベースイメージでの導入

Python環境での導入例

Nodeのベースイメージ以外にClaude Codeを導入する場合、まずベースイメージでNodeを使えるようにする必要があります。

他のベースイメージでNodeを使えるようにするには、カスタムDockerfileでNodeを自力でインストールするか、DevContainer Featuresの便利な機能を使うかの2つの方法があります。

カスタムDockerfile方式

# .devcontainer/Dockerfile
FROM mcr.microsoft.com/devcontainers/python:3.11

# Node.jsのインストール（最新LTS v22）
RUN curl -fsSL https://deb.nodesource.com/setup_lts.x | bash - \
    && apt-get install -y nodejs

# 実行ユーザーに変更
USER vscode

# Claude Codeのインストール
RUN npm install -g \
    npm@11.5.2 \
    @anthropic-ai/claude-code

DevContainer Features方式

{
    "name": "Python 3.11 + Claude Code Development Container",
    "image": "mcr.microsoft.com/devcontainers/python:3.11",
    "workspaceFolder": "/workspace",

    "features": {
        "ghcr.io/devcontainers/features/node:1": {}
    },

    "postCreateCommand": "npm install -g npm @anthropic-ai/claude-code",

    "forwardPorts": [8000],
    "remoteUser": "vscode",

    "mounts": [
        "source=${localEnv:HOME}/.claude,target=/home/vscode/.claude,type=bind,consistency=cached",
        "source=${localEnv:HOME}/.claude.json,target=/home/vscode/.claude.json,type=bind,consistency=cached"
    ]
}

DevContainer Features方式が圧倒的に簡単ですね。Node.jsの詳細なインストール手順を書く必要がなく、featuresセクションに一行追加するだけです。

その後、Nodeが使える環境であれば、Node以外のベースイメージでも npm で Claude Code をインストールするのが簡単な方法になります。

設定ファイルのマウント設定

認証情報の永続化

Claude Codeの設定ファイルをマウントするというのも重要で、これはどちらの方法でも設定しておくと良いでしょう。これによって認証情報が渡されるので、DevContainerを起動したタイミングで毎回認証情報を入力する必要がなくなります。

また、履歴などの過去の記録もマウントされるので、Claude Codeの設定ファイルが保存されるという点も良いところだと考えています。

マウント設定の詳細

{
  "name": "Research Project",
  "build": {
    "dockerfile": "./Dockerfile"
  },
  "workspaceFolder": "/home/node/dev",
  "remoteUser": "node",

  "mounts": [
    "source=${localEnv:HOME}/.claude,target=/home/node/.claude,type=bind,consistency=cached",
    "source=${localEnv:HOME}/.claude.json,target=/home/node/.claude.json,type=bind,consistency=cached"
  ]
}

設定ファイルの役割

Claude Codeでは2つの設定ファイルが重要な役割を果たしています。

.claude.jsonファイル

ホームディレクトリにある単体ファイル（~/.claude.json）で、Claude Codeのメイン設定を管理します。プロジェクト設定、MCPサーバー（外部ツール連携）、API認証情報、初期設定の完了状態などが保存されています。

2025年現在、このファイルが最も重要で推奨される設定方法とされています。

.claudeディレクトリ

ホームディレクトリ内のフォルダ（~/.claude/）で、拡張機能やカスタマイズ要素を格納します。commands/フォルダにはカスタムスラッシュコマンド、agents/フォルダにはAIサブエージェントが保存され、その他の詳細設定ファイルも含まれます。

使い分けのポイント

  • .claude.json: 基本的な動作設定
  • .claude/ディレクトリ: 機能拡張やカスタマイズ

この2つのファイル・ディレクトリをマウントしておくことで、DevContainer環境でも継続的にClaude Codeの設定を利用できます。

まとめと今後の展望

今回は、Claude Codeを開発環境に取り入れるための方法について詳しく解説しました。DevContainer環境でClaude Codeを利用することで、安全性と再現性を保ちながら、AIアシスタント開発の恩恵を受けることができます。

今月は結構いろんなClaude Codeに関する検証を行ったので、来月9月はClaude Codeを実際に使ってみた例や、プロトタイピングに適用して作ったものの紹介もできるかなと考えています。

Codexなども出ているので、そちらに乗り換えることもありますが、Claude Codeを契約してから約4カ月になるので、半年はClaude Codeを使った開発をメインに進めていこうと考えています。

皆さんも、ぜひClaude CodeとDevContainerの組み合わせを試してみてください。開発効率が大幅に向上すること間違いなしです！

次回は実際の活用例をお届けする予定ですので、お楽しみに〜

ご覧いただきありがとうございます！ この投稿はお役に立ちましたか？

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

OPA/Gatekeeperで始める安心OpenShift運用…

次の記事

Git & GitLab 入門 (6) ～Git マ…