🧊

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

ということがなんとかできたので、その記念に。

https://github.com/leader22/remix-cloudflare-pages-kv

Remixのバージョンが`1.2.1`の話。

基本の流れ

といっても、`create-remix`で`Cloudflare Pages`をデプロイ先に選んでプロジェクトを作るだけ。

ローカルでの開発にもちゃんと`wrangler@beta pages dev`コマンドを使ってくれるので、何も意識しなくていい。
(余談ですが、この`wrangler@beta`が本当にベータで〜すって感じで、その中でも安牌な使い方を選び取って使ってるRemixまじ偉いなって思った。)

Cloudflare Pagesへは、GitHubを連携すれば自動デプロイできるので、デプロイ用のコマンドがあるわけではない。

  • Pagesのダッシュボードにログインする
  • リポジトリ選ぶ
  • ビルドの設定をする(Remixのプリセットを選ぶ)
    • Build command: npm run build
    • Build output directory: /public

以上。

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ってメニューへ
  • さっき作ったネームスペースを連携
  • リビルド

最後のリビルドが重要。

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

というわけで

Remixは割とよくできてて、基本的にはCloudflare Pagesのベータ的なあれこれにとにかく引っかかるという感じ。