Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cloudflare Workersと状態管理

chimame
January 24, 2023

Cloudflare Workersと状態管理

Serverless Frontend Meetup #1 「Cloudflare Workers」

chimame

January 24, 2023
Tweet

More Decks by chimame

Other Decks in Programming

Transcript

  1. Cloudflare Workesと状態管理
    Serverless Frontend Meetup #1
    2023.01.24

    View full-size slide

  2. 目次
    ● 自己紹介
    ● Cloudflare Workersの特徴
    ● 状態管理
    ● アーキテクチャ(使用例)
    ● コードサンプル
    ● まとめ

    View full-size slide

  3. 自己紹介
    ● name: chimame / rito
    ● job: Webエンジニア
    ● field: Cloudflare, GCP, AWS, Ruby, Node.js, TypeScript,
    React, Next.js, Remix, Docker etc
    ● company: Goens株式会社( https://about.goen-s.com )
    ● twitter: @chimame_rt
    ● GitHub: chimame

    View full-size slide

  4. サービス
    50歳以上限定のマッチングアプリ
    Goens「ゴエンズ」
    単身限定で安心。同世代だから話が合う。シンプルかつ
    便利。Goens(ゴエンズ)は、心を開き合えるパートナー
    をじっくり見つけられる、シニア向け恋活・婚活マッチング
    アプリです。

    View full-size slide

  5. Cloudflare Workersの特徴
    ● エッジサーバで実行される
    ○ サーバレス実行環境
    ● JavaScript, Rust, Cなどの幾つかの言語で作成することが可能
    ● リクエストとレスポンスのハンドリングに特化して処理を作成することが可能
    ○ 例えばロードバランサー的なことも出来る
    ブラウザからのリクエストをサーバ(オリジン)で処理する前に、処理をする

    View full-size slide

  6. アプリケーションはプログラムさえ動く環境があ
    れば大丈夫?

    View full-size slide

  7. 大抵の場合はそうではない

    View full-size slide

  8. アプリケーションに必要なもの
    ● システムリソース(CPU、メモリなど)
    ● プログラム
    ● データ
    ● インターフェース(httpやhtmlなど)
    データとはアプリケーションやユーザがどういう状態であるかというものを指す。雑に書
    けばデータベースとほぼ同義(データベースだけでないが)。
    この中で、唯一Cloudflare Workersが提供していないのがデータ。これはCloudflare
    Workersではなく、サーバレスがスケーラビリティであるため状態(=データ)を保持でき
    ないのが理由。

    View full-size slide

  9. 状態管理
    Cloudflare Workersで行う状態管理の手法
    ● Cache API
    ● Cloudflare KV
    ● Durable Objects
    ● D1 ※Alpha版
    ● R2

    View full-size slide

  10. 状態管理
    Cloudflare Workersで行う状態管理の手法
    ● Cache API
    ● Cloudflare KV
    ● Durable Objects
    ● D1 ※Alpha版
    ● R2
    結果整合性
    強整合性

    View full-size slide

  11. 状態管理
    Cloudflare Workersで行う状態管理の手法
    ● Cache API
    ● Cloudflare KV
    ● Durable Objects
    ● D1 ※Alpha版
    ● R2
    レスポンスをキャッシュする。
    オリジンからもらったレスポンスを一定時間などの条件によっ
    てキャッシュしたものをクライアントに返すことで、レスポンス
    を素早く返す。
    アプリケーションの”状態”を一定同じものを返すという意味で
    含めている。

    View full-size slide

  12. 状態管理
    Cloudflare Workersで行う状態管理の手法
    ● Cache API
    ● Cloudflare KV
    ● Durable Objects
    ● D1 ※Alpha版
    ● R2
    データをKey, Value形式で保存するストレージ。
    保存するデータのKeyを柔軟に設定できること、保存する
    ValueもJSONを指定できたりと、Cache APIより柔軟性と強整
    合性が高い。

    View full-size slide

  13. 状態管理
    Cloudflare Workersで行う状態管理の手法
    ● Cache API
    ● Cloudflare KV
    ● Durable Objects
    ● D1 ※Alpha版
    ● R2
    ストレージというよりメモリを永続化する。
    メモリ上に情報を保持し、それをキャッシュとして返す場合、プ
    ロセス間ではそのメモリ情報は共有されない。なのでキャッ
    シュとしての機構としては貧弱となるが、この Durable
    Objectsを使用することでメモリ上に保存した情報を共有する
    と同時に、永続化する。

    View full-size slide

  14. 状態管理
    Cloudflare Workersで行う状態管理の手法
    ● Cache API
    ● Cloudflare KV
    ● Durable Objects
    ● D1 ※Alpha版
    ● R2
    昨年Alpha版が公開されたエッジ上で動作する SQLite。
    SQLiteなので通常のデータベース同様に、 Cloudflare
    Workers上のプログラムから SQLを投げることでデータの取
    得や保存、更新が行うことが可能。
    また、エッジに展開された SQLiteなのでデータが共有される。
    Alpha版であるがゆえにトランザクションなどの処理に課題を
    残すが大きく期待されているサービスの 1つ

    View full-size slide

  15. 状態管理
    Cloudflare Workersで行う状態管理の手法
    ● Cache API
    ● Cloudflare KV
    ● Durable Objects
    ● D1 ※Alpha版
    ● R2
    完全な外部ストレージであり、他の 4つのサービスとは少し異
    なる。
    ストレージのため、データの種類はストレージに保存する形式
    であればなんでも可能。例えば画像や JavaScriptやHTMLな
    どの静的ファイル、もちろん動画ファイルなども可能。
    Beta版時はCloudflare Workers経由でしか配信が行えな
    かったが、今ではドメインを紐づけて直接配信することが可
    能。

    View full-size slide

  16. ※管理画面
    サービスアーキテクチャ
    Cloudflare Workers
    Durable Objects
    Authentication
    Cloud Messaging
    Crashlytics etc
    認証
    画像データ
    Socket通信
    ユーザデータ
    (GraphQL)
    PUSH通知

    View full-size slide

  17. ※管理画面
    Authentication
    Cloud Messaging
    Crashlytics etc
    認証
    画像データ
    ユーザデータ
    (GraphQL)
    Cloudflare Workers
    Durable Objects
    サービスアーキテクチャ
    Socket通信
    複数の端末が同時にWeb Socketにて
    接続を行うため、接続情報をメモリ
    (=Durable Objects)上に保持する
    PUSH通知

    View full-size slide

  18. ※管理画面
    Authentication
    Cloud Messaging
    Crashlytics etc
    認証
    画像データ
    ユーザデータ
    (GraphQL)
    Cloudflare Workers
    Durable Objects
    サービスアーキテクチャ
    Socket通信
    メモリ(=Durable Objects)上に保持す
    る接続情報から該当端末を特定して、
    サーバPushを行う。
    PUSH通知

    View full-size slide

  19. コード(全体感)
    export class Socket {
    sessions: Session = {}
    app: Hono = new Hono()
    // サーバから指定の繋ぎ先にPublishするエンドポイント
    this.app.post('/publish/:id', async (ctx) => {})
    // クライアントからSubscribeするエンドポイント
    this.app.get('/subscribe/:id', async (ctx) => {})
    // Cloudflare Workerがリクエストを処理するためのメソッド
    async fetch(request: Request) {
    return await this.app.fetch(request)
    }
    }
    https://github.com/cloudflare/workers-chat-demo

    View full-size slide

  20. コード(Subscribe)
    sessions: Session = {} // 接続しているクライアント情報を保持する
    // クライアントからSubscribeするエンドポイント
    this.app.get('/subscribe/:id', async (ctx) => {
    // <ここに何らかの認証を入れた方がよい(例えば JWT認証)>
    const id = ctx.req.param('id')
    const [client, server] = Object.values(new WebSocketPair())
    server.accept()
    this.sessions[id] = server
    return new Response('', {
    status: 101,
    webSocket: client,
    })
    })

    View full-size slide

  21. コード(Publish)
    sessions: Session = {}
    // サーバから指定の繋ぎ先にPublishするエンドポイント
    this.app.post('/publish/:id', async (ctx) => {
    // <ここに何らかの認証を入れた方がよい>
    const id = ctx.req.param('id')
    const payload = await ctx.req.text()
    const session = this.sessions[id]
    if (session) {
    session.send(
    typeof payload === 'string' ? payload : JSON.stringify(payload)
    )
    }
    })

    View full-size slide

  22. コード(使用例)
    // クライアント
    const socket = new WebSocket(
    ‘https:///subscribe/’
    )
    socket.onmessage = (e) => {
    console.log('onMessage!')
    // JSON.parse(e.data) で何らかの処理
    }
    // サーバ
    import axios from 'axios'
    const body = { test: ‘hoge’ }
    await axios.post(‘https:///publish/’, body)

    View full-size slide

  23. まとめ
    ● Cloudflare Workersで行う状態管理の手法はいくつかある
    ● プログラム処理や特性によって最適なものを選ぶ
    ● Durable Objectsについてはこちらに目を通すと理解が深まる
    ○ https://developers.cloudflare.com/workers/learning/using-durable-objects/
    ○ https://github.com/cloudflare/workers-chat-demo

    View full-size slide

  24. Thanks
    ご清聴ありがとうございました。
    https://about.goen-s.com/

    View full-size slide