Workers Browser Rendering API について

Dive to Workers Browser Rendering API
Workersでスクショを撮ってみる📸

Cloudflare Meetup Nagoya #2 の発表資料です。

Transcript

1. © 2023 Ateam Inc.
   Dive to Workers Browser Rendering API
   Workersでスクショを撮ってみる📸
   Cloudflare Meetup Nagoya #2
   

   View Slide

2. © 2023 Ateam Inc.
   ⾃⼰紹介
   Who am I ?
   Name: Aiji Uejima
   X(Twitter): aiji42_dev
   Github: aiji42
   株式会社エイチームライフデザイン技術開発室所属
   リードエンジニア
   最近興味があるのはエッジランタイム。
   毎⽇プライベートでGithubに草⽣やしながら頑張ってます！
   2
   

   View Slide

3. © 2023 Ateam Inc. 3
   🚧 注意
   本⽇発表する内容は 2023-08-03 時点の情報です。
   現在の Workers Browser Rendering API のステータスはベータです。
   よって、仕様が変更される可能性があります。
   

   View Slide

4. © 2023 Ateam Inc.
   Cloudflare Workers でブラウザインスタンスが使えるの知ってましたか？
   4
   https://blog.cloudflare.com/introducing-workers-browser-rendering-api/
   昨年11⽉にCloudflareのブログで発表されました。
   

   View Slide

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

   View Slide

6. © 2023 Ateam Inc.
   現在オープンベータになっています
   6
   https://blog.cloudflare.com/browser-rendering-open-beta/
   今年の5⽉にオープンベータになりました🎉
   Waiting Listに登録し、順番待ちを通過すれば誰でも使⽤可能になります。
   

   View Slide

7. © 2023 Ateam Inc.
   Waiting List 通過したので早速使ってみた
   7
   https://puppeteer.aiji422990.workers.dev/
   

   View Slide

8. © 2023 Ateam Inc. 8
   こんな感じのコードでスクリーンショットの
   画像データをレスポンスとして返却できる
   詳しい解説は公式ドキュメントへ
   https://developers.cloudflare.com/browser-rendering/get-started/s
   creenshots/
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. © 2023 Ateam Inc.
    Waiting List待機中に試してみたい⼈へ
    12
    「WebSocketで接続してChrome Devtoolsプロトコルで通信する」と公式ブログにある
    

    View Slide

13. © 2023 Ateam Inc.
    Waiting List待機中に試してみたい⼈へ
    13
    Puppeteer のドキュメントを⾒ると、WSで接続する⽅法が公式に提供されていた
    https://pptr.dev/api/puppeteer.puppeteer.connect
    

    View Slide

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

    View Slide

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

    View Slide

16. © 2023 Ateam Inc.
    Waiting List待機中に試してみたい⼈へ
    16
    docker run --rm -p 3000:3000 browserless/chrome でローカルにbrowserlessを⽴ち上げて
    おけば、Workerの中から次のようなコードでブラウザインスタンスに接続できる
    

    View Slide

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

    View Slide

18. © 2023 Ateam Inc. 18
    Happy Hack CF Workers!!
    

    View Slide

19. View Slide

20. © 2023 Ateam Inc. 20
    APPENDIX
    

    View Slide

21. © 2023 Ateam Inc.
    本⽇の発表に使った実装はリポジトリにおいて置きました
    21
    https://github.com/aiji42/worker-puppetter
    

    View Slide

22. © 2023 Ateam Inc.
    TIPS/ワークアラウンド
    22
    ● wrangler.tomlの設定に関して
    compatibility_flags = ["nodejs_compat"] をつけてNode互換を有効にしてあげる
    ※少し古いドキュメントだと、node_compat = true と書かれていることがあるが、
    現在は下記のような書き⽅でないと動かない
    

    View Slide

23. © 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
    

    View Slide

24. © 2023 Ateam Inc.
    TIPS/ワークアラウンド
    24
    ● 開発⽤の起動コマンドに関して
    wrangler dev ‒remote
    —remoteが重要(wrangler v3以降)
    内部ではリモートにあるブラウザインスタンスをWSで接続して稼働するので、
    リモートモードでの起動が必要
    (先の発表のようなローカルでbrowserless/chromeを動かして接続する場合を除く)
    

    View Slide