Javascript - Using chromedp/headless-shell Docker image for Puppeteer

I had a personal project that made use of an awesome Puppeteer plugin called puppeteer-extra-plugin-portal by claabs. I wanted to create a Docker container that was small and found chromedp/headless-shell.

Sources

main.js

import puppeteer from 'puppeteer';
puppeteer.launch(
{
  headless: true,
  args: [
    "--disable-gpu",
    "--disable-dev-shm-usage",
    "--disable-setuid-sandbox",
    "--no-sandbox",
  ],
}).then(async browser => {
    const page = await browser.newPage();
    // further logic...
  }
)

Not much difference from a regular Puppeteer setup

.dockerignore

.git
*.log
node_modules
Dockerfile

We don't want node_modules folder especially as it might contain locally downloaded Chromium for development

Dockerfile

FROM chromedp/headless-shell

ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true \
    PUPPETEER_EXECUTABLE_PATH=/headless-shell/headless-shell

COPY . /app
WORKDIR /app

RUN apt-get update && \
    apt-get install -y tini curl && \
    curl -fsSL https://deb.nodesource.com/setup_17.x | bash - && \
    apt-get install -y nodejs && \
    rm -rf /var/lib/apt/lists/* && \
    npm install

ENTRYPOINT ["tini", "--"]
CMD ["/usr/bin/node main.js"]

PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true is the most important to keep the image small

chromedp/headless-shell runs Debian and not Alpine for smaller image sadly, hence using apt, I might look into creating an automated build for Alpine images in the future