Playwright MCPをクラウド環境で疑似再現してみた
2026.03.02
目次
はじめに
MS開発部の松坂です。今回は、PlaywrightのModel Context Protocol（MCP）を実際に触ってみて、その仕組みをAzure Container Apps上で疑似的に再現してみました。
手元でMCPを確認した後、Pythonでサンプルモデルを作成し、Azure上にデプロイ。最後にAzure AI Foundryと接続して動作確認まで行った手順をまとめます。
Playwright MCPとは？
Playwright MCP は、LLM がブラウザを操作できるようにするための MCP サーバーです。AI の指示を受けて Playwright を介してページを開く・クリックする・入力するなどの操作が可能になります。
通常はローカルで Node.js を使って MCP サーバーを立て、それをエージェント側（Copilot/Claude/Cursor 等）に接続して使います。
MCPに関する詳細についても別ブログで紹介しています。気になる方はそちらをご覧ください。
データは揃っているのに動けない——そのボトルネック、MCPで可視化できます – 株式会社ディープコム
Playwright MCPをAzure AI Foundryで使うには制限がある
ローカルでは MCP 経由で AI がブラウザ操作できるのに、クラウド上だとすぐには動きません。理由は以下の通りです。
- ブラウザ操作が制限される
クラウド環境では直接ブラウザを起動するのが難しい - ローカル依存の構成
MCP が Node.js 環境やファイルに依存している - セキュリティ・ネットワーク制約
外部アクセスやポートの開放が制限される場合がある
そこで、作ってみた
- クラウドに MCP サーバーを立ててみる
- Azure Container Apps に Docker化した自作 Playwright MCP をデプロイ
- Foundry から外部エンドポイントとして接続
- Foundry MCP Server の代替案も確認
- Playwright MCP と同等のブラウザ操作はできないが、AI エージェントの呼び出しは可能
まずは手元でMCPを試す
まず、公式のPlaywright MCPツールを手元で動かしてみました。① Playwrightのインストール
まずはPlaywrightをインストールします。|
1 |
npx playwright install |
② Visual Studio Code + GitHub Copilot でMCPを有効化
今回は、Visual Studio Code 上で GitHub Copilot を利用してMCPを試しました。CopilotのMCP設定に、以下のサーバー定義を追加します。
|
1 2 3 4 5 6 7 8 9 10 |
{ "servers": { "playwright": { "command": "npx", "args": [ "@playwright/mcp@latest" ] } } } |
③ MCPを実行
有効化後は、そのまま実行するだけでMCP サーバーが起動します。特に面白かったのは、
MCPを有効にした状態で詳細情報を確認すると、利用可能な関数一覧が見られること です。
ここで
- どのような操作が可能なのか
- どのような引数を取るのか
- どんな形式でレスポンスが返るのか
Azure Container Apps環境の準備
Azure上でMCPを疑似再現するために、次のリソースを作成しました。リソースグループ
|
1 |
az group create --name mcp-demo-rg --location japaneast |
|
1 2 3 4 |
az containerapp env create \ --name mcp-demo-env \ --resource-group mcp-demo-rg \ --location japaneast |
PythonでPlaywright MCPを疑似再現
以降のコードは以下のサイトを参考に作成しました。記載されているコードから変更した箇所を説明します。
https://techcommunity.microsoft.com/blog/appsonazureblog/host-remote-mcp-servers-in-azure-container-apps/4403550
1. Dockerコンテナの修正
Dockerfileにてuvによるパッケージインストール時にPlaywrightのインストールするよう追記します。|
1 2 3 4 5 |
# Install the application dependencies. WORKDIR /app RUN uv sync --frozen --no-cache RUN pip install --no-cache-dir playwright==1.58.0 # ここを追加 RUN python -m playwright install --with-deps # ここを追加 |
|
1 2 3 4 5 6 |
dependencies = [ "fastapi[standard]>=0.115.12", "httpx>=0.28.1", "mcp[cli]>=1.6.0", "playwright>=1.53.0" # ここを追加 ] |
2. Pythonファイルの作成・修正
次にPythonファイルを新たに作成し、Playwrightのツールを作成していきます。作成したファイルの一部を記載します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
from mcp.server.fastmcp import FastMCP import json mcp = FastMCP("Playwright") @mcp.tool(name="browser_navigate",description="Navigate to a URL",meta={"url":"URL to navigate to"}) async def navigate(sessionId: str, url: str) -> str: if not url: return "URL is required." try: # このcontextはPlaywrightのブラウザコンテキストです page = context.pages[0] if context.pages else await context.new_page() console_messages = [] page.on("console", lambda msg: console_messages.append(msg)) await page.goto(url, wait_until="networkidle") current_url = page.url title = await page.title() error_count = len([m for m in console_messages if m.type == "error"]) warning_count = len([m for m in console_messages if m.type == "warning"]) snapshot = await page.locator("body").aria_snapshot() result = f""" ### Ran Playwright code ```js await page.goto('{url}'); ```` ### Page * Page URL: {current_url} * Page Title: {title} * Console: {error_count} errors, {warning_count} warnings ### Snapshot ```yaml {snapshot} ``` ### Events * New console entries: {len(console_messages)} """ return result if __name__ == "__main__": mcp.run(transport='stdio') |
次に main.pyを修正します。
|
1 2 3 4 5 6 |
from fastapi import FastAPI, Request, Depends from mcp.server.sse import SseServerTransport from starlette.routing import Mount from PlayWright import mcp #ここに作成したファイルを参照するようにします from api_key_auth import ensure_valid_api_key import uvicorn |
3. デプロイ
こちらのプロジェクトをAzure Container Apps にデプロイします。|
1 |
az containerapp up -g mcp-demo-rg -n mcp-demo-env --environment <ENVIRONMENT_NAME> -l japaneast --env-vars API_KEYS=<AN_API_KEY> --source . |
Azure AI Foundryとの接続と動作確認
Azure AI Foundryで新たにエージェントを作成し、ツールの追加を行います。
ツール追加時は以下のように設定をします
これで、Azure AI Foundry上での設定が完了です。
設定したエージェントで Playwright を実行するチャットを行うことで、自作の Playwright MCP が起動することを確認できました。
まとめ
- Playwright MCPの概念を手元で確認
- Azure Container Apps上でPythonを使って疑似再現
- Azure AI Foundryから接続して動作確認
今後は、より複雑なモデルや実データとの連携も試してみたいです。
参考
以上、最後までご愛読いただき
ありがとうございました。
お問い合わせは、
以下のフォームへご連絡ください。
関連記事
松坂
この著者の保持資格
松坂