ゆーすけべー日記

天然パーマです。

最近のCloudflare Workers

2024-02-20 cloudflare

最近のCloudflare Workersについて、知らない方向けにざっくばらんに書いてみます。

連絡事項

自己紹介しておくと、僕はCloudflareのDeveloper RelationsチームにいてDeveloper Advocateをやってます。 一方で、HonoというCloudflareのみならずDenoやBun、Fastly等で動くWebフレームワークを開発してます。

Cloudflare Workersとは？

本題に入る前に、そもそも「Cloudflare Workersとは？」を簡単に紹介しておきます。

Cloudflare WorkersとはCloudflareのエッジで動くサーバーレス環境です。 基本的にJavaScript/TypeScriptでアプリケーションを書きます。 V8というJavaScriptエンジンの上でアプリを動かすのですが、これはWebブラウザのGoogle Chromeに搭載されているものです。 感覚としては、Chromeのタブが開く感じで、Workers上のアプリが立ち上がります。 JavaScriptと言ってもNode.jsではなく、ブラウザでも動く標準的なAPIを使います。 開発、デプロイにはWranglerというCLIを使います。

…というのがダイジェストです。

ではいってみよう！

Cloudflare Pagesとの統合

Cloudflare Workersの他にPagesというのがありまして、一般的にはNext.jsやAstroなどのフレームワークを用いて「フルスタック」なアプリケーションを作るプラットフォームです。 以前はWorkersとPagesは明確に分かれていたのですが、それが統合されつつあります。

Pagesはもともと静的なページをホストするのが主なユースケースだったのが、「SSR」というキーワードから分かる通り、ダイナミックな処理が増えてきました。 そのPagesのダイナミック処理はWorkersで動いているので、その境界線が曖昧になるんですね。

実際、ダッシュボードではWorkersもPagesも同じセクションになりました。

なので、我々がCloudflare Workersと呼ぶ時にはCloudflare Pagesも含むケースが多いです。

C3 - create-cloudflare-cli

C3というのができました。これは「Create Cloudflare CLI」の頭文字をとってC3です。 Cloudflareには以前から「D1」というSQLデータベース、「R2」というストレージを持っていて、今度は「C3」です。洒落ていますね！

これはCloudflare Workers/Pagesのアプリケーションを簡単に作れるCLIです。 「Hello World」のベーシックなものから、フレームワークを使ったものまで対応します。Honoも入っています。 使いたい方は以下を実行してみてください。

npm create cloudflare@latest

面白いのは、このC3は内部で各フレームワークの「create xxx」を実行していて、つまり「メタCLI」になっている点です。 例えばHonoでは「create-hono」というパッケージがあって、以下のコマンドで雛形を作成することができます。

npm create hono@latest

他にも、create-astro、create-next-app、create-solid、create-qwikなど各フレームワークにはたいてい「create xxx」があります。 それらをラップしつつ、Cloudflareならではの機能が入ります。面白いのは、プロジェクトを作成したあとに「デプロイしますか？」と聞かれることで、「Y」を選ぶといつの間にかデプロイできてしまうという素晴らしいCLIになっています。

使いやすく、ダウンロード数も伸びています（ありがたいことにcreate-honoも伸びてます！）。

Cloudflare Workers初めての人は触ってみてください！

30秒でデプロイまでできる！

Cloudflare Workersを触った人が一様に言うのが「デプロイが速い」です。 相変わらず速いです。

下のGIF動画はC3を使ってHello Worldのアプリをローカルでつくり、デプロイまでする様子です。 早送りなしの実速度です。 この方法が一番最短なんですが「30秒！！」でできてしまいます。

もう一度繰り返します。30秒でアプリケーションの作成からデプロイまでできます。 これはひいきなしにすごいと思います。

workers.new

Cloudflare WorkersをWebのUIで試して、デプロイまでできちゃうPlaygroundがあります。 これが素晴らしく、ライブラリが使えないという制約がありますが、簡単に試すには十分です。

で、実は「workers.new」というアドレスにアクセスするだけでそのPlaygroundが開きます。 オシャレでしょ？それもそのはずこれは僕が考案しました。はっはっは。

AIめっちゃ頑張ってる

AIめっちゃ頑張っています。

CloudflareのAIに関する製品は2種類あって、Workers AI（とVectorize）とAI Gatewayです。

Workers AI

Workers AIは、Cloudflare WorkersのアプリケーションからAIの推論ができてしまうという代物。 テキスト生成だとMeta社のLlama2やMistral 7Bなどのモデルが使えます。 興味深いのは、このAIを実行するために各エッジにGPUを載せているということです。 すでに日本を含むデータセンターに配置されて、その数は増えていく予定です。

AIを使うのは非常に簡単です。 Bindings（CloudflareのKV、R2、D1などのミドルウェア、もしくはWorkersをつなぐ概念）の一種として使えます。また@cloudflare/aiというパッケージもあります。

では実際に簡単なWorkers AIアプリを作ってみましょう。といっても3ステップです。

まずC3で作ったHonoのプロジェクトに@cloudflare/aiを追加します。

npm i @cloudflare/ai

次に、Wranglerの設定ファイルwrangler.tomlにBindingsの指定をします。

[ai]
binding = "AI"

あとはコードを書くだけ。以下の17行のコードで/にアクセスすると、Llama2のテキスト生成が走るWebアプリができました！

import { Hono } from 'hono'
import { Ai } from '@cloudflare/ai'

const app = new Hono()

app.get('/', async (c) => {
  const query = c.req.query('query') ?? 'Cloudflare'
  const ai = new Ai(c.env.AI)

  const response = await ai.run('@cf/meta/llama-2-7b-chat-int8', {
    prompt: `Describe about ${query}`
  })

  return c.json(response)
})

export default app

他にWorkersから操作できる「Vectorize」というベクターデータベースもあります。 バックエンドのストレージにR2とD1が指定できるので、Cloudflareならではのスタックを作れます。

AI Gateway

これも面白い製品です。 OpenAIやAmazon Bedrock、HuggingFaceなど、外部のAIプロバイダーへのアクセスのためのゲートウェイです。 これを経由すると、それらのプロバイダーへのAPIアクセスに、リアルタイムログやレスポンスのキャッシュ、レートリミットなどを追加することができます。

使い方は簡単で、例えばOpenAIの場合、SDKのベースパスにAI Gatewayのものを指定してプロキシさせればいいです。

const openai = new OpenAI({
  apiKey: c.env.OPENAI_API_KEY,
  baseURL: 'https://gateway.ai.cloudflare.com/v1/ACCOUNT_TAG/GATEWAY/openai'
})

例えば、AI系のAPIは叩くのに料金が高いという課題がありますが、このAI Gatewayのキャッシュやレートリミットは活きることでしょう。

ユースケース

Cloudflare Workersを使う企業も増えてきています。

Workersを導入しやすいのはオリジンありきのCDNの前段に置く、というユースケースです。 例えば、ヘッダを書き換えたり、パスによってオリジンを振り分けたり、署名付きURLを発行したりといったものが考えられます。

一方、Workersプラットフォームの進化とともにオリジン自体をエッジに置くところもでてきました。

例えば、その最たる例がchimameさんのケースで、GCP Cloud Runで運用していたGraphQLのAPIサーバーをCloudflare Workersに丸ごと載せ替えたというものです。

以下のスライドが詳しいです。

これによると、移行したメリットとしては

  • コンテナに比べてデプロイの時間が8分前後から1分前後に短縮
  • コールドスタート、最大5秒から200ミリ秒程度まで高速化
  • サーバー費の低下

があったとのことです。

一方、デメリットとして

  • Node.jsが動かないので、必要な場合は別途サーバーを用意しなくてはいけない
  • ログを取るのが大変

などがあることです。

彼に直接話を聞くと概ね満足している様子です！

また、国内だとcodehexさんのところの「NOT A HOTEL」も事例として語られています。

他にも事例があるのですが、僕がまだ把握してきれてないものもたくさんあると思います。 見つけて「こんなこともできるよ」というのを発信していきたです。

getPlatformProxy()

具体的な実装の話を少し。 Cloudflare Workers/Pagesのアプリケーションを作るにあたって、開発環境でBindingsを再現するのは課題です。 特に、フレームワークを使うとそのフレームワークの開発サーバーを使うことになりますが、そこにBindingsを注入するのがなかなか難しいです。 これをCloudflareの中の人たちは問題視していて、向上しようとしています。 その一つがWranglerのgetPlatformProxy()という最近できたばかりのAPIです。 これを使うとこれまで、Wranglerで立ち上げたアプリでしか参照できなかったBindingsですが、Node.jsからアクセス可能になります。 例えば、以下のスクリプトをNode.jsで実行するとWorkers AIが動きます（と言いつつ、今バグがあるので動かないのですが、すぐに修正されて動きます！）。

import { getPlatformProxy } from 'wrangler'
import { Ai } from '@cloudflare/ai'

const proxy = await getPlatformProxy()
const ai = new Ai(proxy.env.AI)

const answer = await ai.run('@cf/meta/llama-2-7b-chat-int8', {
  prompt: 'What is the origin of the phrase Hello, World'
})

console.log(answer)

proxy.dispose()

すると何が嬉しいかというと、各フレームワークの開発サーバーで使えば、Node.jsベースの開発サーバーでもBindingsにアクセスできるようになります。

また、昨今フレームワークで多く使われている、開発ツールの「Vite」側のアプローチもあります。 Node.jsの環境しか提供していなかったのが、Cloudflareなどの外部のランタイムを持ってこれるようなRuntime APIというのができたのです。

この2つはなかなかでかい出来事で、開発者体験を一気に向上させることになります。

DevRelチーム

僕が所属しているのはDeveloper Relationsチームです。 日本ドメスティックなものではなく、マネージャーのRickyがニューヨーク、他のメンツはリスボン、アムステルダム、サンフランシスコ、オースティン、メルボルンと多岐に渡ります。 今はメンバーが10人になったのですが、以下の画像はちょっと前のものです。時差パネェ。

そのチームに去年の年末、ふたり「Educator」という新設されたロールのメンバーが入りました。 彼らの専門部やはずばりAIで、やはりそれだけAIに力を入れているし、入った途端、精力的に活動していて、成果がでるのが楽しみです。

DevRelチームは去年、僕が4月に入社する1ヶ月前にRickyが入ってチーム体制が整いました。 メンバーが点でバラバラのところにいるので会うのめちゃくちゃ難しかったのですが、ようやく次の4月にみんなが集う初めてのチームミーティングがオースティンで行われます！ 僕にとっては初めての海外出張になって、Rickyを除くメンバーは会ったことがないのでドキドキですが楽しみです。 このミーティングを期に我がチームの勢いも加速するでしょう。

イベント

最後に僕がやっているイベントについて。

「Workers Tech Talks」というCloudflare Workersに特化したイベントをやってます。 東京ではこれまで2回やって、上記したchimameさんのトークとか話してもらいました。 それぞれ100人弱の参加者で、大盛況です。今後も続けていきます。

さて、実は来週の月曜日2/26に「Workers Tech Talks in Osaka #1」と題し、大阪版を開催します！ ギリギリまだ参加者募集中なので、来たいという方は早めに以下のページから申し込んでください。

https://workers-tech.connpass.com/event/308872/

まとめ

以上、最近のCloudflare Workersについてざっくばらんに書いてみました。 もっと突っ込んだ話題を知りたければ、イベントなどで僕ができる紹介するし、他のCloudflare Workers使いの人たちからも有益な情報を得られるでしょう。 また、あなたがCloudflare Workersを使っていて、事例を持っているなら、教えてほしいです。 そして、まだCloudflare Workersを触ったことがない人はC3コマンドを使ってデプロイまでやってみてください！ きっと楽しいと思います。