How to access remote debugging page for dockerized Chromium launch by Puppeteer?

Question

When the chromium succeed to launch, its Debugging WebSocket URL should be like ws://127.0.0.1:9222/devtools/browser/ec261e61-0e52-4016-a5d7-d541e82ecb0a.

127.0.0.1:9222 should be able to browse by Chrome to inspect the headless Chromium. However, I cannot access the remote debugger URL by Chrome after I dockerize my application.

launchOption for launching chromium by Puppeteer:

{
  "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

Run the new container by :

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

Port 9222 should be accessible in my host machine. But Chrome shows the error ERR_EMPTY_RESPONSE when I browse 127.0.0.1:9222 and DOCKER-INTERNAL-IP:9222 will timeout.

Answer 1

I know there is already an accepted answer, but let me add onto this in hopes to greatly reduce your image size. One shouldn't add too many extras into the Dockerfile if one can help it. But ultimately, adding --remote-debugging-port=9222 and --remote-debugging-address=0.0.0.0 will allow you to access it.

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"]

I use a wrapper script so that I can include environment variables here. You can see URL and USERNAME set so that I can configure them from the compose file. Of course, i'm sure there is a better way to do this, but I do this so that I can scale my containers horizontally with ease.

wrapper-script.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

Lastly, I have the docker-compose file. This is where I define all my settings so that I can configure my wrapper-script.sh with what I need and scale horizontally. Notice the environment section of the docker-compose file. USERNAME and URL are environment variables, and they can be called from the wrapper script.

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

If you are wondering what my folder structure looks like. all three files are at the root of the folder. For example:

My_Docker_Repo:

• Dockerfile
• docker-compose.yml
• wrapper-script.sh

After that is all said and done, I simply run docker-compose up and I have one container running. Right now, using the ports section, you'll have to do something to scale that as well. if you were to run docker-compose up --scale chrome=5 your ports will clash, but let me know if you want to try that and i'll see what I can do for scaling, but other than that, if it is for testing, this should work well the way it is. :) Happy coding!

eaglejs

Answer 2

I managed to make this work with puppeteer using the following Dockerfile, docker run and puppeteer config:

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 run:

docker run -p 9223:9222  -it myimage

Puppeteer launch:

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

The entrypoint just launches the platform like: node build/main.js

After that I just had to connect to localhost:9223 on Chrome to see the browser. Hope it helps!