OpenClaw Officeでエージェントを可視化する【Docker Compose構築ガイド】

はじめに

前回の記事でOpenClaw + Ollama + Discordの構成を作りました。動いてはいるんですが、エージェントが今何をしているのか、トークンをどれくらい使っているのかがDiscordの画面だけだと見えない。ターミナルでdocker compose logs -fを流し続けるのも辛い。

そこでOpenClaw Office。エージェントの活動をブラウザ上でリアルタイムに可視化できるフロントエンドツールです。ダッシュボードでエージェントの状態、セッション、トークン使用量などが一目でわかる。しかも2Dオフィスビューという、エージェントがバーチャルオフィス内で動き回る表示もあって、見てるだけで面白い。

ただ、Docker Compose環境でこれをゲートウェイに接続するのが一筋縄ではいきませんでした。WebSocketの接続で何時間もハマって、最終的にnetwork_modeの設定で解決しました。

環境

• マシン: GMKtec NucBox EVO X1（Ubuntu 24.04）

• OpenClaw: Docker Compose環境（前回記事の構成）

• OpenClaw Office: node:24-slim上で動作

問題の概要

OpenClaw Officeをnode:24-slimコンテナで起動し、--gateway ws://openclaw-gateway:18789でゲートウェイに接続しようとしたところ、「Cannot connect to Gateway」エラーが発生しました。

HTTPのヘルスチェックは通るのに、WebSocketだけ繋がらない。嫌な予感がしたけど、案の定セキュリティの壁でした。

ハマりポイント①：Dockerサービス名での接続が拒否される

最初に試したのは、Docker内部のサービス名で接続する方法です。

command: >
  sh -c "npm install -g @ww-ai-lab/openclaw-office &&
         openclaw-office --token '${OPENCLAW_GATEWAY_TOKEN}' --gateway ws://openclaw-gateway:18789"

curl http://openclaw-gateway:18789/healthzは成功するのに、WebSocket接続だけ失敗。ゲートウェイのログを確認すると：

[ws] closed before connect ... code=1008 reason=control ui requires device identity (use HTTPS or localhost secure context)

ゲートウェイは「device identity」を要求していて、HTTPSまたはlocalhostからの接続でないとControl UI系のWebSocket接続を拒否する仕組みでした。Dockerのサービス名（openclaw-gateway）は当然localhostじゃないので弾かれます。

ハマりポイント②：ホストIPでも同じ

じゃあホストのIPアドレスならどうだ、と試してみました。

command: >
  sh -c "openclaw-office --token '${OPENCLAW_GATEWAY_TOKEN}' --gateway ws://[サーバのIPアドレス]:18789"

結果は同じ。[サーバのIPアドレス]もlocalhostではないので拒否されます。

解決策：network_mode: "service:openclaw-gateway"

発想を変えて、Officeコンテナをゲートウェイコンテナのネットワーク名前空間に参加させます。こうするとOfficeコンテナから見たlocalhost:18789がゲートウェイに直接届きます。

  openclaw-office:
    image: node:24-slim
    container_name: ai_openclaw-office
    restart: unless-stopped
    volumes:
      - ${OPENCLAW_CONFIG_DIR}:/home/node/.openclaw:ro
    environment:
      - OPENCLAW_GATEWAY_TOKEN=${OPENCLAW_GATEWAY_TOKEN:-}
    network_mode: "service:openclaw-gateway"
    command: >
      sh -c "npm install -g @ww-ai-lab/openclaw-office &&
             openclaw-office --token '${OPENCLAW_GATEWAY_TOKEN}' --gateway ws://localhost:18789"
    depends_on:
      - openclaw-gateway

ws://localhost:18789に変えただけです。network_modeでゲートウェイのネットワーク名前空間を共有しているので、Officeコンテナの中ではlocalhostがゲートウェイを指します。

設定時の注意点

portsとnetworksは削除する — network_modeを設定すると、portsとnetworksは併用できません。Docker Composeがエラーを出します。代わりにポート公開はゲートウェイ側で行います。

  openclaw-gateway:
    ports:
      - "18789:18789"
      - "5180:5180"    # ← Office用に追加

アクセス方法

OpenClaw Officeもゲートウェイと同じくlocalhost経由でのアクセスが前提です。別PCからはSSHポートフォワードを使います。

$ ssh -N -L 5180:127.0.0.1:5180 -L 18789:127.0.0.1:18789 user@[サーバのIPアドレス]

ブラウザで以下にアクセス：

• http://localhost:5180 → OpenClaw Office

• http://localhost:18789 → Control UI

OpenClaw Officeでできること

Officeプロセスのフリーズ対策

長時間稼働しているとOfficeのプロセスがフリーズして画面が更新されなくなることがあります。ブラウザをリロードしても直らない場合は、コンテナを再起動してください。

$ docker compose restart openclaw-office

リアルタイム監視の使い分け

OpenClaw Officeはビジュアルで便利ですが、ツール呼び出しの失敗ログなど細かいイベントはゲートウェイログの方が確実です。

# 最も詳細なリアルタイム監視
$ docker compose logs -f openclaw-gateway

普段はOfficeで全体像を見つつ、問題が起きたらターミナルのログで詳細を追う、という使い分けがおすすめです。

まとめ

OpenClaw OfficeをDocker Composeで動かす際のキモはnetwork_mode: "service:openclaw-gateway"です。ゲートウェイのセキュリティ設計上、localhost以外からのWebSocket接続が拒否されるため、コンテナのネットワーク名前空間を共有する必要があります。

「HTTPは通るのにWebSocketだけ通らない」という状況が一番デバッグしにくくて、ヘルスチェックが成功するのに接続できないのは本当に混乱しました。同じ状況で困っている人がいたら、network_modeを真っ先に試してみてください。