Workers Browser Rendering API とは

Automate an isolated browser instance with just a few lines of code

This is why we’re excited to announce a private beta of the Workers Browser Rendering API, improving the browser automation experience for developers. With browser automation, you can programmatically do anything that a user can do when interacting with a browser.

2022年12月7日時点で Private beta ですが、その様子をお届けできればと思います。

また、「WorkersブラウザレンダリングAPI | Cloudflare」から waitlist に登録可能なので、ぜひ。

環境準備

ディレクトリを準備して、wrangler init します。TypeScript を使います。

Choose “y” to use TypeScript

mkdir browser-worker && cd $_
npm i @cloudflare/puppeteer
wrangler init

以下のパッケージをインストールすることが必要です。

@cloudflare/puppeteer - npm

npm i @cloudflare/puppeteer

スクリーンショット保存用の R2 バケット browser-worker を作成します。

wrangler r2 bucket create browser-worker

wrangler.toml に node_compat = true と R2 バケットのバインディング設定を追加します。

cat << EOS >> wrangler.toml
node_compat = true

[[r2_buckets]]
 bucket_name = "browser-worker"
 binding = "BROWSER_BUCKET"
EOS

Workers コード

kyouheicf/browser-worker

上記 GitHub のコードを使います。

中身は https://www.yahoo.co.jp/ ページのスクリーンショットを R2 バケットに保存する内容です。

src/index.ts

import puppeteer from '@cloudflare/puppeteer'

export default {
	async fetch(request: Request, env: Env): Promise<Response> {
		const browser = await puppeteer.launch();
		const page = await browser.newPage();

		await page.setViewport({
			width: 1920,
			height: 1080,
			deviceScaleFactor: 1,
		});

		await page.goto("https://www.yahoo.co.jp/", {
			//一定時間ネットワーク通信のないことで完了を判定する
			waitUntil: "networkidle2", //コネクション数が2個以下である状態が500ミリ秒続いたとき
			timeout: 0 //0を指定するとタイムアウト無し
		});

		const screenshot = await page.screenshot() as Buffer;
		await browser.close();

		const jstNow = new Date(Date.now() + ((new Date().getTimezoneOffset() + (9 * 60)) * 60 * 1000));
		const yyyymmddhhmm = jstNow.toISOString().replace(/[^0-9]/g, '').slice(0, -5); //yyyymmddhhmm
		console.log(yyyymmddhhmm)

		try {
			//upload to R2
			await env.BROWSER_BUCKET.put(`screenshot-${yyyymmddhhmm}.png`, screenshot);
			return new Response(`Success!`);
			/*
			return new Response(screenshot.buffer, {
				headers: {
					'content-type': 'image/png'
				}
			})
			*/
		} catch (e) {
			return new Response('', { status: 400 })
		}
	}
}

デプロイ

以下のコマンドでデプロイします。

wrangler publish src/index.ts

動作確認

Workers

デプロイした Workers の URL にリクエストを送ると動作が確認できます。

% curl https://browser-worker.example.workers.dev                              
Success!
# 2022年12月7日時点ではレスポンスが返ってくるまでに 1 分弱の時間がかかっていました
# % curl https://browser-worker.example.workers.dev -s -o /dev/null -w  "%{time_total}\n"        
# 57.886562

Workers のリアルタイムログについて、以下のようになります。

{
  "outcome": "ok",
  "scriptName": "browser-worker",
  "exceptions": [],
  "logs": [
    {
      "message": [
        "closing websocket"
      ],
      "level": "log",
      "timestamp": 1670386355629
    },
    {
      "message": [
        "202212071312"
      ],
      "level": "log",
      "timestamp": 1670386355629
    },
    {
      "message": [
        "websocket closed"
      ],
      "level": "log",
      "timestamp": 1670386355680
    }
  ],
  "eventTimestamp": 1670386292182,
  "event": {
    "request": {
      "url": "https://browser-worker.example.workers.dev/",
      "method": "GET",
      "headers": {
        "accept": "*/*",
        "accept-encoding": "gzip",
        "cf-connecting-ip": "2a09:bac1:3b60:10::16:18a",
        "cf-ipcountry": "JP",
        "cf-ray": "775a6af618fef625",
        "cf-visitor": "{\"scheme\":\"https\"}",
        "connection": "Keep-Alive",
        "host": "browser-worker.example.workers.dev",
        "user-agent": "curl/7.82.0-DEV",
        "x-forwarded-proto": "https",
        "x-real-ip": "2a09:bac1:3b60:10::16:18a"
      },
      "cf": {
        "longitude": "139.68990",
        "latitude": "35.68930",
        "tlsCipher": "ECDHE-RSA-AES128-GCM-SHA256",
        "continent": "AS",
        "asn": 13335,
        "country": "JP",
        "tlsClientAuth": {
          "certIssuerDNLegacy": "",
          "certIssuerSKI": "",
          "certSubjectDNRFC2253": "",
          "certSubjectDNLegacy": "",
          "certFingerprintSHA256": "",
          "certNotBefore": "",
          "certSKI": "",
          "certSerial": "",
          "certIssuerDN": "",
          "certVerified": "NONE",
          "certNotAfter": "",
          "certSubjectDN": "",
          "certPresented": "0",
          "certRevoked": "0",
          "certIssuerSerial": "",
          "certIssuerDNRFC2253": "",
          "certFingerprintSHA1": ""
        },
        "tlsExportedAuthenticator": {
          "clientFinished": "e82eec20338be4132fbd52fc177d1b4e50fa3d852a78af97a1447c12295d4ca0",
          "clientHandshake": "30df6cfc6441c53105e05505c92280fba9ea3896a280c30047fd55215437b4f6",
          "serverHandshake": "fa7de861d2db076438bd812505abbf1338d699a7cff2f409131b6a1143b671cd",
          "serverFinished": "1304cc66099f0e019e41701437eae1657b5079821bc4e01c409b4b0d530f26ee"
        },
        "tlsVersion": "TLSv1.2",
        "colo": "NRT",
        "timezone": "Asia/Tokyo",
        "city": "Tokyo",
        "edgeRequestKeepAliveStatus": 1,
        "requestPriority": "weight=16;exclusive=0;group=0;group-weight=0",
        "httpProtocol": "HTTP/2",
        "region": "Tokyo",
        "regionCode": "13",
        "asOrganization": "Cloudflare",
        "postalCode": "xxx-xxxx"
      }
    },
    "response": {
      "status": 200
    }
  },
  "id": 0
}

R2

R2 にスクリーンショットが保存されたことが確認できます。

このような画像が保存されたことが確認できました。

感想

以下のようにシンプルな Browser Rendering API を使う場合でも、〜300ms と長めの CPU Time が消費されたことがわかります。

こちらのプランごとの制限に照らし合わせてみても、今回のユースケースでは「Unbound Usage Model」が必要になることがわかります。

（実際に Unbound な Workers を使って実装しました。）

Worker limits · Cloudflare Workers docs

上記のようなポイントを認識しつつも、実際の使用感としては非常に使いやすいと思いました。

これから諸々の自動化が捗りそうです。

また、バインディングについても、これから出てくるようです。

bindings = [
 { name = "my_browser” type = "browser" }
]