Using Headless Chrome with Puppeteer

The App Engine standard environment comes with all of the system packages needed to run Headless Chrome.

Puppeteer is a Node.js module which provides a high-level API to control Headless Chrome. You can install Puppeteer using npm:

npm install puppeteer

Starting a browser

Headless Chrome can only be used in the App Engine standard environment by disabling the sandbox. To start a browser, use the following:

const browser = await puppeteer.launch({
  args: ['--no-sandbox'],
});

The memory available on a default App Engine instance is not enough to run Headless Chrome. We recommend choosing an instance class that has more memory using the instance_class element in your app.yaml file, for example:

runtime: nodejs10
instance_class: F4_1G

Taking screenshots

Learn how to take screenshots of web pages using Headless Chrome in the Google App Engine standard environment.

Prerequisites

  1. Create a project in the Google Cloud Platform Console.
  2. Enable billing for your project.
  3. Install the Cloud SDK.
  4. Install Node.js on your local machine.

Writing the app

  1. Initialize a package.json file by running the following command in your terminal:

    npm init
    
  2. Add a start script to your package.json file:

    "scripts": {
      "start": "node app.js"
    }
    
  3. Install Express.js and Puppeteer:

    npm install express puppeteer
    
  4. Create an app.js file with the following contents:

    const express = require('express');
    const puppeteer = require('puppeteer');
    const app = express();
    
    async function main() {
      const browser = await puppeteer.launch({
        args: ['--no-sandbox'],
      });
    
      app.use(async (req, res) => {
        const {url} = req.query;
    
        if (!url) {
          return res.send(
            'Please provide URL as GET parameter, for example: <a href="/?url=https://example.com">?url=https://example.com</a>'
          );
        }
    
        const page = await browser.newPage();
        await page.goto(url);
        const imageBuffer = await page.screenshot();
    
        res.set('Content-Type', 'image/png');
        res.send(imageBuffer);
      });
    
      const server = app.listen(process.env.PORT || 8080, err => {
        if (err) {
          return console.error(err);
        }
        const {port} = server.address();
        console.info(`App listening on port ${port}`);
      });

Running the app locally

  1. Run the app locally with the following command:

    npm start
    
  2. Visit http://localhost:8080/?url=https://example.com to see a screenshot of the example.com web page.

Deploying the app

  1. Create an app.yaml file with the following contents:

    runtime: nodejs8
    instance_class: F4_1G
  2. Run the following command to deploy your app to App Engine:

    gcloud app deploy
    
  3. Visit http://YOUR_PROJECT_ID.appspot.com/?url=https://example.com to see the application running on App Engine.

¿Te ha resultado útil esta página? Enviar comentarios:

Enviar comentarios sobre...

App Engine standard environment for Node.js docs