Cloudflare Workersの実践的サンプルの紹介

はじめに

Cloudflare Workersの実践的なサンプルコードを事例を交えて紹介します。

すでにCloudflareを利用していてCloudflare Workersのことは知っているが、使い所が分からず手が出せてない方の参考となれば幸いです。

以下で紹介するコードはWebフレームワークの Hono を使って実装しています。Cloudflare Workersにいち早く対応し、シンプルかつ型システムを活用した堅牢なコードが書けるのでおすすめです。

サンプル1: オブジェクトストレージにデプロイしたHTMLにBASIC認証をかける

問題： AWSやGoogle Cloudのようなクラウド事業者が提供しているオブジェクトストレージでWebサイトを構築しているが、そのサイトにBASIC認証をかけたい。

解決方法：WebサイトのネームサーバーをCloudflareに移行した上で、下記のWorkersを作成します。Workersのルート設定を行い、Workers→オブジェクトストレージの流れでリクエストが処理されるように設定します。

1import { Hono } from "hono";
2import { basicAuth } from "hono/basic-auth";
3
4const app = new Hono<{ Bindings: CloudflareBindings }>();
5
6app.all("*", basicAuth({ username: "username", password: "password" }), (c) => {
7  return fetch(c.req.url);
8});
9
10export default app;

サンプル2: ルールにそってURLを書き換えてリダイレクトする

問題：複数のサブドメインにわかれているシステムを運用しているが、外部のシステムと連携するにあたって、連携先のドメインが1つしか登録できない。

解決方法：下記のWorkersを作成してカスタムドメイン設定を行い、そのドメインを外部連携先として利用します。このサンプルコードでは、URLを加工してリダイレクトしていますが、マッピング表をコード上に持つようにしたり、外部に保存したマッピングを参照してリダイレクトすることも可能です。

1import { Hono } from 'hono';
2
3const app = new Hono();
4const domain = "example.com";
5
6app.get('/:subdomain/', (c) => {
7	const { subdomain } = c.req.param();
8	const url = `https://${subdomain}.${domain}/`;
9	return c.redirect(url);
10});
11
12export default app;

使用例：

1https://redirect.example.com/aaa/ => https://aaa.example.com/
2https://redirect.example.com/bbb/ => https://bbb.example.com/

サンプル3: APIとして使える簡易的なKVS

問題：一時的なデータの保存場所としてMemcachedやRedisのようなKVSが必要になったが、サーバーを立ち上げたりクラウド上のサービスを使うとなると費用がかかるので、お金がかからない方法で検証までは行いたい。

解決方法：Cloudflare Workersに付随するサービスであるCloudflare Workers KV(以下KV)を使ってデータの保存と読み取りを行うWorkersを作成します。事前にKVの名前空間の作成を行います。その後、下記のコードのWorkersを作成してデプロイします。

1import { Hono } from "hono";
2
3export interface Bindings {
4  kvs: KVNamespace;
5}
6
7const app = new Hono<{ Bindings: Bindings }>();
8
9app.post("/set/:key", async (c) => {
10  const key = c.req.param("key");
11  const obj = await c.req.json();
12
13  await c.env.kvs.put(key, JSON.stringify(obj));
14
15  return c.json({});
16});
17
18app.get("/get/:key", async (c) => {
19  const key = c.req.param("key");
20  return c.json(JSON.parse((await c.env.kvs.get(key)) || "{}"));
21});
22
23export default app;

使用例：

1$ curl -X POST -H "Content-Type: application/json" -d '{"Name":"aaaa", "Age":"100"}' https://kvs-sample.****.workers.dev/set/123
2{}
3
4$ curl https://kvs-sample.****.workers.dev/get/123
5{"Name":"aaaa","Age":"100"}