时间戳

首页 > 解决方案 > 我的容器化 Puppeteer 如何与我的主机 Chrome 通信？

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

问题描述

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

我希望容器内的 Puppeteer 使用我的主机 Google Chrome（或 Chromium，没关系）运行我的网络应用程序。我一直在寻找类似的东西，但没有找到关于这件事的文档。

我怎样才能做到这一点？

标签： google-chromedockerpuppeteer

解决方案

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

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

  2. 在您的 docker dev 设置中，告诉 docker 公开 port 9222。这是我们指定的chrome的调试端口。在运行 puppeteer 的服务的 yml 部分中：

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

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

docker-compose down
docker-compose up
  1. 现在在代码更改中：
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：

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


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

推荐阅读