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: nodejs10
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();
    
    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}`);
      });

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

  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 スタンダード環境に関するドキュメント