🧊

Workers Tech Talks #2 に行ってきたメモ #workers_tech

Workers Tech Talks #2 - connpass https://workers-tech.connpass.com/event/300546/

オフラインイベントも久しぶりながら、オフライン登壇も久しぶり。

つまり、この行ってきた記事も久しぶり。

このイベントは、Workers玄人しか来てないらしいので、濃ゆい話に乞うご期待。

Go言語で始めるCloudflare Workers by @__syumai

Go言語で始めるCloudflare Workers - Speaker Deck https://speakerdeck.com/syumai/godeshi-merucloudflare-workers

  • 雑誌でCloudflare Workersの連載やります
    • Software Design 12月号から
  • https://github.com/syumai/workers の紹介
    • GoだけでWorkersが書ける
      • http.Handlerをいつも通り書けばいい
    • WASMとJSを知らなくても書けるように
    • R2, KV, D1などは使えるようにしてある
  • 仕組み
    • Go|TinyGoでWASMにして、それを実行
    • globalThis経由でGoのWASMを初期化して使う
    • GoでPromiseを生成するところが大変だった
    • Goのレスポンスを、どうJSのReadableStreamにするか
  • 何ができるか
    • GraphQLサーバー、画像処理
    • connect-goで書いたサーバーも
    • Pagesの裏側にGoを置きたいとかあれば
  • パフォーマンス
    • 99パーセンタイルで130msくらい出る
    • WASMのパフォーマンス改善があったらしく、実用的
  • ただしファイルサイズ制限がある
    • 無料プランの場合、TinyGoでないと無理かも
  • TinyGo
    • encoding/jsonも動くようになり嬉しい
    • ただしビルドが遅いかも

オリジンサーバーに手を付けないパフォーマンス改善 by @aiji42_dev

オリジンサーバに手を付けないパーフォマンス改善 - Speaker Deck https://speakerdeck.com/aiji42/orizinsabanishou-wofu-kenaipahuomansugai-shan

  • Cloudflareにあるコンテンツ改善の仕組み
    • Fonts, Early hints, Zaraz
  • どれもHTML内を探索・検知・書き換えをやってる
  • HTMLRewriterというAPIがある！
  • コレを使って、オプトインで最適化できないか？
  • たとえば、画像ギャラリーのようなサイト
    • Instagramみたいな
  • レスポンス時に、img要素をブラー画像のプレースホルダとJSに差し替える
    • 最初は軽いブラー画像を返しつつ
    • JSで本当の画像を取得して差し替え
  • WASMを使ってBlurHashみたいなこともできるかも
  • たとえば、3rdのスクリプト
  • CDNのPartytownを使うようにする
  • CORSのヘッダーをうまく適用する必要がある場合もある
  • 他にもいろんなユースケースがありそう

Bindings from anywhere by @leaysgur

Bindings from anywhere https://leaysgur.github.io/slides/cloudflare_workers_tech_talks-2/#1

自分の発表なのでメモはなし。

意外に共感してくれてる人がいて、うれしかったです！

デモセッション by @rickyrobinett

資料は見つけたら

  • 今日は呼んでくれて本当にありがとう
  • ブルックリンに住んでる
    • アマチュアマジシャン！
  • コードは共通語なので、スライドは控えめで
  • Workers AIについてデモするよ
  • BindingsやREST APIで、ネットワーク経由でAIモデルが動く
    • Text GenerationからText to Imageまでだいたいのことはできる
    • モデルは用途ごとに限られてるけど
  • https://ai.cloudflare.com/ にあるデモを順に
    • たまに動かないやつあったけどご愛嬌
  • 生成AIでできることはいろいろある
  • LangChainを使えばRAGも簡単に実装できちゃう

LTたち

We use AI Gateway by @codehex

資料は見つけたら

  • AI Gatewayとは
    • 各種AI系のAPIとのプロキシー
    • Azure OpenAIも使えるようになった
  • 簡単に使えて、できることが3つ
  • Rate-limiting
    • APIへの流量を調整できる
  • Response Cache
    • 同じINPUTなら、OUTPUTをキャッシュから返してくれる
  • Real-time logs
    • 直近1時間のログが見れて監視に使える
    • 前はもっと長い時間残してくれてたけど・・

GraphQL Server on Edge after that by @chimame_rt

GraphQL Server on Edge after that - Speaker Deck https://speakerdeck.com/chimame/graphql-server-on-edge-after-that

  • 前回のあらすじ
  • Workerをプロキシーとして配置する構成
    • 何かあってもすぐ外せるように
  • DBコネクションを共有できない
    • Workerの仕組みとして、リクエストごとにつなぐしかない
  • コネクションを都度閉じてしまうと、waitUntil()なんかで使えない
  • ログ機能は当てにしないほうがいい
    • R2に出力することはできるが、ビューワーはない
    • OpenObserve使ってて、SQLで検索できて便利
  • インシデントアラートは有効にするのがおすすめ
  • コストカットはできてて、Cloud Runの1/10くらいになった

Cloudflare workers でスプレッドシートをノーコード CMS にしてみた by @katoh_kenta

資料は見つけたら

  • KurocoというヘッドレスCMSをやってる会社からきました
  • KurocoEdgeというプロキシーサービスもある
  • オリジンに手を入れず、いろんな機能を後付できる
    • リクエスト・レスポンスを書き換えられる
    • CSSセレクタで対象を探して、表示内容を追加するとか置換するとか
  • スプレッドシートをCMSとして使って、この機能を管理できるようにした

Qwik それはフロントエンドの見た夢 by @mizchi

qwik-workers_tech_talk.md https://gist.github.com/mizchi/7abb8d88dd344d38ef355a8b424505a8

  • Qwikとは
    • SSR前提で最適化するUIライブラリ
    • JSXが書ける
  • $が末尾につく関数にすると、そこがチャンク化されて、非同期ロードされる
    • コンポーネントだけでなく
    • onClickみたいなレベルまで最適化できる
  • 内部的には、QRLという単位で扱われる
    • QRL同士なら、関数内で参照できる
  • この仕組みを意識しないと、動くコードが書けない
    • letの変数とか、Signalという変数用の仕組みでQRLにする必要あり
  • QwikCityというフレームワークがあり、Next.jsのような立ち位置
    • Cloudflareへのアダプターもある
  • ReactコンポーネントをQwikコンポーネント化するものもある
  • エコシステムはまだまだ