コンテンツにスキップ

はじめに

マシンにコンテナランタイムが必要です。DockerまたはPodmanのいずれかが使用できます。

プラットフォームインストール
macOSDocker Desktop for Mac
WindowsDocker Desktop for Windows(WSL2バックエンド)
LinuxDocker Engine または Docker Desktop for Linux

動作確認:

Terminal window
docker --version
docker compose version
リソース最小要件推奨
ディスク5 GB10 GB以上
RAMコンテナランタイムに8 GB割り当て12 GB以上
CPU2コア4コア以上

Docker Desktop → Settings → Resources でリソース制限を調整してください。

フォルダを作成し、composeファイルをダウンロードします:

Terminal window
mkdir devcontainer && cd devcontainer
curl -fsSLO https://raw.githubusercontent.com/f5-sales-demo/devcontainer/main/docker-compose.yml

2. 認証情報の追加(オプション)

Section titled “2. 認証情報の追加(オプション)”

同じフォルダに.envファイルを作成して、Claude Codeを事前設定します。以下のオプションのいずれかを選択してください:

CLAUDE_CODE_OAUTH_TOKEN=sk-ant-oat01-your-token-here

オプションB: LiteLLMまたはAnthropic互換プロキシ

Section titled “オプションB: LiteLLMまたはAnthropic互換プロキシ”

LiteLLMインスタンスやその他のAnthropic互換プロキシをお持ちの場合は、以下の2つの変数を設定してください:

LITELLM_BASE_URL=https://your-litellm-endpoint.example.com
LITELLM_API_KEY=your-api-key

ドメインのみを設定してください — コンテナがプロバイダー固有のURLサフィックスを自動的に導出します(例:Claude Codeの場合は/anthropic)。

ローカル認証情報からの自動入力

Section titled “ローカル認証情報からの自動入力”

ホストマシンにgitghが設定されている場合、ほとんどの.env値を自動的に入力できます。まずテンプレートをコピーします:

Terminal window
cp .env.example .env

次に、お使いの環境に合ったコマンドを実行してください:

Terminal window
# Git ID
echo "GIT_AUTHOR_EMAIL=$(git config user.email)" >> .env
echo "GIT_AUTHOR_NAME=\"$(git config user.name)\"" >> .env
# タイムゾーン
echo "TZ=$(readlink /etc/localtime | sed 's|.*/zoneinfo/||')" >> .env
# GitHub CLIトークン(要件: gh auth login)
echo "GH_TOKEN=$(gh auth token)" >> .env
# SSHキー(gitにSSHを使用している場合)
echo "SSH_PRIVATE_KEY=$(base64 < ~/.ssh/id_ed25519)" >> .env

その後、.envを編集してOAuthトークンまたはLiteLLMプロキシ設定を追加してください(上記のオプションを参照)。

Terminal window
docker compose up -d

初回実行時にghcr.ioからビルド済みイメージをプルします(接続速度により約1分)。以降の起動ではキャッシュされたイメージを使用するため、数秒で完了します。

Terminal window
docker compose exec dev zsh
Terminal window
# AIツール
claude --version
codex --version
pi --version
# プログラミング言語
node --version
python3 --version
go version
# クラウドCLI
aws --version
az --version
terraform --version

AI接続のテスト:

Terminal window
claude -p "Say hello"
Terminal window
cd /workspace
git clone https://github.com/your-org/your-project.git
cd your-project
claude

7. リモートディスプレイ(noVNC)

Section titled “7. リモートディスプレイ(noVNC)”

コンテナには、AIエージェントがブラウザを操作する様子を確認するための仮想ディスプレイが含まれています。http://localhost:6080/vnc.htmlを開いて接続してください。詳細はリモートディスプレイ(noVNC)を参照してください。

8. ブラウザ自動化(Chrome DevTools MCP)

Section titled “8. ブラウザ自動化(Chrome DevTools MCP)”

Claude Codeは、組み込みのChrome DevTools MCPサーバーを使用して、Webページのナビゲーション、スクリーンショットの取得、DOMの検査を行えます。セットアップは不要で、ヘッドレスモードで自動的に動作します。詳細はChrome DevTools MCPを参照してください。

Terminal window
# 停止(データは保持されます)
docker compose down
# 再起動
docker compose up -d
# すべてを破棄して最初からやり直す
docker compose down -v
docker compose up -d

/workspace内のコードとホームディレクトリは再起動後も保持されます。詳細は設定 — データの永続化を参照してください。


ローカルビルドとDockerfileのカスタマイズについては、ローカル開発を参照してください。VS Code統合については、VS Codeを参照してください。リモートディスプレイオプションについては、リモートディスプレイ(noVNC)を参照してください。