Playwright MCP Docker Environment

重要

このリポジトリはメンテナンスされなくなりました。

Docker イメージとセットアップ手順については、公式の Playwright MCP リポジトリを参照してください。特にコーディングエージェントのワークフローでは、代替手段として Playwright CLI も利用できます。

https://github.com/microsoft/playwright-mcp

Playwright MCP Docker 環境

日本語版はこちら (Japanese version here)

このプロジェクトでは、@playwright/mcp サーバーを実行するための Docker Compose 環境を提供します。Cline や Cursor などのクライアントで使用する Playwright MCP サーバーを簡単にセットアップし、管理できます。

前提条件

• Docker
• Docker Compose

セットアップ

1. リポジトリをクローンします：

   git clone <repository-url>
   cd playwright-mcp-docker
   

2. .env ファイルを作成します： サンプルの環境ファイルをコピーします：

   cp .env.sample .env
   

3. .env を設定します： .env ファイルを編集し、環境や好みに合わせて設定を調整します：
   • MCP_HOST_PORT：MCP サーバーへのアクセスに使用するホストマシン上のポート（デフォルト：8931）。
   • HEADLESS：ヘッドレスモード（ブラウザー GUI なし）では true、ヘッドありモード（GUI のセットアップが必要）では false に設定します。デフォルトは true です。
   • （ヘッドありモードのみ） DISPLAY、WAYLAND_DISPLAY、XDG_RUNTIME_DIR：Linux 環境（特に WSLg）で GUI アプリケーションに必要な環境変数です。デフォルト値が設定されています。
   • （ヘッドありモードのみ） X11_HOST_PATH、WSLG_HOST_PATH：X11 および WSLg のソケット／ディレクトリへのホストパスです。デフォルト値が設定されています。システム構成が異なる場合は調整してください。Windows の Docker から WSL パスにアクセスする場合は、\\wsl.localhost\DistroName\... 形式を使用してください（.env.sample を参照）。

サーバーの実行

1. コンテナをビルドして起動します：

   docker-compose up --build -d
   

   --build フラグが必要なのは初回、または Dockerfile を変更した場合のみです。-d フラグを指定すると、コンテナはデタッチモード（バックグラウンド）で実行されます。

2. MCP クライアント（例：VSCode/Cline）を設定します：

   • playwright_sse という名前の MCP サーバーを追加または有効にします（任意の名前を使用できます）。
   • 接続タイプを SSE に設定します。
   • URL を http://localhost:<MCP_HOST_PORT>/sse に設定します（<MCP_HOST_PORT> を .env ファイルの値に置き換えます。例：http://localhost:8931/sse）。
   • クライアント設定の例（ファイル名はクライアントによって異なります）：

   {
     "mcpServers": {
       "playwright_sse": { // サーバー名は任意です
         "url": "http://localhost:8931/sse" // .env のポート番号と一致させます
       }
     }
   }
   

設定の詳細

• .env ファイル： ポート、ヘッドレスモード、ヘッドありモード用のパスなど、環境固有の設定を管理します。
• docker-compose.yml： Docker サービスを定義し、.env から変数を読み込み、ポートマッピングとボリュームを設定します。
• Dockerfile： Docker イメージを定義し、@playwright/mcp とその依存関係（Chrome を含む）をインストールします。
• entrypoint.sh： コンテナの起動時に実行されるスクリプトです。HEADLESS 環境変数に基づき、正しい引数（--headless または --port）を npx @playwright/mcp コマンドに渡します。

モードの切り替え

• ヘッドレスモード： .env で HEADLESS=true に設定します。コンテナを再起動します：docker-compose up -d。
• ヘッドありモード： .env で HEADLESS=false に設定します。ホスト環境（例：WSLg または X Server）が正しく設定されていることを確認します。コンテナを再起動します：docker-compose up -d。

ヘッド付きモードに関する注意事項（WSLg）

• Windows で WSLg を使用している場合、docker-compose.yml のデフォルト設定と .env.sample に記載されている WSL2 固有のパスは、通常そのまま使用できます。お使いの WSL ディストリビューション名が Ubuntu でない場合は、.env のパスがその名前と一致していることを確認してください。
• WSLg を使用していない場合（標準的な Linux デスクトップ、または別の X Server を使用する macOS／Windows など）は、X Server の設定に応じて、.env ファイルの DISPLAY 変数と、必要に応じてボリュームマウント（X11_HOST_PATH）を調整する必要があります。

サーバーの停止

docker-compose down