はじめに

Cloudflare社は下記のCDN Edge上で動作するサービスを提供しています。サービスの概要は下記です。詳細は、表のリンクを参考にしてください。

下記の流れでCloudflare Workers KVに対してRead/Write可能な環境を開発/本番コンフィグ1つで作成出来ましたので、備忘用に記事にします。

Cloudflare Pages -> Cloudflare Workers -> Cloudflare Workers KV

wrangler設定

cargo入っているので、crago経由でインストールします

$ cargo install wrangler

下記のコマンドを実行するとブラウザが立ち上がり、簡単に初期設定が完了します

$ wrangler login
Allow Wrangler to open a page in your browser? [y/n]
y
(中略)
✨  Successfully configured. You can find your configuration file at: /Users/hoge/.wrangler/config/default.toml

Cloudflare Workersの構築

下記のコマンドで、簡単にWorkersのホスティングが完了します

$ wrangler generate my-worker
$ cd my-worker
$ wrangler publish

 https://my-worker.{ユーザーID}.workers.dev

環境ごとにCloudflare WorkersとClouflare Workers KVを構築

設計

名前空間設計

開発,本番にそれぞれ、下記の表のような形でWorkersとWorkers KVを構築します。

Cloudflare DNS設計

Cloudflare Workers KVの作成

出力されるpreview_id 1つとid 2つをメモしておいてください。後述する設定ファイルで利用します。

# ローカル開発
$ wrangler kv:namespace create "MY_KV" --env dev --preview
(中略)
kv_namespaces = [
         { binding = "MY_KV", preview_id = "xxxxid1" }
]

# 開発
$ wrangler kv:namespace create "MY_KV" --env dev
(中略)
kv_namespaces = [
         { binding = "MY_KV", id = "xxxxid2" }
]

# 本番
$ wrangler kv:namespace create "MY_KV" --env prd
(中略)
kv_namespaces = [
         { binding = "MY_KV", id = "xxxxid3" }
]

wrangler.toml

wrangler.tomlをモリモリ書きます

type = "javascript"
account_id = ""
zone_id = "****" # Overview画面の右サイドバーの下部からコピペ

# ローカルプレビュー用の設定
[env.pre]
name = "my-worker-pre"
workers_dev = true # routesがない場合に必要
kv_namespaces = [
  { binding = "MY_KV", preview_id = "xxxxid1" }
]

# 開発用の設定
[env.dev]
name = "my-worker-dev"
kv_namespaces = [
  { binding = "MY_KV", id = "xxxxid2" }
]
routes = ["api-dev.example.io/*"]

# 本番用の設定
[env.prd]
name = "my-worker"
kv_namespaces = [
  { binding = "MY_KV", id = "xxxxid3" }
]
routes = ["api-dev.example.io/*"]

動作確認用のCloudflare Workersのコード

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  // `kv_namespaces`を設定しているため、`MY_KV`でCloudflare Workers KVを参照可
  let value = await MY_KV.get("my-key");

  if (value === null) {
    value = new Date().getTime()
    await MY_KV.put("my-key", value)
  }

  return new Response(`${value ? value: 'nodata'}`, {
    headers: { 'content-type': 'text/plain' },
  })
}

Cloudflare Workersの作成

デプロイすると自動的に作成されます。

# 開発
wrangler publish --env dev

# 本番
wrangler publish --env prd

プレビュー方法

http://127.0.0.1:8787でローカルプレビュー出来ます。便利。

$ wrangler dev --env pre
💁  watching "./"
👂  Listening on http://127.0.0.1:8787

Cloudflare CDNの設定

Cloudflare DNS設計参考

※ Cloudflare Pagesは別途Custom domainsの設定が必要です。嵌ったら、Cloudflare PagesにApexドメインを設定しようとして嵌った話が少し参考になるかもしれません。

最後に

開発/本番CLIのコマンドで切り替えて Cloudflare Workers Cloudflare Workers KVの環境構築が出来ました。wranglerでDNS設定以外は完結したので、開発体験がよかったです。ただデプロイ時完璧に冪等な作りになっているわけではないので、デプロイ後に設定を確認する必要はあると思っています。

あまり新鮮味がなくてすいません。。。これから運用に向けて色々と気づいたことやTipsがあったら追記しようと思います。

参考資料

Cloudflare Workers KV の初歩 Cloudflare Workers KV をキャッシュとして使う