50

Introducing Headless Chrome Support in Google Cloud Functions

 6 years ago
source link: https://www.tuicool.com/articles/hit/jqIJZzb
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Earlier this year, Google Cloud announced support for theNode.js 8 runtime in the App Engine standard environment. Since then, we've been excited to see how web developers have been using the platform.

One of the more interesting use cases that was unlocked with the new Node.js runtime for App Engine is the ability to runheadless Chrome without having to do any setup or configuration. Previously, developers would need to run xvfb and X11, create a complicated Dockerfile, or configure OS dependencies themselves to get Chrome working on GCP—but not anymore.

Now, we're pleased to announce that the Google Cloud Functions and Cloud Functions for Firebase Node.js 8 runtimes have also been upgraded with the OS packages required to run headless Chrome. This means that you can now author Cloud Functions that use headless Chrome---and utilize all the features of a web browser in a fully serverless environment. Headless Chrome lets you take advantage of the modern web platform features from Chromium and the Blink rendering engine too.

We have seen developers using headless Chrome for a variety of use cases:

  • taking screenshots of web pages

  • server-side rendering

  • generating PDFs

  • implementing web crawlers

  • end-to-end performance and UI testing

Using Puppeteer in a Cloud Function

One way to use headless Chrome with Cloud Functions is withPuppeteer. Puppeteer is a Node.js library built by the Chrome DevTools team that provides a high-level API to control headless Chrome (or Chromium) over the DevTools Protocol . It also installs a recent version of Chromium alongside the library by default.

Using Puppeteer to control headless Chrome is ideal for environments like Cloud Functions, because you spend less time configuring Chrome (and its required dependencies) and more time writing your own code.

One useful example of using Puppeteer in a Cloud Function is to create a service that takes screenshots of web pages. The code snippet below creates an HTTP handler that takes a screenshot of a web page and returns the image as the response.

Main index.js file: 

<!----><code _ngcontent-c19="">const puppeteer = require('puppeteer');
</code><code _ngcontent-c19="">let page;
</code><code _ngcontent-c19="">
</code><code _ngcontent-c19="">async function getBrowserPage() {
</code><code _ngcontent-c19="">  // Launch headless Chrome. Turn off sandbox so Chrome can run under root.
</code><code _ngcontent-c19="">  const browser = await puppeteer.launch({args: ['--no-sandbox']});
</code><code _ngcontent-c19="">  return browser.newPage();
</code><code _ngcontent-c19="">}
</code><code _ngcontent-c19="">
</code><code _ngcontent-c19="">exports.screenshot = async (req, res) => {
</code><code _ngcontent-c19="">  const url = req.query.url;
</code><code _ngcontent-c19="">
</code><code _ngcontent-c19="">  if (!url) {
</code><code _ngcontent-c19="">    return res.send('Please provide URL as GET parameter, for example: <a 
</code><code _ngcontent-c19="">href="?url=https://example.com">?url=https://example.com</a>');
</code><code _ngcontent-c19="">  }
</code><code _ngcontent-c19="">
</code><code _ngcontent-c19="">  if (!page) {
</code><code _ngcontent-c19="">    page = await getBrowserPage();
</code><code _ngcontent-c19="">  }
</code><code _ngcontent-c19="">
</code><code _ngcontent-c19="">  await page.goto(url);
</code><code _ngcontent-c19="">  const imageBuffer = await page.screenshot();
</code><code _ngcontent-c19="">  res.set('Content-Type', 'image/png');
</code><code _ngcontent-c19="">  res.send(imageBuffer);
</code><code _ngcontent-c19="">};</code>

List puppeteer as a dependency in your package.json : 

<!----><code _ngcontent-c19="">{ 
</code><code _ngcontent-c19="">  "name": "screenshot",
</code><code _ngcontent-c19="">  "version": "0.0.1",
</code><code _ngcontent-c19="">  "dependencies": { 
</code><code _ngcontent-c19="">    "puppeteer": "^1.6.2" 
</code><code _ngcontent-c19="">  }
</code><code _ngcontent-c19="">}</code>

Deploy it to a function that has enough memory:

gcloud beta functions deploy screenshot --trigger-http --runtime nodejs8 --memory 1024MB

That's it! Now you have headless Chrome and Puppeteer available to use in Cloud Functions. Have fun trying out headless Chrome.

For more information, check out these resources:

Posted in:


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK