無料のクラウドでPuppeteerを実行する方法：ソリューションの比較

Puppeteerは、ウェブページとの人間によるインタラクションをシミュレートできる強力なツールであり、ウェブページのスクリーンショット、PDF生成、自動テスト、稼働時間監視、ウェブスクレイピング、コンテンツ追跡など、さまざまなユースケースを可能にします。

クラウドにPuppeteerをデプロイすることが理にかなうシナリオは数多くあります。 例：

• CI/CDパイプラインでAPI経由で自動テストをトリガーする。
• cronジョブを使用して、ウェブサイトの可用性を定期的にチェックする。
• 大規模な分散型ウェブスクレイパーを実行する。

従量課金制でスケーラブルなサーバーレスコンピューティングの性質は、ブラウザの自動化タスクに最適です。ただし、DigitalOceanなどのほとんどのプラットフォームは仮想マシンしか提供していないため、アイドル時間に対して料金を支払う必要があり（これはお金の無駄になります！）、現在、サーバーレス方式でPuppeteerの実行をサポートしているプラットフォームは、Leapcell、AWS Lambda、Cloudflare Browser Renderingなど、ごくわずかです。

この記事では、これらのプラットフォームについて、一般的なPuppeteerタスクを実行する方法、およびその長所と短所について説明します。

タスク

一般的なPuppeteerのユースケースの例として、ウェブページのスクリーンショットをキャプチャすることを考えてみましょう。

このタスクには、次の手順が含まれます。

1. 指定されたURLにアクセスする。
2. ページのスクリーンショットを撮る。
3. 画像を返す。

Leapcell

コード例：

const puppeteer = require('puppeteer');
const { Hono } = require('hono');
const { serve } = require('@hono/node-server');

const screenshot = async (url) => {
  const browser = await puppeteer.launch({ args: ['--single-process', '--no-sandbox'] });
  const page = await browser.newPage();
  await page.goto(url);
  const img = await page.screenshot();
  await browser.close();

  return img;
};

const app = new Hono();

app.get('/', async (c) => {
  const url = c.req.query('url');

  if (url) {
    const img = await screenshot(url);
    return c.body(img, { headers: { 'Content-Type': 'image/png' } });
  } else {
    return c.text('Please add an ?url=https://example.com/ parameter');
  }
});

const port = 8080;
serve({ fetch: app.fetch, port }).on('listening', () => {
  console.log(`Server is running on port ${port}`);
});

Leapcellは、あらゆるアプリケーションをサーバーレスでデプロイできる汎用性の高いプラットフォームです。ただし、HTTPリクエスト専用に設計されているわけではないため、セットアップは若干複雑になる可能性があります。HTTPリクエストハンドラーを手動で作成する必要があります。

ローカル開発

デバッグは簡単です。他のNode.jsアプリケーションと同様に、node index.jsを実行するだけです！

デプロイメント

デプロイするには、ビルドコマンド、実行コマンド、およびサービスポートを指定します（下のスクリーンショットのように）。

Puppeteerは依存関係を自動的にインストールしないため、ビルドコマンドを次のように変更する必要があります。

apt update && apt-get install -yq gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgbm1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libnss3 lsb-release xdg-utils wget
npm install

デプロイが完了すると、アプリケーションをオンラインで使用できるようになります。

概要

✅ 長所：

• ローカル環境とクラウド環境の一貫性があり、デバッグが容易になります。
• 公式のPuppeteerライブラリをサポートします。

❌ 短所：

• セットアップが少し複雑です。独自のHTTPハンドラーを作成する必要があります。

AWS Lambda

コード例：

const chromium = require('chrome-aws-lambda');

exports.handler = async (event) => {
  let browser = null;

  try {
    browser = await chromium.puppeteer.launch({
      args: chromium.args,
      defaultViewport: chromium.defaultViewport,
      executablePath: await chromium.executablePath,
      headless: chromium.headless,
    });

    const page = await browser.newPage();
    await page.goto(event.url);

    const screenshot = await page.screenshot();

    return {
      statusCode: 200,
      headers: { 'Content-Type': 'image/jpeg' },
      body: screenshot.toString('base64'),
      isBase64Encoded: true,
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: 'Failed to capture screenshot.',
    };
  } finally {
    if (browser !== null) {
      await browser.close();
    }
  }
};

AWS Lambdaでは、alixaxel/chrome-aws-lambdaなどのサードパーティのChromiumライブラリと組み合わせたpuppeteer-coreを使用する必要があります。これは、AWSがLambda関数のサイズに250MBの制限を課しているためです。PuppeteerにバンドルされているデフォルトのChromiumは、この制限を簡単に超えるため（macOSで約170MB、Linuxで約282MB、Windowsで約280MB）、スリム化されたChromiumを使用する必要があります。

ローカル開発

ローカルデバッグでは、実行環境の違いにより、複雑な構成が必要です。alixaxel/chrome-aws-lambdaのガイドを参照してください。

デプロイメント

デプロイするには、node_modulesをZIPファイルとしてアップロードする必要があります。ユースケースによっては、Lambdaレイヤーを構成する必要がある場合もあります。メインのビジネスロジックは、AWSコンソールで直接記述し、保存して実行できます。

概要

✅ 長所：

• よりシンプルなコード構造。

❌ 短所：

• サードパーティのChromiumライブラリに依存するため、潜在的なリスクが生じる可能性があります。
• 複雑なローカルデバッグ。
• ZIPのアップロードやLambdaレイヤーが必要になる可能性がある、面倒なデプロイプロセス。

Cloudflare Browser Rendering

コード例：

import puppeteer from '@cloudflare/puppeteer';

export default {
  async fetch(request, env) {
    const { searchParams } = new URL(request.url);
    let url = searchParams.get('url');
    if (url) {
      url = new URL(url).toString(); // normalize

      const browser = await puppeteer.launch(env.MYBROWSER);
      const page = await browser.newPage();
      await page.goto(url);
      const img = await page.screenshot();
      await browser.close();

      return new Response(img, {
        headers: {
          'content-type': 'image/png',
        },
      });
    } else {
      return new Response('Please add an ?url=https://example.com/ parameter');
    }
  },
};

Cloudflare Browser Renderingは、比較的新しいサーバーレスPuppeteerソリューションです。AWS Lambdaと同様に、公式のPuppeteerライブラリはサポートされていません。代わりに、Cloudflareが提供するPuppeteerバージョンを使用します。

Cloudflareのライブラリはサードパーティのオプションよりも安全ですが、更新サイクルが遅いのが難点です。 5か月以上更新されていません!

さらに、Cloudflare Browser Renderingにはいくつかの制限があります。

• Worker Proユーザーのみが利用できます。
• 各Cloudflareアカウントで作成できるブラウザは、1分あたり最大2つまでで、同時に実行できるブラウザは2つまでです。

ローカル開発

ローカルデバッグには複雑な構成が必要です。

デプロイメント

デプロイするには、関数をオンラインで記述し、保存して実行します。

概要

✅ 長所：

• よりシンプルなコード構造。

❌ 短所：

• 更新サイクルが遅いClouflareのPuppeteerライブラリに依存します。
• 複雑なローカルデバッグ。
• ペイウォールやその他の制限により、アクセスが制限されます。

結論

この記事では、3つの主要なサーバーレスPuppeteerデプロイプラットフォームであるLeapcell、AWS Lambda、およびCloudflare Browser Renderingを比較しました。各プラットフォームには長所と短所があります。

どれがお好みですか？他に知っているサーバーレスPuppeteerデプロイソリューションはありますか？コメントでご意見をお聞かせください！

---

上記で比較したように、Puppeteerプロジェクトをオンラインでデプロイすることを計画している場合は、Leapcellが良い選択肢となります。

デプロイガイドについては、ドキュメントをご覧ください。