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 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!