Playwright MCP Docker

🚀 Playwright MCP Docker 環境

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

🚀 クイックスタート

このセクションでは、Playwright MCP Docker環境をセットアップしてサーバーを実行する手順を説明します。

✨ 主な機能

• 簡単なセットアップ: Docker Composeを使用して、Playwright MCPサーバーを素早くセットアップできます。
• モード切り替え: 有頭モードと無頭モードを簡単に切り替えることができ、様々なシナリオに対応できます。
• クライアントとの統合: ClineやCursorなどのクライアントと簡単に統合できます。

📦 インストール

前提条件

• 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サービスの構築と実行方法を定義します。
• Dockerfile: Dockerイメージの構築方法を指定します。
• entrypoint.sh: コンテナ起動時に実行されるスクリプトです。

モードの切り替え

• 無頭モード: HEADLESS=trueを使用してGUIを無効にし、自動化タスクに適したモードです。
• 有頭モード: HEADLESS=falseを使用してGUIを有効にし、可視化インターフェイスが必要なシナリオに適したモードです。

⚠️ 注意事項

• WSLg環境で実行する場合は、WindowsでLinux GUIアプリケーションを表示するために、DISPLAYやその他の関連環境変数を正しく設定してください。
• 権限の問題が発生した場合は、DockerとWSLgの設定を確認し、ユーザーが適切な権限を持っていることを確認してください。

🔧 サービスの停止

docker-compose down

以上の手順に従えば、Playwright MCPサーバーを簡単にセットアップして実行できます。これらの説明が役立つことを願っています！