Zenn
Closed7

Remix on Cloudflare Workers でKVを使う

Cloudflare
microCMS
Cloudflare Workers
Remix
Hi MORISHIGEHi MORISHIGE

Cloudflare Workers上でKVを使ってmicrocmsのコンテンツをキャッシュするメモ

とりあえず自作ボイラープレートから

$ npx create-remix@latest --template himorishige/remix-cloudflare-workers-boilerplate
Hi MORISHIGEHi MORISHIGE
$ npx create-remix@latest --template himorishige/remix-cloudflare-workers-boilerplate
? Where would you like to create your app? remix-cf-kv-sample
? Do you want me to run `npm install`? Yes
? TypeScript or JavaScript? TypeScript
💿 That's it! `cd` into "remix-cf-kv-sample" and check the README for development and deploy instructions!
Hi MORISHIGEHi MORISHIGE

KVを作成

$ wrangler kv:namespace create "BLOG_CONTENTS"
 ⛅️ wrangler 2.0.7 
-------------------
🌀 Creating namespace with title "remix-cf-kv-example-BLOG_CONTENTS"
✨ Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "BLOG_CONTENTS", id = "b237c8db78b349629afe05fd8642932b" }

dev用にpreviewも作成

$ wrangler kv:namespace create "BLOG_CONTENTS" --preview
 ⛅️ wrangler 2.0.7 
-------------------
🌀 Creating namespace with title "remix-cf-kv-example-BLOG_CONTENTS_preview"
✨ Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "BLOG_CONTENTS", preview_id = "f24fc546f4ef456f883d74a75d19f19c" }

bindings.d.tsに追記

types/bindings.d.ts
export {};

// cloudflare/workers-types
// https://github.com/cloudflare/workers-types#using-bindings
declare global {
  const __STATIC_CONTENT: KVNamespace;
  const BLOG_CONTENTS: KVNamespace;
}

wrangler.tomlに追記

wrangler.toml
name = "remix-cf-kv-example"
main = "./build/index.js"
compatibility_date = "2022-04-05"

account_id = ""
workers_dev = true

kv_namespaces = [
  { binding = "BLOG_CONTENTS", id = "b237c8db78b349629afe05fd8642932b", preview_id = "f24fc546f4ef456f883d74a75d19f19c" }
]

[env.dev]
kv_namespaces = [
  { binding = "BLOG_CONTENTS", id = "b237c8db78b349629afe05fd8642932b", preview_id = "f24fc546f4ef456f883d74a75d19f19c" }
]

[site]
bucket = "./public"

[build]
command = "npm run build"
Hi MORISHIGEHi MORISHIGE
$ wrangler kv:namespace create "STORE_KV"  
 ⛅️ wrangler 2.0.7 
-------------------
🌀 Creating namespace with title "remix-cloudflare-workers-STORE_KV"
✨ Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "STORE_KV", id = "de0fc354b006477d95156c507aa8c076" }
Hi MORISHIGEHi MORISHIGE
wrangler.toml
name = "remix-cloudflare-workers"
main = "./build/index.js"
compatibility_date = "2022-04-05"

account_id = ""
workers_dev = true

kv_namespaces = [
  { binding = "STORE_KV", id = "de0fc354b006477d95156c507aa8c076" }
]

[site]
bucket = "./public"

[build]
command = "npm run build"
Hi MORISHIGEHi MORISHIGE
types/bindings.d.ts
export {};

// cloudflare/workers-types
// https://github.com/cloudflare/workers-types#using-bindings
declare global {
  const STORE_KV: KVNamespace;
}
Hi MORISHIGEHi MORISHIGE

microcmsの準備

$ npm install microcms-js-sdk

secretの追加

$ wrangler secret put MICROCMS_SERVICE_DOMAIN           
 ⛅️ wrangler 2.0.7 
-------------------
Enter a secret value: ***** 
🌀 Creating the secret for script remix-cf-kv-example 
✨ Success! Uploaded secret MICROCMS_SERVICE_DOMAIN

$ wrangler secret put MICROCMS_API_KEY       
 ⛅️ wrangler 2.0.7 
-------------------
Enter a secret value: ************************************ 
🌀 Creating the secret for script remix-cf-kv-example 
✨ Success! Uploaded secret MICROCMS_API_KEY

dev用

$ wrangler secret put MICROCMS_SERVICE_DOMAIN --env dev
 ⛅️ wrangler 2.0.7 
-------------------
Enter a secret value: ***** 
🌀 Creating the secret for script remix-cf-kv-example-dev 
✨ Success! Uploaded secret MICROCMS_SERVICE_DOMAIN

$ wrangler secret put MICROCMS_API_KEY --env dev       
 ⛅️ wrangler 2.0.7 
-------------------
Enter a secret value: ************************************ 
🌀 Creating the secret for script remix-cf-kv-example-dev 
✨ Success! Uploaded secret MICROCMS_API_KEY
このスクラップは2022/06/05にクローズされました