RemixをCloudflare Pages w/ Functionsでデプロイして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`オブジェクトからアクセスする必要がある。
ドキュメントのこのページに書いてあるようなグローバルからアクセスする方法は、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`から読んでくれるはず。
というわけで
Remixは割とよくできてて、基本的にはCloudflare Pagesのベータ的なあれこれにとにかく引っかかるという感じ。
