Remix + Vite on Cloudflare Pages で Prisma Edge Support(Preview) を使ってPostgresqlに接続する

とり

以前に

Cloudflare Workers
Remix
Prisma
Prisma Accelerate (Edgeから叩く用)
SupabaseのPostgreSQL

で作成していたプロジェクトを

Cloudflare Pages
Remix + Vite
Prisma Edge Support (Preview)
SupabaseのPostgreSQL

に移行したい

とり

詰まったとこ（Remix → Remix + Vite）

CFでの環境変数の取り方が若干変わっていた

ドキュメントを読むと大体解決する

export const loader: LoaderFunction = ({ context }: LoaderFunctionArgs) => {
-    const { env } = context;
+    const { env } = context.cloudflare;
    ...
};

サーバーのコードを明示する方法が変わった

- **/*.server.ts
+ **/.server/**/*.ts

とり

詰まったとこ（Prisma Accelerate → Prisma Edge Support）

基本これを読めばなんとかなる

`node-postgres`がめちゃめちゃNode API使っててwranglerでエラーが出る

Cloudflare Workers/Pages Functionsは原則としてNode互換ではない。
上の記事をよく読むと、node-compatをtrueにせよ、とか書いてある。
Cloudflareには特定のフラグを立てると、Node APIを使えるようになるらしい。
ただし、似たようなフラグが複数あるとわかった

上の記事では

wrangler.toml

compatibility_flags = [ "nodejs_compat" ]

およびエイリアスのCLIオプションである--compatibility-flagsについてのみ述べられている。
しかし、これはnode_modulesのライブラリも含めて全てのNode API使用箇所に対してnode:prefixが付いていることを要求するので、なかなか厳しい。

しかし、別のページ

を見ると、Node APIのPollyfillを使用するオプション(--node-compat)があることがわかる。
これを使うと、prefixがないライブラリも含めてNode API依存のものを普通に使うことができる。
Pollyfill自体は別のプロジェクト(https://github.com/ionic-team/rollup-plugin-node-polyfills/ )に依存しており、なかなか使うのが怖いものの、まあ動くのでよしとする。

今回はCloudflare Pagesを使うので、現状のところwrangler.tomlを読んでくれるわけではない。よってCLIオプションにてwranglerをNode互換に設定する。

とり

よし！bun run buildからのbun run startが動いたし、あとはデプロイするだけ！
と思っていたら、上の--node-compatフラグがどうやらWorkersでしか対応していない模様…
結局、Workersで動かすしかないのか…

とり

これが役立ちそう

とり

よく読んだら、PrismaのEdge Supportのページに、Cloudflare PagesでのWorkaroundについて以下のリンクが貼ってあった。