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
990
ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう
aiji42
15
6.2k
Other Decks in Technology
See All in Technology
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
110
Pure Goで体験するWasmの未来
askua
1
180
How to achieve interoperable digital identity across Asian countries
fujie
0
120
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
130
[2025-09-30] Databricks Genie を利用した分析基盤とデータモデリングの IVRy の現在地
wxyzzz
0
470
SOC2取得の全体像
shonansurvivors
1
390
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
540
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
3
270
コンテキストエンジニアリングとは? 考え方と応用方法
findy_eventslides
4
900
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
140
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
140
Findy Team+のSOC2取得までの道のり
rvirus0817
0
340
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Gamification - CAS2011
davidbonilla
81
5.5k
Docker and Python
trallard
46
3.6k
RailsConf 2023
tenderlove
30
1.2k
How GitHub (no longer) Works
holman
315
140k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Bash Introduction
62gerente
615
210k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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を動かして接続する場合を除く)