Playwright MCPをクラウド環境で疑似再現してみた

はじめに

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 がブラウザ操作できるのに、クラウド上だとすぐには動きません。
理由は以下の通りです。

1. ブラウザ操作が制限される
   クラウド環境では直接ブラウザを起動するのが難しい
2. ローカル依存の構成
   MCP が Node.js 環境やファイルに依存している
3. セキュリティ・ネットワーク制約
   外部アクセスやポートの開放が制限される場合がある

このままでは「ローカルでは動くがクラウドでは動かない」という状況が続きます。

そこで、作ってみた

• クラウドに MCP サーバーを立ててみる
  • Azure Container Apps に Docker化した自作 Playwright MCP をデプロイ
  • Foundry から外部エンドポイントとして接続
• Foundry MCP Server の代替案も確認
  • Playwright MCP と同等のブラウザ操作はできないが、AI エージェントの呼び出しは可能

まずは手元でMCPを試す

まず、公式のPlaywright MCPツールを手元で動かしてみました。

① Playwrightのインストール

まずはPlaywrightをインストールします。

npx playwright install

これでブラウザ実行環境がローカルにセットアップされます。

② Visual Studio Code + GitHub Copilot でMCPを有効化

今回は、Visual Studio Code 上で GitHub Copilot を利用してMCPを試しました。
CopilotのMCP設定に、以下のサーバー定義を追加します。

{
  "servers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

設定を保存し、MCP サーバーを有効化します。

③ MCPを実行

有効化後は、そのまま実行するだけでMCP サーバーが起動します。

特に面白かったのは、
MCPを有効にした状態で詳細情報を確認すると、利用可能な関数一覧が見られること です。
ここで

• どのような操作が可能なのか
• どのような引数を取るのか
• どんな形式でレスポンスが返るのか

を事前に把握できました。

Azure Container Apps環境の準備

Azure上でMCPを疑似再現するために、次のリソースを作成しました。

リソースグループ

az group create --name mcp-demo-rg --location japaneast

コンテナアプリ環境

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のインストールするよう追記します。

# 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 # ここを追加

pyproject.tomlにおいても合わせてPlaywrightを追加します。

dependencies = [
    "fastapi[standard]>=0.115.12",
    "httpx>=0.28.1",
    "mcp[cli]>=1.6.0",
    "playwright>=1.53.0" # ここを追加
]

2. Pythonファイルの作成・修正

次にPythonファイルを新たに作成し、Playwrightのツールを作成していきます。
作成したファイルの一部を記載します。

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')

このように先ほどVisual Studio Codeから確認できたツールを一つ一つ再現しました。
次に main.pyを修正します。

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 にデプロイします。

az containerapp up -g mcp-demo-rg -n mcp-demo-env --environment  -l japaneast --env-vars API_KEYS= --source .

Azure AI Foundryとの接続と動作確認

Azure AI Foundryで新たにエージェントを作成し、ツールの追加を行います。
ツール追加時は以下のように設定をします

これで、Azure AI Foundry上での設定が完了です。

設定したエージェントで Playwright を実行するチャットを行うことで、自作の Playwright MCP が起動することを確認できました。

まとめ

• Playwright MCPの概念を手元で確認
• Azure Container Apps上でPythonを使って疑似再現
• Azure AI Foundryから接続して動作確認

今回の検証で、「MCPを模した軽量サーバを作るだけでAzure上でも統一的なモデル操作が可能」ということがわかりました。
今後は、より複雑なモデルや実データとの連携も試してみたいです。

参考

• Host remote MCP servers in Azure Container Apps
• GitHub - azure-container-apps-mcp-sample