リアルタイムチャットアプリをデプロイする

このチュートリアルでは、Durable Objects で動くサーバーレスのリアルタイムチャットアプリをデプロイします。

このチャットアプリは、各チャットルームを Durable Object で制御します。ユーザーは WebSocket で Object に接続します。あるユーザーのメッセージは、ほかのすべてのユーザーへ配信されます。チャット履歴は永続ストレージにも保存されます。リアルタイムのメッセージは、ストレージ層を経由せず、あるユーザーからほかのユーザーへ直接中継されます。

始める前に

すべてのチュートリアルは、Cloudflare Workers アカウント、C3 ↗、および Wrangler のセットアップが完了している前提です。セットアップは Get started ガイドで行います。

チャットアプリのリポジトリをクローンする

ターミナルを開き、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 設定ファイルを開きます。

Wrangler 設定ファイルでルートを設定するには、環境に次を追加します。

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

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

Wrangler 設定ファイルの環境にゾーン ID を指定済みなら、オブジェクト形式で再度書く必要はありません。

Wrangler 設定ファイルでサブドメインを設定するには、環境に次を追加します。

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

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

公開中のアプリケーションを試すには、次の手順を行います。

Cloudflare ダッシュボードで、Workers & Pages ページを開きます。
Workers & Pages を開く ↗
Worker を選び、Triggers > Routes を開き、edge-chat-demo.<SUBDOMAIN>.workers.dev ルートを選びます。
your name 欄に名前を入力します。
公開ルームに入るか、非公開ルームを作るかを選びます。
リンクをほかの参加者に送ります。画面右側でルームの参加者を確認できます。

アプリケーションをアンインストールする

チャットアプリをアンインストールするには、Wrangler ファイルを編集して durable_objects バインディングを削除し、deleted_classes のマイグレーションを追加します。

{
	"durable_objects": {
		"bindings": []
	},
	// Indicate that you want the ChatRoom and RateLimiter classes to be callable as Durable Objects.
	"migrations": [
		{
			"tag": "v1",
			"new_sqlite_classes": [
				"ChatRoom",
				"RateLimiter"
			]
		},
		{
			"tag": "v2", // Should be unique for each entry
			"deleted_classes": [
				"ChatRoom",
				"RateLimiter"
			]
		}
	]
}

[durable_objects]
bindings = [ ]

[[migrations]]
tag = "v1"
new_sqlite_classes = [ "ChatRoom", "RateLimiter" ]

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

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

Worker を削除するには、次の手順を行います。

Cloudflare ダッシュボードで、Workers & Pages ページを開きます。
Workers & Pages を開く ↗
Overview で対象の Worker を選びます。
Manage Service > Delete を選びます。セットアップと削除の詳細は、クローンしたリポジトリの README.md を参照してください。

このチュートリアルを完了すると、Durable Objects と Cloudflare Workers でリアルタイムチャットアプリをデプロイできています。