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

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


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:latestLABEL Full Name <email@email.com> https://yourwebsite.comWORKDIR /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 processchromium-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 $statusfi# 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 secondswhile 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  fidone

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


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

FROM ubuntu:18.04RUN 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/pptruserADD . /appWORKDIR /appRUN chown -R pptruser:pptruser /appRUN rm -rf node_modulesRUN rm -rf build/*USER pptruserRUN npm install --devRUN chmod +x /app/entrypoint.shENTRYPOINT /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!