Puppeteer でのヘッドレス Chrome の使用

App Engine スタンダード環境には、ヘッドレス Chrome を実行するために必要となるすべてのシステム パッケージが用意されています。

Puppeteer という Node.js モジュールが、ヘッドレス Chrome を制御するための高レベルの API を提供します。Puppeteer をインストールするには、次のように npm を使用します。

npm install puppeteer

ブラウザを起動する

ヘッドレス Chrome は、App Engine スタンダード環境内でのみ使用できます。また、これを使用するにはサンドボックスを無効にする必要もあります。ブラウザを起動するには、次のコードを使用します。

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

デフォルトの App Engine インスタンスで使用できるメモリでは、ヘッドレス Chrome を実行するには不十分です。app.yaml ファイルの instance_class 要素を使用して、より多くのメモリを持つインスタンス クラスを選択することをおすすめします。次に例を示します。

runtime: nodejs8
instance_class: F4_1G

スクリーンショットを取得する

Google App Engine スタンダード環境で、ヘッドレス Chrome を使用してウェブページのスクリーンショットを取得する方法を説明します。

事前準備

  1. Google Cloud Platform Console でプロジェクトを作成します。
  2. プロジェクトに対する課金を有効にします。
  3. Cloud SDK をインストールします。
  4. ローカルマシンに Node.js をインストールします。

アプリを作成する

  1. ターミナルで次のコマンドを実行して、package.json ファイルを初期化します。

    npm init
    
  2. package.json ファイルに起動スクリプトを追加します。

    "scripts": {
      "start": "node app.js"
    }
    
  3. Express.js と Puppeteer をインストールします。

    npm install express puppeteer
    
  4. app.js ファイルを作成し、次の内容を含めます。

    const express = require('express');
    const puppeteer = require('puppeteer');
    const app = express();
    
    app.use(async (req, res) => {
      const url = req.query.url;
    
      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 browser = await puppeteer.launch({
        args: ['--no-sandbox']
      });
      const page = await browser.newPage();
      await page.goto(url);
      const imageBuffer = await page.screenshot();
      browser.close();
    
      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().port;
      console.info(`App listening on port ${port}`);
    });

アプリをローカルで実行する

  1. 次のコマンドを使用して、アプリをローカルで実行します。

    npm start
    
  2. http://localhost:8080/?url=https://example.com にアクセスして example.com ウェブページのスクリーンショットを表示します。

アプリをデプロイする

  1. app.yaml ファイルを作成し、次の内容を含めます。

    runtime: nodejs8
    instance_class: F4_1G
  2. 次のコマンドを実行して、アプリを App Engine にデプロイします。

    gcloud app deploy
    
  3. http://YOUR_PROJECT_ID.appspot.com/?url=https://example.com にアクセスして、App Engine 上で実行中のアプリケーションを確認します。

このページは役立ちましたか?評価をお願いいたします。

フィードバックを送信...

Node.js 用 App Engine スタンダード環境に関するドキュメント