リアルタイムチャットアプリケーションのデプロイ

Last reviewed: about 1 year ago

このチュートリアルでは、Durable Objectsを使用して実行されるサーバーレスのリアルタイムチャットアプリケーションをデプロイします。

このチャットアプリケーションは、各チャットルームを制御するためにDurable Objectを使用します。ユーザーはWebSocketを使用してオブジェクトに接続します。1人のユーザーからのメッセージは、他のすべてのユーザーにブロードキャストされます。チャット履歴も耐久性のあるストレージに保存されます。リアルタイムメッセージは、ストレージレイヤーを経由せずに、1人のユーザーから他のユーザーに直接中継されます。

このチュートリアルを続けるには、Workers Paid planを購入し、Cloudflareダッシュボード ↗にログインしてWorkers & Pages > 自分のWorkerを選択 > Durable Objectsを有効にする必要があります。

Before you start

All of the tutorials assume you have already completed the Get started guide, which gets you set up with a Cloudflare Workers account, C3 ↗, and Wrangler.

チャットアプリケーションリポジトリのクローン

ターミナルを開き、workers-chat-demo ↗リポジトリをクローンします：

git clone https://github.com/cloudflare/workers-chat-demo.git

Wranglerの認証

リポジトリをクローンしたら、次のコマンドを実行してWranglerを認証します：

npx wrangler login

プロジェクトのデプロイ

アプリケーションをデプロイする準備ができたら、次のコマンドを実行します：

npx wrangler deploy

アプリケーションは*.workers.devサブドメインにデプロイされます。

Cloudflareダッシュボード内のカスタムドメインにアプリケーションをデプロイするには、Worker > Triggers > Add Custom Domainに移動します。

Wranglerを使用してカスタムドメインにアプリケーションをデプロイするには、プロジェクトのwrangler.tomlを開きます。

wrangler.tomlでルートを構成するには、次の内容を環境に追加します：

routes = [
    { pattern = "example.com/about", zone_id = "<YOUR_ZONE_ID>" }
]

wrangler.tomlの環境にゾーンIDを指定している場合、オブジェクト形式で再度記述する必要はありません。

wrangler.tomlでサブドメインを構成するには、次の内容を環境に追加します：

routes = [
  { pattern = "subdomain.example.com", custom_domain = true }
]

ライブアプリケーションをテストするには：

edge-chat-demo.<SUBDOMAIN>.workers.devサブドメインを開きます。サブドメインはCloudflareダッシュボード ↗ > Workers & Pages > 自分のWorker > Triggers > Routes > edge-chat-demo.<SUBDOMAIN>.workers.devルートを選択することで見つけることができます。
your nameフィールドに名前を入力します。
公開ルームに入るか、プライベートルームを作成するかを選択します。
他の参加者にリンクを送信します。画面の右側でルームの参加者を確認できます。

アプリケーションのアンインストール

チャットアプリケーションをアンインストールするには、wrangler.tomlファイルを修正してdurable_objectsバインディングを削除し、deleted_classesマイグレーションを追加します：

[durable_objects]
bindings = [
]

# ChatRoomおよびRateLimiterクラスをDurable Objectsとして呼び出せるようにします。
[[migrations]]
tag = "v1" # 各エントリに対して一意である必要があります
new_classes = ["ChatRoom", "RateLimiter"]

[[migrations]]
tag = "v2"
deleted_classes = ["ChatRoom", "RateLimiter"]

その後、npx wrangler deployを実行します。

Workerを削除するには：

Cloudflareダッシュボード ↗にログインし、自分のアカウントを選択します。
アカウントホームでWorkers & Pagesを選択します。
Overviewで自分のWorkerを選択します。
Manage Service > Deleteを選択します。セットアップと削除の完全な手順については、クローンしたリポジトリのREADME.mdを参照してください。

このチュートリアルを完了することで、Durable ObjectsとCloudflare Workersを使用してリアルタイムチャットアプリケーションをデプロイしました。