オープニング

もういくつ寝るとクリスマスになりますね
エイチームフィナジーアドベントカレンダー15日目は @yothio が担当します。僕は普段サービスの開発・保守などを行っています、今回はサービスで活用しているCloudflare、その中の最近一般公開されたDurable Objectsについてお話しできればなと思います。

Cloudflareって？

Cloudflareについてご存知でしょうか？
CDNとして活用するのが個人的には比較的多いのかと考えますが、改めて見てみましょう

Cloudflareは、インターネット上で運営されている最大のネットワークの1つです。
ユーザーは、Webサイトやサービスのセキュリティとパフォーマンスを向上させる目的でCloudflareサービスを利用しています。

なるほど、つまりこういうことですね

最大のネットワークの1つである
使用することでセキュリティやパフォーマンスを向上できる

「最大のネットワーク」であることはCloudflareにかかわらず理解できると思うので
「どのようにセキュリティやパフォーマンスを向上させているのか」についてもう少し見ていきましょう

CDN(Content Delivery Network)

Cloudflareには一般的にCDNというネットワークが構築されており、Cloudflare経由でコンテンツ(画像、スタイルシートなど)を配信する際にリクエストを送信するクライアントと地理的に近いCloudflareのサーバーからコンテンツを返却する事ができます。

具体的な例としては、AWSのマシンを使用してWebサービスを展開していたとしましょう。
そのWebサーバーはアメリカのオレゴン(us-west-2)に配置しており、そのサービスにアップロードされた画像なども同様にオレゴンリージョンのS3バケットに保存することとします。

私は大阪に居る状態でそのWebサービスへアクセスした場合
下記のようにサーバからのHTMLを受け取った後、HTMLにS3バケットのURLがimgタグに記載されていた場合、画像のダウンロードが実行され、ページが完全に表示されるまでに時間がかかるのは容易に想像できるかと思います。

大阪 <---> EC2(オレゴン)
大阪 <---> 画像(オレゴン)

では、仮にCloudflareを使用していた場合はどうなるでしょうか

大阪 <---> EC2(オレゴン)
大阪 <---> CDNエッジサーバー(大阪) <---> 画像(オレゴン)

サーバからのHTMLを受け取るところまでは先ほどと同じですが、画像のダウンロードの箇所についてはCDNエッジサーバーが大阪にてキャッシュを保持しており、オレゴンまで画像を取得する必要はありません。
このようにCDN上でコンテンツをキャッシュさせることによってWebサイトのパフォーマンスに寄与します。

Durable Objectsについて

脱線しすぎましたね...
それでは本題のDurable Objectsについて見ていきましょう

Durable Objectsは昨年(2020年)にベータ版が公開され、先月一般公開されました

Durable Objectsの特性としては

グローバルな一意性とトランザクションストレージAPIの2つの機能を通じて
ワーカープラットフォームに低レイテンシの調整と一貫したストレージを提供します。

1つずつ読み解いていきましょう。
まずDurable Objectsについて理解を深める上でとても大事なのが「ワーカープラットフォーム」という箇所ですね

ワーカープラットフォーム

Cloudflare にはバックエンドのサーバーを用意せずにエッジネットワーク上で処理を実行できるサーバーレスのCloudflare Workersがあります。
今回Durable Objectsが指しているワーカープラットフォームというのもこちらのCloudflare Workersのことになります。

また、Cloudflare Workers以外にもフロントエンドアプリケーションをデプロイできるCloudflare Pagesが存在し、そちらでもDurable Objectsが使用できます

また、他のサーバーレスだとAWS LambdaやGoogle Cloud Functions などがありますね

低レイテンシの調整と一貫したストレージ

低レイテンシーということは、遅延が少なく
一貫したストレージということは、データ変更前後で整合性が取れているということでしょう

また一般公開時のブログに載っているように、Socketを使うことでリアルタイム性のあるチャットやホワイトボードなど様々なことが実現可能になりますね

実際に触ってみましょう

CloudflareがDurable Objectsについていくつかサンプルのコード・テンプレートなどがあるのでそちらを使用してデプロイして動作させるところまでやってみましょう

手順

リポジトリのクローン
wranglerのインストールとセットアップ
Workersのプランを有料に変更
デプロイコマンド実行

リポジトリのクローン

今回はこちらのシンプルなカウンターだけのテンプレートを使用します

$ git clone git@github.com:cloudflare/durable-objects-template.git
$ cd durable-objects-template

wranglerのインストールとセットアップ

cliでCloudflare Workersにデプロイするためにwranglerをインストールします
wranglerのREADEMEに書いてある通りコマンドを実行します

その後、loginコマンドを実行してCloudflareのアカウントと紐付けます

$ npm i @cloudflare/wrangler -g

$ wrangler login
Allow Wrangler to open a page in your browser? [y/n]
y
💁  Opened a link in your default browser: https://dash.cloudflare.com/oauth2/auth?XXXXXXX
✨  Successfully configured. You can find your configuration file at: /Users/[USERNAME]/.wrangler/config/default.toml

実際にログインコマンドを実行するとブラウザで認証が行われ
許可をした後に再度terminalに戻るとSuccessfullyという文字とともにtokenなどが記載されたdefault.tomlが作成されます

↓Wranglerでログイン時のブラウザ認証

Workersのプランを有料に変更

CloudflareのダッシュボードのWorkers -> プランを選択して、無料プランになっている箇所を有料に変更します。
これはDurable Objectsを使用できるのはWorkersのプランが有料の場合のみのためです。

無料だと使用することはできませんが、Cloudflare Workers自体は使用できます。

※ こちらに貼ってある画面と現在は異なる恐れがあります

デプロイコマンド実行

準備は整ったので後はデプロイするだけ、初回のDurable Objects使用時にはブラウザの方で確認されるはずです

$ wrangler publish

デプロイ後、Cloudflareのダッシュボードから該当のWorkers -> ルートを選択して実際ブラウザからアクセスしてみましょう

今回デプロイしたサンプルは簡易なカウンターでワーカーのルートに対して/increment,/decrementで値を増減できるものになります

余談

元々はプライベートでチャットを作成したいなと思っていたところ、Cloudflare のDurable ObjectsがGAされたことを聞いたことがきっかけでした
しかし、プライベートでチャットを使用する期日までにクレジットカードの承認が通らず、有料プランに切り替えれず、チャットを利用することを断念しました...悲しいね。

また、今回はシンプルなテンプレートを使用しましたが
他にはRollupやWebpackを使用したテンプレートやチャットのデモなどがありますのでぜひ触ってみてください

エンディング

少し口下手なところもあったかと思いますが、Cloudflare、Durable Objectsについて少しでも知っていただければ嬉しく思います。

また、今回紹介したDurable Objects以外にも

KVストアとして使えるCloudflare KV
ページのデプロイホスティングなどを行えるCloudflare Pages
同一IPからの短時間アクセスを検知してブロックなどを行うRateLimit

などCloudflareではセキュリティやパフォーマンス、ソリューションのためツールをいくつも提供しているので
ぜひ使ってみてください（Freeプランもあるよ）

最後まで読んでくれてありがとうございました

CloudflareのDurable Objectsをかる〜くご紹介