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
500
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.1k
Cloudflare Workersで構築する非同期ジョブシステム
aiji42
6
2k
VRTツールのダークホース Lost Pixelを紹介したい
aiji42
5
2.7k
オリジンサーバに手を付けないパーフォマンス改善
aiji42
5
1.5k
Cloudflare Fonts試してみた🔤
aiji42
2
730
Hyperdrive試してみた🛸
aiji42
3
1.3k
VercelとNext.jsの機能を最大限に活用したA/Bテスト手法
aiji42
6
1.4k
Cloudflare WorkersとKVで キャッシュを非同期に更新する | Cloudflare Meetup Nagoya
aiji42
1
860
ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう
aiji42
15
5.6k
Other Decks in Technology
See All in Technology
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
530
Amazon S3 Tablesと外部分析基盤連携について / Amazon S3 Tables and External Data Analytics Platform
nttcom
0
130
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.3k
表現を育てる
kiyou77
1
210
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
510
2.5Dモデルのすべて
yu4u
2
830
Nekko Cloud、 これまでとこれから ~学生サークルが作る、 小さなクラウド
logica0419
2
950
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
800
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
140
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
1.1k
Classmethod AI Talks(CATs) #16 司会進行スライド(2025.02.12) / classmethod-ai-talks-aka-cats_moderator-slides_vol16_2025-02-12
shinyaa31
0
100
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
960
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Making Projects Easy
brettharned
116
6k
How GitHub (no longer) Works
holman
314
140k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Building Your Own Lightsaber
phodgson
104
6.2k
Site-Speed That Sticks
csswizardry
4
380
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Automating Front-end Workflow
addyosmani
1368
200k
Speed Design
sergeychernyshev
27
790
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を動かして接続する場合を除く)