$30 off During Our Annual Pro Sale. View Details »

Workers Browser Rendering API について

AijiUejima
August 04, 2023

Workers Browser Rendering API について

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

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

AijiUejima

August 04, 2023
Tweet

More Decks by AijiUejima

Other Decks in Technology

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