ブラウザレンダリングワーカーのデプロイ

このガイドに従うことで、Webページからスクリーンショットを取得するためにブラウザレンダリングAPIを使用するワーカーを作成します。これはブラウザ自動化の一般的なユースケースです。

Sign up for a Cloudflare account ↗.
Install npm ↗.
Install Node.js ↗.

Node.js version manager

Use a Node version manager like Volta ↗ or nvm ↗ to avoid permission issues and change Node.js versions. Wrangler, discussed later in this guide, requires a Node version of 16.17.0 or later.

1. ワーカープロジェクトの作成

Cloudflare Workersは、インフラストラクチャを設定または維持することなく、新しいアプリケーションを作成したり、既存のアプリケーションを拡張したりできるサーバーレス実行環境を提供します。あなたのワーカーアプリケーションは、ヘッドレスブラウザと対話してアクションを実行するためのコンテナです。例えば、スクリーンショットを取得することができます。

browser-workerという名前の新しいワーカープロジェクトを作成するには、次のコマンドを実行します。

npm create cloudflare@latest -- browser-worker

yarn create cloudflare@latest browser-worker

pnpm create cloudflare@latest browser-worker

For setup, select the following options:

For What would you like to start with?, choose Hello Worldの例.
For Which template would you like to use?, choose Hello Worldワーカー.
For Which language do you want to use?, choose JavaScript / TypeScript.
For Do you want to use git for version control?, choose Yes.
For Do you want to deploy your application?, choose No (we will be making some changes before deploying).

2. Puppeteerのインストール

browser-workerディレクトリ内で、Cloudflareのフォーク版Puppeteerをインストールします。

npm install @cloudflare/puppeteer --save-dev

3. KVネームスペースの作成

ブラウザレンダリングは他の開発者向け製品と一緒に使用できます。クローリングしたページやアセットをアーカイブするためのリレーショナルデータベースや、ブラウザインスタンスを生かして複数のリクエストと共有するためのDurable Object、または非同期でジョブを処理するためのキューが必要になるかもしれません。

このガイドの目的のために、スクリーンショットをキャッシュするためにKVストアを使用します。

本番用と開発用の2つのネームスペースを作成します。

npx wrangler kv:namespace create BROWSER_KV_DEMO
npx wrangler kv:namespace create BROWSER_KV_DEMO --preview

次のステップのためにIDをメモしておいてください。

4. `wrangler.toml`の設定

browser-workerプロジェクトのwrangler.tomlファイルを設定し、ブラウザのバインディングとNode.js互換フラグを追加します。バインディングは、あなたのワーカーがCloudflare開発者プラットフォーム上のリソースと対話することを可能にします。ブラウザのbinding名はあなたが設定します。このガイドではMYBROWSERという名前を使用します。ブラウザバインディングは、ワーカーとヘッドレスブラウザ間の通信を可能にし、スクリーンショットの取得やPDFの生成などのアクションを実行できます。

ブラウザレンダリングAPIバインディングと作成したKVネームスペースでwrangler.toml設定ファイルを更新します。

name = "browser-worker"
main = "src/index.js"
compatibility_date = "2023-03-14"
compatibility_flags = [ "nodejs_compat" ]

browser = { binding = "MYBROWSER" }
kv_namespaces = [
  { binding = "BROWSER_KV_DEMO", id = "22cf855786094a88a6906f8edac425cd", preview_id = "e1f8b68b68d24381b57071445f96e623" }
]

src/index.jsをあなたのワーカーコードで更新します。

import puppeteer from "@cloudflare/puppeteer";

export default {
  async fetch(request, env) {
    const { searchParams } = new URL(request.url);
    let url = searchParams.get("url");
    let img;
    if (url) {
      url = new URL(url).toString(); // 正規化
      img = await env.BROWSER_KV_DEMO.get(url, { type: "arrayBuffer" });
      if (img === null) {
        const browser = await puppeteer.launch(env.MYBROWSER);
        const page = await browser.newPage();
        await page.goto(url);
        img = await page.screenshot();
        await env.BROWSER_KV_DEMO.put(url, img, {
          expirationTtl: 60 * 60 * 24,
        });
        await browser.close();
      }
      return new Response(img, {
        headers: {
          "content-type": "image/jpeg",
        },
      });
    } else {
      return new Response("?url=https://example.com/パラメータを追加してください");
    }
  },
};

src/worker.tsをあなたのワーカーコードで更新します。

import puppeteer from "@cloudflare/puppeteer";

interface Env {
  MYBROWSER: Fetcher;
  BROWSER_KV_DEMO: KVNamespace;
}

export default {
  async fetch(request, env): Promise<Response> {
    const { searchParams } = new URL(request.url);
    let url = searchParams.get("url");
    let img: Buffer;
    if (url) {
      url = new URL(url).toString(); // 正規化
      img = await env.BROWSER_KV_DEMO.get(url, { type: "arrayBuffer" });
      if (img === null) {
        const browser = await puppeteer.launch(env.MYBROWSER);
        const page = await browser.newPage();
        await page.goto(url);
        img = (await page.screenshot()) as Buffer;
        await env.BROWSER_KV_DEMO.put(url, img, {
          expirationTtl: 60 * 60 * 24,
        });
        await browser.close();
      }
      return new Response(img, {
        headers: {
          "content-type": "image/jpeg",
        },
      });
    } else {
      return new Response("?url=https://example.com/パラメータを追加してください");
    }
  },
} satisfies ExportedHandler<Env>;

このワーカーは、Puppeteerを使用してブラウザをインスタンス化し、新しいページを開き、"url"パラメータに指定した場所に移動し、ページのスクリーンショットを取得し、KVにスクリーンショットを保存し、ブラウザを閉じ、スクリーンショットのJPEG画像で応答します。

ワーカーが本番環境で実行されている場合、スクリーンショットは本番KVネームスペースに保存されます。wrangler devを実行している場合、スクリーンショットは開発KVネームスペースに保存されます。

同じ"url"が再度要求されると、期限切れでない限り、KV内のキャッシュされたバージョンが使用されます。

6. テスト

npx wrangler dev --remoteを実行して、Cloudflareのグローバルネットワークにデプロイする前にワーカーをリモートでテストします。ブラウザレンダリングにはローカルモードのサポートがないため、--remoteが必要です。

最初のスクリーンショットを取得するために、次のURLにアクセスします。

<LOCAL_HOST_URL>/?url=https://example.com

7. デプロイ

npx wrangler deployを実行して、ワーカーをCloudflareのグローバルネットワークにデプロイします。