如何通过 Puppeteer 访问用于 dockerized Chromium 启动的远程调试页面？

Question

当 Chromium 成功启动时，它的 Debugging WebSocket URL 应该类似于ws://127.0.0.1:9222/devtools/browser/ec261e61-0e52-4016-a5d7-d541e82ecb0a.

127.0.0.1:9222应该能够通过 Chrome 浏览以检查无头 Chromium。但是，在对我的应用程序进行 dockerize 后，我无法通过 Chrome 访问远程调试器 URL。

由 Puppeteer 启动铬的launchOption：

{
  "args": [
    "--remote-debugging-port=9222",
    "--window-size=1920,1080",
    "--mute-audio",
    "--disable-notifications",
    "--force-device-scale-factor=0.8",
    "--no-sandbox",
    "--disable-setuid-sandbox"
  ],
  "defaultViewport": {
    "height": 1080,
    "width": 1920
  },
  "headless": true
}

Dockerfile：

FROM node:10.16.3-slim

RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
    && apt-get update \
    && apt-get install -y google-chrome-unstable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf \
      --no-install-recommends \
    && rm -rf /var/lib/apt/lists/* \
    && wget --quiet https://raw.githubusercontent.com/vishnubob/wait-for-it/master/wait-for-it.sh -O /usr/sbin/wait-for-it.sh \
    && chmod +x /usr/sbin/wait-for-it.sh

WORKDIR /usr/app
COPY ./ ./
VOLUME ["......." ]

RUN groupadd -r pptruser && useradd -r -g pptruser -G audio,video pptruser \
    && mkdir -p /home/pptruser/Downloads \
    && chown -R pptruser:pptruser /home/pptruser \
    && chown -R pptruser:pptruser /usr/app \
    && npm install

USER pptruser

CMD npm run start

EXPOSE 3000 9222

通过以下方式运行新容器：

docker run \ 
    -p 3000:3000 \ 
    -p 9222:9222 \ 
    pptr

我的主机应该可以访问端口 9222。但是 ChromeERR_EMPTY_RESPONSE在我浏览时会显示错误127.0.0.1:9222并且DOCKER-INTERNAL-IP:9222会超时。

Answer 1

我知道已经有一个公认的答案，但让我添加这个答案，希望能大大减小您的图像大小。如果可以的话，不应该在 Dockerfile 中添加太多额外内容。但最终，添加 --remote-debugging-port=9222 和 --remote-debugging-address=0.0.0.0 将允许您访问它。

Dockerfile

FROM ubuntu:latest

LABEL Full Name <email@email.com> https://yourwebsite.com

WORKDIR /home/

COPY wrapper-script.sh wrapper-script.sh

# install chromium-browser and cleanup.
RUN apt update && apt install chromium-browser --no-install-recommends -y && apt autoremove && apt clean && apt autoclean && rm -rf /var/lib/apt/lists/*

# Run your commands and add environment variables from your compose file.
CMD ["sh", "wrapper-script.sh"]

我使用包装脚本，以便可以在此处包含环境变量。您可以看到 URL 和用户名设置，以便我可以从撰写文件中配置它们。当然，我确信有更好的方法来做到这一点，但我这样做是为了可以轻松地水平缩放容器。

包装脚本.sh

#!/bin/bash

# Start the process
chromium-browser --headless --disable-gpu --no-sandbox --remote-debugging-port=9222 --remote-debugging-address=0.0.0.0 ${URL}${USERNAME}
status=$?
if [ $status -ne 0 ]; then
  echo "Failed to start chromium-browser: $status"
  exit $status
fi

# Naive check runs checks once a minute to see if either of the processes exited.
# This illustrates part of the heavy lifting you need to do if you want to run
# more than one service in a container. The container exits with an error
# if it detects that either of the processes has exited.
# Otherwise it loops forever, waking up every 60 seconds

while sleep 60; do
  ps aux |grep chromium-browser | grep -q -v grep
  PROCESS_1_STATUS=$?
  # If the greps above find anything, they exit with 0 status
  # If they are not both 0, then something is wrong
  if [ $PROCESS_1_STATUS -ne 0 ]; then
    echo "One of the processes has already exited."
    exit 1
  fi
done

最后，我有 docker-compose 文件。这是我定义所有设置的地方，以便我可以根据需要配置我的wrapper-script.sh 并水平缩放。请注意 docker-compose 文件的环境部分。USERNAME 和 URL 是环境变量，可以从包装器脚本中调用它们。

docker-compose.yml

version: '3.7'

services:

  chrome:
    command: [ 'sh', 'wrapper-script.sh' ]
    image: headless-chrome
    build:
      context: .
      dockerfile: Dockerfile
    environment:
      - USERNAME=eaglejs
      - URL=https://teamtreehouse.com/
    ports:
      - 9222:9222

如果您想知道我的文件夹结构是什么样的。所有三个文件都位于文件夹的根目录中。例如：

我的 Docker 仓库：

• Dockerfile
• docker-compose.yml
• 包装脚本.sh

一切都说完了之后，我只需运行docker-compose up即可运行一个容器。现在，使用端口部分，您还必须做一些事情来扩展它。如果你要运行docker-compose up --scale chrome=5你的端口会发生冲突，但是让我知道你是否想尝试一下，我会看看我可以做些什么来扩展，但除此之外，如果是为了测试，这应该可以很好地工作是。:) 编码愉快！

eaglejs

Answer 2

我设法使用以下 Dockerfile、docker run 和 puppeteer 配置来使用 puppeteer 来完成这项工作：

FROM ubuntu:18.04

RUN apt update \
 && apt install -y \
    curl \
    wget \
    gnupg \
    gcc \
    g++ \
    make \
 && curl -sL https://deb.nodesource.com/setup_10.x | bash - \
 && apt install -y nodejs \
 && rm -rf /var/lib/apt/lists/*

 RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
     && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
     && apt-get update \
     && apt-get install -y google-chrome-unstable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf \
       --no-install-recommends \
     && rm -rf /var/lib/apt/lists/*


RUN groupadd -r pptruser && useradd -r -g pptruser -G audio,video pptruser \
        && mkdir -p /home/pptruser/Downloads \
        && chown -R pptruser:pptruser /home/pptruser

ADD . /app
WORKDIR /app
RUN chown -R pptruser:pptruser /app
RUN rm -rf node_modules
RUN rm -rf build/*
USER pptruser
RUN npm install --dev
RUN chmod +x /app/entrypoint.sh
ENTRYPOINT /app/entrypoint.sh

Docker 运行：

docker run -p 9223:9222  -it myimage

傀儡师发射：

this.browser = await puppeteer.launch(
    {
        headless: true,
        args: [
            '--remote-debugging-port=9222',
            '--remote-debugging-address=0.0.0.0',
            '--no-sandbox'
        ]
    }
);

入口点只是启动平台，如下所示：node build/main.js

之后我只需连接到localhost:9223Chrome 即可查看浏览器。希望能帮助到你！