コンテンツにスキップ
開発コンテナ

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

コンテナは仮想ディスプレイスタック（Xvfb + x11vnc + noVNC + fluxbox）を実行するため、AIエージェントがブラウザを操作する様子を監視し、必要に応じて介入できます — たとえば、ログインやMFAプロンプトへの対応などです。

接続方法

Section titled “接続方法”
  1. ブラウザで http://localhost:6080/vnc.html を開き、Connect をクリックします
  2. 軽量な fluxbox デスクトップが表示されます — これがコンテナの仮想ディスプレイです

@playwright/mcp をヘッド付きモードで使用するAIエージェントは、このディスプレイにChromiumをレンダリングします。noVNCウィンドウ内で直接クリックやタイプして、いつでも介入できます — 一時停止/再開の操作は不要です。

手動ブラウザ起動

Section titled “手動ブラウザ起動”

コンテナ内でブラウザを手動で開くには：

Terminal window
chromium --no-sandbox &

Playwrightテストをヘッド付きモードで実行するには：

Terminal window
npx playwright test --headed

環境変数

Section titled “環境変数”
変数デフォルト値説明
ENABLE_VNCtruefalse に設定するとVNCスタックを無効にします
VNC_RESOLUTION1280x1024x24仮想ディスプレイの解像度（幅x高さx色深度）
DISPLAY:99X11ディスプレイ番号
NOVNC_HOST_PORT6080noVNCのホスト側ポート（他のコンテナとの競合を避けるために変更できます）

これらは .env ファイルまたは .devcontainer/devcontainer.json の containerEnv セクションで設定します。

VNCスタックの無効化

Section titled “VNCスタックの無効化”

ヘッドレス専用で運用する場合は、.env で ENABLE_VNC=false を設定し、コンテナを再起動します：

Terminal window
docker compose down
docker compose up -d

トラブルシューティング

Section titled “トラブルシューティング”

黒い画面、接続拒否エラー、ポート競合の解決策については、トラブルシューティング — リモートディスプレイを参照してください。