Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Workers Browser Rendering API について
Search
AijiUejima
August 04, 2023
Technology
0
590
Workers Browser Rendering API について
Dive to Workers Browser Rendering API
Workersでスクショを撮ってみる📸
Cloudflare Meetup Nagoya #2 の発表資料です。
AijiUejima
August 04, 2023
Tweet
Share
More Decks by AijiUejima
See All by AijiUejima
エッジはフロントエンドなのか? バックエンドなのか? について考えてみる
aiji42
7
5.7k
Cloudflare Workersで構築する非同期ジョブシステム
aiji42
7
2.6k
VRTツールのダークホース Lost Pixelを紹介したい
aiji42
5
3k
オリジンサーバに手を付けないパーフォマンス改善
aiji42
5
1.7k
Cloudflare Fonts試してみた🔤
aiji42
2
830
Hyperdrive試してみた🛸
aiji42
3
1.5k
VercelとNext.jsの機能を最大限に活用したA/Bテスト手法
aiji42
6
1.7k
Cloudflare WorkersとKVで キャッシュを非同期に更新する | Cloudflare Meetup Nagoya
aiji42
1
980
ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう
aiji42
15
6.2k
Other Decks in Technology
See All in Technology
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.8k
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
260
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
180
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
280
タスクって今どうなってるの?3.14の新機能 asyncio ps と pstree でasyncioのデバッグを (PyCon JP 2025)
jrfk
1
230
Azure Well-Architected Framework入門
tomokusaba
0
210
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
0
170
From Prompt to Product @ How to Web 2025, Bucharest, Romania
janwerner
0
110
analysis パッケージの仕組みの上でMulti linter with configを実現する / Go Conference 2025
k1low
1
260
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
200
実装で解き明かす並行処理の歴史
zozotech
PRO
1
290
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
23
16k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Producing Creativity
orderedlist
PRO
347
40k
Writing Fast Ruby
sferik
629
62k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Building Adaptive Systems
keathley
43
2.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Transcript
© 2023 Ateam Inc. Dive to Workers Browser Rendering API
Workersでスクショを撮ってみる📸 Cloudflare Meetup Nagoya #2
© 2023 Ateam Inc. ⾃⼰紹介 Who am I ? Name:
Aiji Uejima X(Twitter): aiji42_dev Github: aiji42 株式会社エイチームライフデザイン技術開発室所属 リードエンジニア 最近興味があるのはエッジランタイム。 毎⽇プライベートでGithubに草⽣やしながら頑張ってます! 2
© 2023 Ateam Inc. 3 🚧 注意 本⽇発表する内容は 2023-08-03 時点の情報です。
現在の Workers Browser Rendering API のステータスはベータです。 よって、仕様が変更される可能性があります。
© 2023 Ateam Inc. Cloudflare Workers でブラウザインスタンスが使えるの知ってましたか? 4 https://blog.cloudflare.com/introducing-workers-browser-rendering-api/ 昨年11⽉にCloudflareのブログで発表されました。
© 2023 Ateam Inc. 「Autome an isolated browser instance with
just a few lines of code」に書かれている内容 5 • 内部では Puppeteer を動かしている • Browser API Worker が提供され、Worker から WS で接続してレンダリングを⾏い、 その結果を Worker で処理できる • スクリーンショットやスクレイピング、パフォーマンス‧E2Eテストなどを想定 (Puppeteerの利⽤⽤途とほぼ同じ)
© 2023 Ateam Inc. 現在オープンベータになっています 6 https://blog.cloudflare.com/browser-rendering-open-beta/ 今年の5⽉にオープンベータになりました🎉 Waiting Listに登録し、順番待ちを通過すれば誰でも使⽤可能になります。
© 2023 Ateam Inc. Waiting List 通過したので早速使ってみた 7 https://puppeteer.aiji422990.workers.dev/
© 2023 Ateam Inc. 8 こんな感じのコードでスクリーンショットの 画像データをレスポンスとして返却できる 詳しい解説は公式ドキュメントへ https://developers.cloudflare.com/browser-rendering/get-started/s creenshots/
© 2023 Ateam Inc. 制限 (オープンベータ期間中) 9 • 1分あたり2つのブラウザインスタンスしか利⽤できない ◦
連続して処理するとToo Many Requestsでエラーになる • 1アカウントごとにブラウザインスタンスは2つのみ • 60秒間コマンドを取得しないと強制終了 ◦ browser.close() コマンドで解放してあげるか、WebSocketを切ってあげない と1分間インスタンスを掴み続けてしまう
© 2023 Ateam Inc. 試しに動かそうと思っても⼀筋縄ではいかない 10 • 少し古いドキュメントに書かれている設定では動かない ◦ ネット上に新旧⼊り混じっているので混乱する
• @cloudflare/puppeteer ライブラリ(v0.0.4)にバグがありスクショが撮れない ◦ GithubにIssueはあるが解決策は書かれていない ◦ Discordを覗いたらワークアラウンドな解決策が書かれていた 解決策やその他注意点等はAPPENDIXに残しておきます
© 2023 Ateam Inc. Waiting List待機中に試してみたい⼈へ 11 Q. ちなみに、Waiting Listに登録して通過を待たないと試せない?🤔
A. YES ローカルでの開発でも、リモートにあるブラウザインスタンスに接続が必要 そのインスタンスがWaiting Listを突破しないと利⽤できない せっかくMeetupで話すので、今すぐ試しに触ってみれる⽅法を探ってみた (結果的にWorkers Browser Rendering APIがどう提供されているか想像できた)
© 2023 Ateam Inc. Waiting List待機中に試してみたい⼈へ 12 「WebSocketで接続してChrome Devtoolsプロトコルで通信する」と公式ブログにある
© 2023 Ateam Inc. Waiting List待機中に試してみたい⼈へ 13 Puppeteer のドキュメントを⾒ると、WSで接続する⽅法が公式に提供されていた https://pptr.dev/api/puppeteer.puppeteer.connect
© 2023 Ateam Inc. Waiting List待機中に試してみたい⼈へ 14 つまりこの Worker からブラウザインスタンスに
WS で接続して‧‧‧というのは Cloudflare の黒魔術技術ではなく、Puppeteer の標準機能で実現できる(はず)! (もちろんWorkerからWSでコネクションできる事⾃体がCloudflareのすごいところではあるが) この⾚枠部分を⾃⼒で⽤意できれば、⼀般に使えるWokersの機能だけで実現できそう
© 2023 Ateam Inc. Waiting List待機中に試してみたい⼈へ 15 そんな都合がいいものあるのか‧‧‧? と思ったらあった! Browserless
WSとChrome Devtoolsプロトコルで同じようなBrowser Rendering APIと同等の機能を提供 ありがたいことにDockerのイメージ(browserless/chrome)を公開してくれている https://www.browserless.io/
© 2023 Ateam Inc. Waiting List待機中に試してみたい⼈へ 16 docker run --rm
-p 3000:3000 browserless/chrome でローカルにbrowserlessを⽴ち上げて おけば、Workerの中から次のようなコードでブラウザインスタンスに接続できる
© 2023 Ateam Inc. まとめ • Puppeteer でできていたことが、Workersから実⾏でできるようになる ◦ LambdaとかCloud
Runを⽤意しなくてよくなる ◦ スクショ撮ってVRTするとか、E2Eテストするとか、スクレイピングとか • ただ、Workersで実⾏できると嬉しいシーンは正直不明 ◦ Cloudflare製品でスタックを固めたい⼈とか? ◦ ユーザアクセスをフックし、レスポンス後に⾮同期で何らか処理を⾏うとか? • 現段階では制限が強く、プロダクトインして使⽤するのは難しい ◦ (これはオープンベータという位置付けなので仕⽅ない) • Waiting List を突破しないと使えないが、擬似的に試せる⽅法はある ◦ 結果的にどういう仕組みで動いているのかなんとなくわかった 17
© 2023 Ateam Inc. 18 Happy Hack CF Workers!!
None
© 2023 Ateam Inc. 20 APPENDIX
© 2023 Ateam Inc. 本⽇の発表に使った実装はリポジトリにおいて置きました 21 https://github.com/aiji42/worker-puppetter
© 2023 Ateam Inc. TIPS/ワークアラウンド 22 • wrangler.tomlの設定に関して compatibility_flags =
["nodejs_compat"] をつけてNode互換を有効にしてあげる ※少し古いドキュメントだと、node_compat = true と書かれていることがあるが、 現在は下記のような書き⽅でないと動かない
© 2023 Ateam Inc. TIPS/ワークアラウンド 23 • @cloudflare/puppeteer のバグ 2023/08/03現在の最新(v0.0.4)の
@cloudflare/puppeteer を利⽤してスクショを撮る と Buffer is not defined のエラーが発⽣する これをメインファイルに書いてあげれば回避可能 import { Buffer } from 'node:buffer' globalThis.Buffer = Buffer
© 2023 Ateam Inc. TIPS/ワークアラウンド 24 • 開発⽤の起動コマンドに関して wrangler dev
‒remote —remoteが重要(wrangler v3以降) 内部ではリモートにあるブラウザインスタンスをWSで接続して稼働するので、 リモートモードでの起動が必要 (先の発表のようなローカルでbrowserless/chromeを動かして接続する場合を除く)