利用docker部署puppeteer

[z2014]

记录一下这次用docker遇到的一些问题

先提供一个我用的包含puppeteer的docker镜像

puppeteer可以使用Network.emulateNetworkConditions和Emulation.setCPUThrottlingRate轻松地模拟不同的网络请求。但是，这一个CPU节流器只是相对延缓你的CPU，在不同的机器我们会得到不同的结果，所以我们必须要统一一个环境来运行我们的程序。

于是docker出现在了我的视野中。记录一下docker的常用命令

docker info
docker run -v /host/path:/container/path -v /path:/path -dit z2014/detector_docker:0.1 /bin/bash
docker ps
docker stop id
docker rm id
docker build -f Dockerfile -t detector_docker:0.2  .

在这里，我主要是利用puppeteer执行一段脚本，然后再从docker容器中，向宿主机post结果回去。

docker run --net=host

--net=host参数可以让容器共享主机的netowrk，但是仅仅限于linux

在windows和imac上这样是无效的，在docker18.03以上的版本，内置了这样的一个特殊的域名来解决这个问题
host.docker.internal

利用trace.json获取到页面不同时间段的屏幕截图

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.tracing.start({ screenshots: true, path: 'trace.json' });
  await page.goto('https://www.google.com', { timeout: 60000 });
  await page.tracing.stop();

  // --- extracting data from trace.json ---
  const tracing = JSON.parse(fs.readFileSync('./trace.json', 'utf8'));
  const traceScreenshots = tracing.traceEvents.filter(x => (
      x.cat === 'disabled-by-default-devtools.screenshot' &&
      x.name === 'Screenshot' &&
      typeof x.args !== 'undefined' &&
      typeof x.args.snapshot !== 'undefined'
  ));
  traceScreenshots.forEach(function(snap, index) {
    fs.writeFile('trace-screenshot-'+index+'.png', snap.args.snapshot, 'base64', function(err) {
      if (err) {
        console.log('writeFile error', err);
      }
    });
  });
  // --- end extracting data from trace.json ---

  await page.close();
})();

数组中的对象有一个ts属性，ts/1000 - navigationStart算出当前加载时间

下面是关于本次踩坑查到的一些资料

关于puppeteer

网站性能测试利器:Puppeteer
trace.json如何使用
trace.json另一个issue

关于docker

stackoverflow名称切换

案例

官方更新历史

官方名称更换历史

配置

问题1

libX11.so.6: cannot open shared object file: No such file or directory

在centos上安装puppeteer时，会有一些基本库安装不上，尝试使用如下命令安装

yum -y install libX11 libXcomposite libXcursor libXdamage libXext libXi libXtst cups-libs libXScrnSaver libXrandr alsa-lib pango atk at-spi2-atk gtk3

• 依赖链接
• 官方提供的依赖链接1
• 官方提供的依赖链接2

问题2

下载的chromium引用路径事例

const puppeteer = require('puppeteer');

const start = async () => {

    const browser = await puppeteer.launch({
        executablePath: "/Users/a2014/Desktop/puppeteer-demo/chrome-mac/Chromium.app/Contents/MacOS/Chromium",
    });

    const page = await browser.newPage();

    await page.goto('https://www.baidu.com');

    await  page.screenshot({
        path:'baidu.png'
    });
    await page.close();
    await browser.close();
}

start();

[Zeng83]

Looks like you are using mac "/Users/a2014/Desktop/puppeteer-demo/chrome-mac/Chromium.app/Contents/MacOS/Chromium". Wondering if you can provide the code that can work on Centos. Thanks

[yejimeiming]

https://hub.docker.com/r/circleci/node
我补充一个基础镜像，circleci/node 是专业做 github CI 环境的公司；可能它们提供的 -browser 版本的镜像能直接跑 puppeteer -- 仅供看到这个 issue 小伙伴参考

---

2025/02/20 更新

circleci/node 镜像也不能直接跑 puppeteer