Deploying puppeteer on fly.io

Test Script

1
  npm i puppeteer

screenshot.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
  import puppeteer from 'puppeteer';

  (async () => {
      const browser = await puppeteer.launch({
          headless: true,
          // executablePath: "/usr/bin/google-chrome",
          args: ['--no-sandbox', '--disable-setuid-sandbox']
      })
      
    const page = await browser.newPage();

    // Set the viewport's width and height
    await page.setViewport({ width: 1920, height: 1080 });

    // Open ScrapingBee's home page
    await page.goto('https://willschenk.com');

    try {
      // Capture screenshot and save it in the current folder:
      await page.screenshot({ path: `./willschenk.jpg` });

    } catch (err) {
      console.log(`Error: ${err.message}`);
    } finally {
      await browser.close();
      console.log(`Screenshot has been captured successfully`);
    }
  })();

Simple server

We aren't going to plug this into anything, just want to have something that fly can serve up.

1
  npm i express

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
  import express from "express";

  const app = express();
  const port = 3000;

  app.get('/', (req, res) => {
    res.send('Welcome to my server!');
  });

  app.get('/status', (req, res) => {
      
  });

  app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
  });

Dockerfile

Now the fun. First we install node and npm, then we install google-chrome-stable from google's repositories. We will download chrome again when we do npm i but this will take care of all the dependancies which are extensive.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  FROM --platform=linux/amd64 debian:bookworm-slim

  RUN apt-get update

  # Install node
  RUN apt-get install -y nodejs npm

  # Install chrome and dependencies
  RUN apt-get install -y wget gpg
  RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | gpg --dearmor -o /usr/share/keyrings/googlechrome-linux-keyring.gpg \
      && sh -c 'echo "deb [arch=amd64 signed-by=/usr/share/keyrings/googlechrome-linux-keyring.gpg] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
      && apt-get update
  RUN apt-get install -y google-chrome-stable fonts-freefont-ttf libxss1 \
      --no-install-recommends

  # ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true

  WORKDIR /app

  COPY package* .
  RUN npm i
  COPY * ./
  EXPOSE 3000
  CMD node app.js

Deploy

1
  fly launch

Then

1
  fly ssh console

And inside of there, you should be able to run

1
2
  node screenshot.js 
  Screenshot has been captured successfully

Very meta

Not downloading `chrome` twice

Inside of Dockerfile before npm i, add

1
  ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true

And then pass the path of chrome when you start up puppeteer:

1
2
3
4
5
  const browser = await puppeteer.launch({
      headless: true,
      executablePath: "/usr/bin/google-chrome",
      args: ['--no-sandbox', '--disable-setuid-sandbox']
  })

References

https://macarthur.me/posts/puppeteer-with-docker/