docker - 如何通过 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 浏览以检查 headless Chromium。但是，在对我的应用程序进行 dockerize 后，我无法通过 Chrome 访问远程调试器 URL。

launchOption由 Puppeteer 启动 Chrome :

{
  "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。但是 Chrome 显示错误 ERR_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 将允许您访问它。

文件

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 和 USERNAME 设置，以便我可以从撰写文件配置它们。当然，我确信有更好的方法可以做到这一点，但我这样做是为了可以轻松地水平扩展我的容器。

包装脚本.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

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

My_Docker_Repo:

Dockerfile

docker-compose.yml

包装脚本.sh

说完这一切，我只需运行 docker-compose up我有一个容器在运行。现在，使用端口部分，您还必须做一些事情来扩展它。如果您要运行 docker-compose up --scale chrome=5您的端口会发生冲突，但如果您想尝试，请告诉我，我会看看我可以为扩展做些什么，但除此之外，如果是用于测试，这应该可以正常工作。 :) 快乐编码!
eaglejs