Closed10

[Scrap] 「仕事で使うための Cloudflare Workers 入門」をやってみる

ヘブンヘブン

mizchi さんが研修資料っぽいものを公開してくれていたので、ちょっとやってみる。
https://zenn.dev/mizchi/articles/cf-worker-introduce-for-pro

ヘブンヘブン

wrangler types を叩くと それらのバインディング定義に合わせて API の型定義ファイル worker-configuration.d.ts を生成します。

こういう感じなんだ。

ヘブンヘブン

こんな感じで、prod 配下に kv_namespaces を書かずに env と並列に書いてしまっていたら、参照エラーになってしまった。見逃してたけど、deploy 時に CLI 上で注意喚起のメッセージが表示されていた。

	"env": {
		"prod": {
			"vars": {
				"XXX": "PROD"
			}
		}
	},
	"kv_namespaces": [
		{
			"binding": "test_kv",
			"id": "some_key"
		}
	],

env.prod 配下に移動させたら動作するようになった。

ヘブンヘブン

二日目

二日目は Durable Objects がトピックのよう。新たにプロジェクトを作る感じ。(毎回プロジェクトを作成する感じっぽい)
https://zenn.dev/mizchi/articles/cf-worker-for-pro-day2

ヘブンヘブン

プロキシサーバーをつくる人には興味がないかもしれませんが、Cloudflare Workers は静的アセット配信が組み込まれています。

便利そう。

そのまま deploy するだけで、API 叩く簡易 web アプリみたいなのができた。なるほど!

ヘブンヘブン

Cloudflare Workers を学ぶなら、Durable Objects について知っておく必要があります。これは(おそらく)他サービスの基盤であり、これで実現できるかどうかが Cloudflare で実現可能か考える際の物差しになります。

なるほど。

ヘブンヘブン

読み進める前に、先に初期テンプレートの index.ts のコードとコードコメント読んどこ。

Durable Object の振る舞いは Javascript の Class で定義する

export class MyDurableObject extends DurableObject {
}

DurableObject 継承クラスで定義されたメソッドは RPC のメソッドになる

export class MyDurableObject extends DurableObject {
	async sayHello(name: string): Promise<string> {
		return `Hello, ${name}!`;
	}
}

なんかちょっと面白いな。現時点だとまだ全然理解してないけど、Durable Objects が分離されたちっこいサーバとして動くのかな? 記事に戻ろう。

ヘブンヘブン

Counter ができた。大分面白い。

シンプルな実装で、かつ、動作が直結してる感じがしていいな。

ヘブンヘブン

これをユーザー個別のカウンタにしましょう。リクエストユーザーごとに cookie を読み取る、または Set-Cookie を返して、ユーザーごとにアクセスカウンタを設定します。

Cookie 来たー!って感じだ。

シークレットウィンドウで開いたらステートがリセットされてた。これ面白いな。

ヘブンヘブン

Durable Objects に WebSocket から繋ぐ

若干満足してるけど、凄そうなので一応やっておく。

...写経だけやった。

これで作れそうなことを思いついたので、この辺りで記事を読むのをストップしよう。

このスクラップは5ヶ月前にクローズされました