Claude Code , Devcontainer, PlayWright, Mac M1以降を使う時の注意

要約
Claude Code , Devcontainer, PlayWright, Mac M1以降で使うときに覚えておきたいことを書いておきます！
意見はこのエリアに表示されます

こんにちは、サイドFIREバイブコーダーのようへいです！

Mac M4環境でPlaywrightを実行するときに問題がありました。
解決したのでその時のメモを残します！

結論として、私は「解決策1: ホストのPlaywright MCP（ブラウザ）を使用する」を選択しています。

PlaywrightとDevcontainer（Mac M1/M2以降）使用時の注意点と解決策

Claude CodeをDevcontainer環境で使用し、Playwrightでブラウザ自動化を行う際、特にMac M1/M2以降のApple Siliconチップを搭載したマシンでは、いくつかの特有の課題に直面することがあります。主な問題は、Playwrightがブラウザを見つけられないというエラーです。これは、主にアーキテクチャの不一致や、Devcontainer内でのブラウザの扱いに起因します。

主な問題: 「ブラウザが見つかりません」エラー

Error: browserType.launchPersistentContext: Chromium distribution 'chrome' is not found のようなエラーが発生するのは、Playwrightがブラウザを実行しようとした際に、期待するパスにChromiumなどのブラウザバイナリが見つからないためです。

この問題に対して、主に2つの効果的な解決策があります。

解決策1: ホストのPlaywright MCP（ブラウザ）を使用する

このアプローチでは、Devcontainer内でブラウザをインストールする代わりに、ホストマシン上でPlaywright MCP (Managed Control Plane) サーバーを起動し、Devcontainer内のPlaywrightがそのサーバーに接続してブラウザ操作を行うようにします。

メリット

  • Devcontainerの軽量化: Devcontainer内に大きなブラウザバイナリをインストールする必要がなくなるため、コンテナイメージのサイズを小さく保てます。

  • GUIの確認: ブラウザはホスト上で起動するため、ヘッドレスモードでなくてもGUIが視覚的に確認できます（ヘッドフルモードで起動した場合）。

設定手順の概要

  1. ホストでPlaywright MCPサーバーを起動:
    ホストマシンのターミナルで以下のコマンドを実行し、サーバーを稼働させます。
  1. DevcontainerからMCPに接続するスクリプト:
    Devcontainer内のPlaywrightスクリプトで、ローカルブラウザを起動する代わりに、ホストのMCPサーバーに接続するようにコードを変更します。host.docker.internalは、Devcontainerからホストにアクセスするための特別なホスト名です。
  1. Claude CodeへのMCPサーバー登録:
    Claude CodeがホストのMCPサーバーと連携するために、Devcontainerのターミナルで登録コマンドを実行します。

解決策2: Dockerfileでプラットフォームを明示的に指定する

Mac M1/M2以降のチップはARMアーキテクチャであるのに対し、多くのDockerイメージや提供されるバイナリはamd64 (x86_64) アーキテクチャ向けに最適化されています。このアーキテクチャの不一致が、Devcontainer内でPlaywrightがブラウザを見つけられない原因となることがあります。

この問題を解決するには、DockerfileのFROMステートメントで、明示的にamd64プラットフォームのイメージを使用するように指定します。これにより、Devcontainer内でamd64版のブラウザをインストール・実行できるようになります（DockerのRosetta 2のようなエミュレーション機能が内部で動作します）。

メリット

  • 自己完結性: Devcontainer内でPlaywrightとブラウザが完結するため、外部のMCPサーバーを管理する必要がありません。

  • ヘッドレス実行: Devcontainer内でブラウザをヘッドレスモードで実行できます。

設定手順の概要

  1. Dockerfileを編集:
    Dockerfileの先頭にあるFROMステートメントに、--platform=linux/amd64を追加します。

  1. Devcontainerのリビルド:
    Dockerfileを変更したら、必ずDevcontainerをリビルドしてください。これにより、新しいDockerfileの指示に従ってコンテナが再構築され、amd64アーキテクチャのブラウザが正しくインストールされます。

  2. ヘッドレススクリプトの実行:
    リビルド後、PlaywrightスクリプトはDevcontainer内でブラウザを直接起動できるようになります。

Explore More
関連記事はありません。
Trends
  • 昨年11月頃から「バイブコーディング」を始め、今年3月から本格的にその可能性を検証しています。現在は Replit、Bolt、Cursor、Claude Code などのツールを活用し、特に Claude Code を使った収益化の方法を模索中です。個人開発、クラウドワーク、AI漫画制作など、さまざまな方法でマネタイズに挑戦しています。
  • 技術