今日始め るCloudflare Browser Rendering

Transcript

1. 今日始めるCloudflare Browser Rendering CHANTO 株式会社 塚本武志(@itometeam) 1
2. Cloudflare Workers を使ったことある 人 2
3. Cloudflare R2 を使ったことある人 3
4. Cloudflare D1 を使ったことある人 4
5. Workers AI を使ったことある人 5
6. Browser Rendering を使ったことある 人 6
7. Browser Rendering って？ Cloudflare 上でヘッドレスブラウザが利用できる Workers Binding もしくはREST API を使ってアクセスが可能 ヘッドレスブラウザを操作するためのPuppeteer もしくはPlaywrite のフォークライブラリが公開されており、ローカル環境と変わらな い操作感で動かすことができる 7
8. 何ができる？ Web ページをPDF のドキュメントにできる！ 自社のWeb ページの簡単な外形監視に使えるかも！ スクレイピングができる！ 8
9. スクレイピングができる！ 9
10. 免責事項 このプレゼンテーションおよびセッションはスクレイピングを推奨す るものではありません。現在、ウェブスクレイピングを取り巻く法的 環境は急速に厳格化しています。2024 年から2025 年にかけて、世界 各国でデータ保護規制が強化され、無断でのデータ収集に対する罰則 が重くなっています。日本においても、不正競争防止法や著作権法違 反として訴訟に発展するケースが増加しており、企業の信用失墜だけ でなく、巨額の損害賠償請求に至る事例も報告されています。データ の無断収集は、たとえ技術的に可能であっても、ビジネス倫理の観点 から重大な問題を孕んでいます。他社のコンテンツやデータを無断で 利用することは、業界内での信頼関係を損ない、将来的な協業機会を 失う原因となります。特にAI 開発における学習データの収集におい 10
11. もしスクレイピングが必要な場合でもきちんと法務担 当などに確認をした上でWeb サイトで許可されている 範囲で行いましょう 11
12. 実際に使ってみる 12
13. wrangler.jsonc にBinding を追加 { "name": "browser-worker", "main": "src/index.js", "compatibility_date": "2023-03-14", "compatibility_flags": [ "nodejs_compat" ], "browser": { "binding": "MYBROWSER" } } 13
14. Binding を@cloudflare/puppetter に渡す import puppeteer from "@cloudflare/puppeteer"; export default { async fetch(request, env): Promise<Response> { const browser = await puppeteer.launch(env.MYBROWSER); /* puppeteerを使ったブラウザ操作ができる */ }, } satisfies ExportedHandler<Env>; 14
15. Browser Rendering でできること puppeteer のAPI はfull support されているため、puppeteer でできる ことはできると考えて良い const browser = await puppeteer.launch(env.MYBROWSER); const page = await browser.newPage() // ビューポートサイズ設定 await page.setViewport({ width: 1280, height: 800 }); // ページ遷移 await page.goto('https://example.com', { waitUntil: 'networkidle2' // ネットワークが落ち着くまで待機 }); 15
16. Browser Rendering でできること puppeteer のAPI はfull support されているため、puppeteer でできる ことはできると考えて良い const page = await browser.newPage() // キーボード操作 await page.keyboard.press('Enter'); await page.keyboard.type('Hello World'); // マウス操作 await page.mouse.move(100, 100); await page.mouse.click(100, 100); await page.hover('.menu-item'); 16
17. Browser Rendering でできること puppeteer のAPI はfull support されているため、puppeteer でできる ことはできると考えて良い const page = await browser.newPage() // スクリーンショット await page.screenshot({ path: 'fullpage.png', fullPage: true }); 17
18. Browser Rendering でできること puppeteer のAPI はfull support されているため、puppeteer でできる ことはできると考えて良い const page = await browser.newPage() // PDFの生成 await page.pdf({ path: 'page.pdf', format: 'A4', printBackground: true }); 18
19. puppeteer の拡張API 本家のpuppeteer API を拡張する形でBrowser Binding 特有の関数が いくつか追加されている 主にSession Management をするための関数が提供されている const limits = await puppeteer.limits(env.MYBROWSER); const history = await puppeteer.history(env.MYBROWSER); const sessions = await puppeteer.sessions(env.MYBROWSER); 19
20. なぜSession Management が必要？ 20
21. Browser Rendering の厳しい制限 Browser Rendering のブラウザは同時に3 つ( 有料版は10) までしか起 動しておけない Browser Rendering のブラウザは1 分間に3 つ( 有料版は10) までしか 新しく起動できない 21
22. Browser Rendering の厳しい制限 これらを回避するため、ブラウザを複数のWorker で使い回す必要 がある 22
23. Session Management browser.close() の代わりに browser.disconnect() を利用する browser.close() // これ以降セッションを使いまわせなくなる browser.disconnect() // セッションが残るので使いまわせる 23
24. Session Management puppeteer.launch() の代わりに puppeteer.connect() で既存のセッシ ョンに接続 const sessions = await puppeteer.sessions(env.MYBROWSER) const freeSessions = sessions.filter((s) => !s.connectionId) let session: Browser if (freeSessions.length === 0) { session = await puppeteer.launch(env.MYBROWSER) } else { session = await puppeteer.connect(env.MYBROWSER, freeSessions[0].sessionId) } 24
25. Session Management ただし、Session Management を真面目にやったとしても同時に一 つのセッションに複数のWorker からアクセスすることはできない そのため結局同時にBrowser Rendering のブラウザにアクセスでき るWorker は3 つ( 有料プランなら10) しかない コネクションを占有しないようにできるだけ早く browser.disconnect() を呼ぶのが大事 25
26. 現実世界でのユースケース 26
27. 例: SaaS でのPDF 出力機能 法令対応や紙での業務があるクライアント向けにPDF を出力したい ケースは多い Cloudflare Workers 上でPDF を生成するのは意外と大変 既存のPDF ライブラリはNode.js 環境を前提としたものも多く、 Worker で素直に使える選択肢は少ない また複雑な組版のPDF ドキュメントは入れる文字数によってレイア ウト崩れが起きやすい → Browser Rendering を使ってHTML をそのままPDF にしよう！ 27
28. https://github.com/chantoinc/generate-pdf-with-cloudflare-browser- rendering 28
29. https://generate-pdf-with-cloudflare-browser-rendering.developers- 993.workers.dev/ 29
30. それ以外の使えそうなケース Cron Triggers と組み合わせて自社サイトのパフォーマンス測定を定 期的に行うことで、キャッチしづらいパフォーマンス低下を監視す る Playwrite MCP と組み合わせてリモートのMCP サーバーとして使う など... 30
31. 料金 無料プランの場合 ブラウザの起動時間が1 日に10 分まで 並列起動できるブラウザが3 つまで それ以上は利用不可 31
32. 料金 有料プランの場合 起動時間が1 ヶ月に10 時間まで無料 それ以上は$0.09/1 時間 並列起動数が10 個まで無料 それ以上は$2.00/1 並列 ただし並列起動数は月の平均で計算 1 日だけ300 並列させても他の日に全く使わなければ無料枠に収 まる 32
33. まとめ 33
34. Thank you CHANTO 株式会社 塚本武志(@itometeam) 34