Workers Browser Rendering API について

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

© 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の利⽤⽤途とほぼ同じ)

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

© 2023 Ateam Inc. 制限 (オープンベータ期間中) 9 ● 1分あたり2つのブラウザインスタンスしか利⽤できない ○ 連続して処理するとToo Many Requestsでエラーになる ● 1アカウントごとにブラウザインスタンスは2つのみ ● 60秒間コマンドを取得しないと強制終了 ○ browser.close() コマンドで解放してあげるか、WebSocketを切ってあげないと1分間インスタンスを掴み続けてしまう

Slide 10

Slide 10 text

© 2023 Ateam Inc. 試しに動かそうと思っても⼀筋縄ではいかない 10 ● 少し古いドキュメントに書かれている設定では動かない ○ ネット上に新旧⼊り混じっているので混乱する ● @cloudﬂare/puppeteer ライブラリ(v0.0.4)にバグがありスクショが撮れない ○ GithubにIssueはあるが解決策は書かれていない ○ Discordを覗いたらワークアラウンドな解決策が書かれていた解決策やその他注意点等はAPPENDIXに残しておきます

Slide 11

Slide 11 text

© 2023 Ateam Inc. Waiting List待機中に試してみたい⼈へ 11 Q. ちなみに、Waiting Listに登録して通過を待たないと試せない？🤔 A. YES ローカルでの開発でも、リモートにあるブラウザインスタンスに接続が必要そのインスタンスがWaiting Listを突破しないと利⽤できないせっかくMeetupで話すので、今すぐ試しに触ってみれる⽅法を探ってみた (結果的にWorkers Browser Rendering APIがどう提供されているか想像できた)

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

© 2023 Ateam Inc. Waiting List待機中に試してみたい⼈へ 14 つまりこの Worker からブラウザインスタンスに WS で接続して‧‧‧というのは Cloudﬂare の黒魔術技術ではなく、Puppeteer の標準機能で実現できる(はず)！ (もちろんWorkerからWSでコネクションできる事⾃体がCloudﬂareのすごいところではあるが) この⾚枠部分を⾃⼒で⽤意できれば、⼀般に使えるWokersの機能だけで実現できそう

Slide 15

Slide 15 text

© 2023 Ateam Inc. Waiting List待機中に試してみたい⼈へ 15 そんな都合がいいものあるのか‧‧‧？と思ったらあった！ Browserless WSとChrome Devtoolsプロトコルで同じようなBrowser Rendering APIと同等の機能を提供ありがたいことにDockerのイメージ(browserless/chrome)を公開してくれている https://www.browserless.io/

Slide 16

Slide 16 text

Slide 17

Slide 17 text

© 2023 Ateam Inc. まとめ ● Puppeteer でできていたことが、Workersから実⾏でできるようになる ○ LambdaとかCloud Runを⽤意しなくてよくなる ○ スクショ撮ってVRTするとか、E2Eテストするとか、スクレイピングとか ● ただ、Workersで実⾏できると嬉しいシーンは正直不明 ○ Cloudﬂare製品でスタックを固めたい⼈とか？ ○ ユーザアクセスをフックし、レスポンス後に⾮同期で何らか処理を⾏うとか？ ● 現段階では制限が強く、プロダクトインして使⽤するのは難しい ○ (これはオープンベータという位置付けなので仕⽅ない) ● Waiting List を突破しないと使えないが、擬似的に試せる⽅法はある ○ 結果的にどういう仕組みで動いているのかなんとなくわかった 17

Slide 18

Slide 18 text

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

© 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

Slide 24

Slide 24 text