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
550
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.5k
Cloudflare Workersで構築する非同期ジョブシステム
aiji42
7
2.3k
VRTツールのダークホース Lost Pixelを紹介したい
aiji42
5
2.9k
オリジンサーバに手を付けないパーフォマンス改善
aiji42
5
1.6k
Cloudflare Fonts試してみた🔤
aiji42
2
790
Hyperdrive試してみた🛸
aiji42
3
1.4k
VercelとNext.jsの機能を最大限に活用したA/Bテスト手法
aiji42
6
1.6k
Cloudflare WorkersとKVで キャッシュを非同期に更新する | Cloudflare Meetup Nagoya
aiji42
1
940
ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう
aiji42
15
6k
Other Decks in Technology
See All in Technology
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
43
26k
型システムを知りたい人のための型検査器作成入門
mame
15
3.8k
讓測試不再 BB! 從 BDD 到 CI/CD, 不靠人力也能 MVP
line_developers_tw
PRO
0
160
IIWレポートからみるID業界で話題のMCP
fujie
0
200
ObsidianをMCP連携させてみる
ttnyt8701
2
110
Amplifyとゼロからはじめた AIコーディング 成果と展望
mkdev10
1
220
脅威をモデリングしてMCPのセキュリティ対策を考えよう
flatt_security
4
1.6k
活きてなかったデータを活かしてみた話 / Shirokane Kougyou vol 19
sansan_randd
1
270
Tensix Core アーキテクチャ解説
tenstorrent_japan
0
360
Whats_new_in_Podman_and_CRI-O_2025-06
orimanabu
3
180
評価の納得感を2段階高める「構造化フィードバック」
aloerina
1
160
AIエージェントの継続的改善のためオブザーバビリティ
pharma_x_tech
6
1.1k
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
92
6.1k
Into the Great Unknown - MozCon
thekraken
39
1.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Gamification - CAS2011
davidbonilla
81
5.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
43
2.4k
GitHub's CSS Performance
jonrohan
1031
460k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Bash Introduction
62gerente
614
210k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
The Cult of Friendly URLs
andyhume
79
6.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
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を動かして接続する場合を除く)