google-chrome - 我的容器化 Puppeteer 如何与我的主机 Chrome 通信？

Question

我让 Puppeteer 在一个容器内工作，该容器有自己的 headless Chrome/Chromium，它将连接到在不同容器上运行的我的 Web 应用程序。一切正常。

我希望容器内的 Puppeteer 使用我的主机 Google Chrome(或 Chromium，这并不重要)运行我的 Web 应用程序。我一直在寻找类似的东西，但没有找到有关此事的文档。

我该怎么做？

Answer 1

告诉 puppeteer 连接到本地计算机上的 chrome 实例，而不是 docker 容器中的 headless 版本

1. 通过在终端上运行 /Applications/Google\Chrome.app/Contents/MacOS/Google\Chrome --remote-debugging-port=9222 以 Debug模式运行 chrome/chromium 。这应该会给你一个 Websocket 调试 URL。这应该如下所示:ws://host.docker.internal:9222/devtools/browser/d7db2629-0930-4741-a6ca-78ff70863c20。

2. 在您的 docker 开发设置中，告诉 docker 公开端口 9222。这是我们指定的chrome的调试端口。在运行 puppeteer 的服务的 yml 部分中执行以下操作:

service-name:
  build: "..."
  volumes:
    - ....
    - ....
  ports:
    - 3010:3010
    - 9222:9222  <--- Add this

然后重新初始化/重启docker容器

docker-compose down
docker-compose up

现在代码更改:

const browser = await puppeteer.launch({ args });

至

const browser = await puppeteer.connect({
  browserWSEndpoint:
    "ws://host.docker.internal:9222/devtools/browser/d7db2629-0930-4741-a6ca-78ff70863c20"
});

现在，puppeteer 应该连接到本地计算机上的 chrome，并且您应该看到它实时执行所有操作! 😎

PS:

或者如果您不想一次又一次复制生成的网址。 你可以做

const response = await axios.get(
  "http://host.docker.internal:9222/json/version",
  {
    headers: { Host: "127.0.0.1:9222" }
  }
);
const browserWSEndpoint = response.data.webSocketDebuggerUrl.replace(
  /127.0.0.1/g,
  "host.docker.internal"
);
const browser = await puppeteer.connect({ browserWSEndpoint });

这可以从 chrome 获取调试 websocket url