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.5k
VRTツールのダークホース Lost Pixelを紹介したい
aiji42
5
3k
オリジンサーバに手を付けないパーフォマンス改善
aiji42
5
1.7k
Cloudflare Fonts試してみた🔤
aiji42
2
820
Hyperdrive試してみた🛸
aiji42
3
1.4k
VercelとNext.jsの機能を最大限に活用したA/Bテスト手法
aiji42
6
1.6k
Cloudflare WorkersとKVで キャッシュを非同期に更新する | Cloudflare Meetup Nagoya
aiji42
1
980
ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう
aiji42
15
6.1k
Other Decks in Technology
See All in Technology
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.1k
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
400
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
920
S3アクセス制御の設計ポイント
tommy0124
3
200
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
110
Snowflakeの生成AI機能を活用したデータ分析アプリの作成 〜Cortex AnalystとCortex Searchの活用とStreamlitアプリでの利用〜
nayuts
1
480
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
170
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
240
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.2k
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
21
10k
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
440
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
280
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Into the Great Unknown - MozCon
thekraken
40
2k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Optimizing for Happiness
mojombo
379
70k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
Bash Introduction
62gerente
615
210k
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を動かして接続する場合を除く)