• The code for this document: github.com/LiangJunron…
  • Docker series: github.com/LiangJunron…

First, the previous review & preface

After the above explanation, you must have a deep impression on Docker, so this article will be brief:

  • How to cram Puppeteer, a headless browser, into Docker

Puppeteer directory structure

Management, our service is still based on the original Node.js service, so Jsliang wrote their own base Node.js + TypeScript service.

Its directory structure is as follows:

docker-puppeteer

Launching the Demo takes only 2 steps:

  • The installation package:npm i
  • Start the service:npm run robot-test

At the 0th second of every minute, the terminal opens the Puppeteer and stores the image in SRC /source.

The key code is:

src/index.ts

/ /... The code is omitted
console.log('Hello, we're in program.');
let time = 0;
await schedule.scheduleJob('0 * * * * *'.async() = > {const browser = process.env.NODE_ENV === 'production' ?
    // The formal environment requires sandbox mode
    await puppeteer.launch({
      args: ['--no-sandbox'.'--disable-setuid-sandbox']}) :// Informal environments are casual
    await puppeteer.launch({
      headless: false.// Non-headless mode,
      devtools: true.// Debug mode, you can see console in the console
    });
  
  // Create a new TAB and open it
  const page = await browser.newPage();
  await page.goto('https://www.baidu.com/s?wd=jsliang');

  // Wait 5 seconds to load
  await page.waitForTimeout(5 * 1000);

  // Take a snapshot and store it locally
  await page.screenshot({
    path: `./src/source/baidu_${++time}.png`});// Close the window
  await browser.close();
});
/ /... The code is omitted
Copy the code

If you’re interested, you can stop and open the warehouse and watch the Demo, but if you’re not, you can keep reading.

Let’s look at the key of the key:

src/index.ts

const browser = process.env.NODE_ENV === 'production' ?
  // The formal environment requires sandbox mode
  await puppeteer.launch({
    args: ['--no-sandbox'.'--disable-setuid-sandbox']}) :// Informal environments are casual
  await puppeteer.launch({
    headless: false.// Non-headless mode,
    devtools: true.// Debug mode, you can see console in the console
  });
Copy the code

Because Puppeteer cannot be started properly if the Node.js service is built using Docker, we need to:

  1. Set the Dockerfile
  2. Set up thelaunchThe position of

Here is our package.json code:

package.json

"scripts": {
 "robot": "cross-env NODE_ENV=production ts-node ./src/index.ts robot"."robot-test": "cross-env NODE_ENV=test ts-node ./src/index.ts robot"
},
Copy the code

So, after setting launch, we just need to run NPM Run Robot in the formal environment to start sandbox mode.

3, write Dockerfile

Without further ado, let’s just write Dockerfile:

Dockerfile

# https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md#running-puppeteer-in-docker official document
# Minimum Docker image based on Alpine Linux, with full package index, size only 5 MB!
FROM alpine:edge

# specify the directory to run CMD, that is, CD to it first
WORKDIR /home/docker/we_render

Install the latest version of Chromium(89) package
RUNapk add --no-cache \ chromium \ nss \ freetype \ harfbuzz \ ca-certificates \ ttf-freefont \ nodejs \ yarn

# Skip the automatic installation of the Chrome package. Use the Chrome already installed above
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true \
    PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser

Puppeteer V6.0.0 comes with Chromium 89
RUNYarn add [email protected]

Copy the host files to the we_render directory in the container
COPY . /home/docker/we_render

# Set taobao source and package using YARN, and clear the cache
RUN yarn config set registry 'https://registry.npm.taobao.org' && \
    yarn global add pm2 && \
    yarn install && \
    yarn cache clean

Declare the service port provided by the container
EXPOSE 9527

The command to start the container's main process
CMD ["yarn"."run"."robot"]

Copy the code

Then you just need to follow the steps of creating images and containers.

4. Start the service

Note: it is strongly recommended to switch the mirror first, otherwise the download content will be very slow, before I operate in the company is ok, back to their own inferior learning Internet also whole for a long time (3000s).

Modify mirror method: 03 – Getting Started & Concept solving

  • Create an Image:Docker image build./ -t docker-node:1.0.0

  • Create a Container:Docker container create -p 3333:80 Docker-node :1.0.0
  • Start a Container:docker restart dd420fc4267ad3bdb9eadfdbf37d89e2592dbc9d030a501b96fe10b07ac565ff
  • Check the running status of a Container:docker ps -a
  • View the Container logs:docker logs -f dd420fc4267a
  • Enter a Container:docker exec -it dd420fc4267a bash
  • Go to the directory:cd src/source
  • View the contents of the directory:ls

As you can see, we already have several screenshots:

Using the methods of learning, copy the contents of the container, and see: docker cp f5000c4a530b: / home/docker we_render/SRC/source E: \ MyWeb \ all – for – one

I don’t know… What the hell is it? But it’s working!

The Puppeteer has been successfully inserted into the Docker. All that remains is to set the time zone and Hosts, which will not be explained here.

We will write the Git repository code locally, push it to GitHub, then go to CI/CD and update it to the server… Operation, can only wait for jsliang has time to further update!

I am Jsliang, a lifelong learning slash programmer who is full of desire to explore, like to toss and expand his knowledge. Let’s toss and explore together!

Do not toss the front end, and what is the difference between salted fish!

Thumbs up/Star if you think the article is good.

If you need to contact jsliang:

  • Github

Personal contact information stored in Github home page, welcome to toss ~

Strive to become a lifelong learning slash programmer who is eager to explore, play around, and expand his knowledge.

Jsliang’s document library is licensed by Junrong Liang under the Creative Commons Attribution – Non-commercial – Share alike 4.0 International License. Based on the github.com/LiangJunron… On the creation of works. Outside of this license agreement authorized access can be from creativecommons.org/licenses/by… Obtained.