RemixをCloudflare Pages w/ FunctionsでデプロイしてKVも使う

コード

export const loader = async ({ context }) => {
  // ...

  const { keys } = await context.NAMESPACE.list();

  // ...
};

export const action = async ({ request, context }) => {
  // ...

  await context.NAMESPACE.put(name, desc);

  // ...
};

このように、`context`オブジェクトからアクセスする必要がある。

Remix | Data Loading

ドキュメントのこのページに書いてあるようなグローバルからアクセスする方法は、Pagesの場合は（module-syntaxなので）使えない。

Workersのテンプレを使った場合は（service-worker-syntaxなので）使える。

開発環境

`wrangler@beta pages dev`は、我らが`miniflare`を内包してるので、KVもエミュレートされたのが使える。

既に設定されてる`package.json`の`dev:wrangler`で、KVを使うことを`--kv NAMASPACE`で明示すればよい。

NAMESPACEのところは、コードの中で`context.`でアクセスしてたのと同じ名前。

- "dev:wrangler": "cross-env NODE_ENV=development wrangler pages dev ./public",
+ "dev:wrangler": "cross-env NODE_ENV=development wrangler pages dev ./public --kv NAMESPACE",

Pagesのデプロイには`wrangler.toml`の概念はないので、ひたすらCLI引数で足していくしかない風。`wrangler`コマンド自体はそれを解釈してる風ではあるが、`pages`サブコマンドがその設定をそもそも読んでないっぽいし。

これも、Workersのテンプレを使った場合は、`miniflare`をCLIとしてそのまま使ってるので`wrangler.toml`から読んでくれるはず。

本番環境

• Workersのダッシュボードにログイン
  • Pagesではない
• その中のKVのメニューから、新たなネームスペースを作成
• Pagesのダッシュボードに戻る
• 先に一度プロジェクトをビルドしてデプロイ
• すると出現する設定タブの中のFunctionsってメニューへ
• さっき作ったネームスペースを連携
• リビルド

最後のリビルドが重要。

一番最初にプロジェクトを作るためのデプロイ時は、バインディングを追加することは（なぜか）できないので、必ず壊れたビルドがデプロイされる・・！