← Browser Run / browser-run / how-to

Nasaďte Browser Run Worker

Podle tohoto návodu vytvoříte Worker, který pomocí API Browser Run pořizuje snímky obrazovky webových stránek. Jde o běžný případ použití automatizace prohlížeče.

Zaregistrujte si účet Cloudflare ↗.
Nainstalujte Node.js ↗.

Správce verzí Node.js

Použijte správce verzí Node, jako je Volta ↗ nebo nvm ↗ abyste se vyhnuli problémům s oprávněními a mohli měnit verze Node.js. Wrangler, o kterém se dozvíte dále v této příručce, vyžaduje verzi Node 16.17.0 nebo novější.

1. Vytvořte projekt Worker

Cloudflare Workers poskytuje bezserverové prostředí pro spouštění kódu, ve kterém můžete vytvářet nové aplikace nebo rozšiřovat stávající, aniž byste museli konfigurovat nebo spravovat infrastrukturu. Vaše aplikace Worker slouží jako kontejner pro interakci s headless prohlížečem a provádění akcí, jako je pořizování snímků obrazovky.

Vytvořte nový projekt Worker s názvem browser-worker spuštěním:

npm create cloudflare@latest -- browser-worker

Při nastavení vyberte následující možnosti:

Pro S čím byste chtěli začít?, vyberte Hello World example.
Pro Jakou šablonu chcete použít?, vyberte Worker only.
Pro Jaký jazyk chcete použít?, vyberte JavaScript / TypeScript.
Pro Chcete používat git pro správu verzí?, vyberte Yes.
Pro Chcete nasadit svou aplikaci?, vyberte No (před nasazením provedeme ještě několik změn).

2. Instalace Puppeteer

Ve vašem browser-worker adresáři nainstalujte balíček Cloudflare fork Puppeteeru:

npm i -D @cloudflare/puppeteer

3. Vytvoření jmenného prostoru KV

Browser Run lze používat spolu s dalšími vývojářskými produkty. Může být potřeba relační databáze, R2 bucket k archivaci procházených stránek a souborů, Durable Object k udržení instance prohlížeče aktivní a jejímu sdílení mezi více požadavky, nebo Queues ke zpracování vašich úloh asynchronně.

Pro účely tohoto příkladu použijeme Úložiště KV k ukládání snímků obrazovky do mezipaměti.

Vytvořte dva namespaces, jeden pro produkci a jeden pro vývoj.

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

Poznamenejte si ID pro další krok.

4. Konfigurace souboru Wrangler

Nakonfigurujte browser-worker projektu Konfigurační soubor Wrangler přidáním příznaku prohlížeče binding a Příznak kompatibility s Node.js. Bindings umožňují vašim Workerům interagovat se zdroji na vývojářské platformě Cloudflare. Váš prohlížeč binding nastavujete vy, tento návod používá název MYBROWSER. Browser bindings umožňují komunikaci mezi Workerem a headless prohlížečem, díky čemuž můžete provádět akce, jako je pořízení snímku obrazovky, generování PDF a další.

Aktualizujte Konfigurační soubor Wrangler s vazbou Browser Run API a jmennými prostory KV, které jste vytvořili:

{
	"$schema": "./node_modules/wrangler/config-schema.json",
	"name": "browser-worker",
	"main": "src/index.js",
	// Set this to today's date
	"compatibility_date": "2026-08-28",
	"compatibility_flags": ["nodejs_compat"],
	"browser": {
		"binding": "MYBROWSER"
	},
	"kv_namespaces": [
		{
			"binding": "BROWSER_KV_DEMO",
			"id": "22cf855786094a88a6906f8edac425cd",
			"preview_id": "e1f8b68b68d24381b57071445f96e623"
		}
	]
}

"$schema" = "./node_modules/wrangler/config-schema.json"
name = "browser-worker"
main = "src/index.js"
# Set this to today's date
compatibility_date = "2026-08-28"
compatibility_flags = [ "nodejs_compat" ]

[browser]
binding = "MYBROWSER"

[[kv_namespaces]]
binding = "BROWSER_KV_DEMO"
id = "22cf855786094a88a6906f8edac425cd"
preview_id = "e1f8b68b68d24381b57071445f96e623"

5. Kód

Aktualizujte src/index.js s kódem vašeho Workeru:

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(); // normalize
			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("Please add an ?url=https://example.com/ parameter");
		}
	},
};

Aktualizujte src/index.ts s kódem vašeho Workeru:

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(); // normalize
			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("Please add an ?url=https://example.com/ parameter");
		}
	},
} satisfies ExportedHandler<Env>;

Tento Worker vytvoří instanci prohlížeče pomocí Puppeteer, otevře novou stránku, přejde na adresu uvedenou v parametru 'url', pořídí snímek obrazovky stránky, uloží tento snímek do KV, prohlížeč zavře a jako odpověď vrátí obrázek JPEG se snímkem obrazovky.

Pokud váš Worker běží v produkčním prostředí, uloží snímek obrazovky do produkčního KV namespace. Pokud spouštíte wrangler dev, uloží snímek obrazovky do vývojářského KV namespace.

Pokud stejný url je vyžádáno znovu, použije se místo toho verze uložená v mezipaměti KV, pokud jí nevypršela platnost.

6. Test

Spustit npx wrangler dev k lokálnímu testování vašeho Workeru.

Chcete-li vyzkoušet vytvoření prvního snímku obrazovky, přejděte na následující URL:

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

7. Nasaďte

Spustit npx wrangler deploy k nasazení Workeru do globální sítě Cloudflare.

Chcete-li vytvořit první snímek obrazovky, přejděte na následující URL:

<YOUR_WORKER>.<YOUR_SUBDOMAIN>.workers.dev/?url=https://example.com

Další Příklady pro Puppeteer ↗