Dive to Workers Browser Rendering API Workersでスクショを撮ってみる📸
Cloudflare Meetup Nagoya #2 の発表資料です。
© 2023 Ateam Inc.Dive to Workers Browser Rendering APIWorkersでスクショを撮ってみる📸Cloudflare Meetup Nagoya #2
View Slide
© 2023 Ateam Inc.⾃⼰紹介Who am I ?Name: Aiji UejimaX(Twitter): aiji42_devGithub: aiji42株式会社エイチームライフデザイン技術開発室所属リードエンジニア最近興味があるのはエッジランタイム。毎⽇プライベートでGithubに草⽣やしながら頑張ってます!2
© 2023 Ateam Inc. 3🚧 注意本⽇発表する内容は 2023-08-03 時点の情報です。現在の Workers Browser Rendering API のステータスはベータです。よって、仕様が変更される可能性があります。
© 2023 Ateam Inc.Cloudflare Workers でブラウザインスタンスが使えるの知ってましたか?4https://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.現在オープンベータになっています6https://blog.cloudflare.com/browser-rendering-open-beta/今年の5⽉にオープンベータになりました🎉Waiting Listに登録し、順番待ちを通過すれば誰でも使⽤可能になります。
© 2023 Ateam Inc.Waiting List 通過したので早速使ってみた7https://puppeteer.aiji422990.workers.dev/
© 2023 Ateam Inc. 8こんな感じのコードでスクリーンショットの画像データをレスポンスとして返却できる詳しい解説は公式ドキュメントへhttps://developers.cloudflare.com/browser-rendering/get-started/screenshots/
© 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待機中に試してみたい⼈へ11Q. ちなみに、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待機中に試してみたい⼈へ13Puppeteer のドキュメントを⾒ると、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そんな都合がいいものあるのか‧‧‧? と思ったらあった!BrowserlessWSとChrome Devtoolsプロトコルで同じようなBrowser Rendering APIと同等の機能を提供ありがたいことにDockerのイメージ(browserless/chrome)を公開してくれているhttps://www.browserless.io/
© 2023 Ateam Inc.Waiting List待機中に試してみたい⼈へ16docker 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. 18Happy Hack CF Workers!!
© 2023 Ateam Inc. 20APPENDIX
© 2023 Ateam Inc.本⽇の発表に使った実装はリポジトリにおいて置きました21https://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を動かして接続する場合を除く)