Zenn
Open6

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

Cloudflare
Prisma
Vite
Remix
とりとり

以前に

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

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

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

に移行したい

とりとり

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

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

ドキュメントを読むと大体解決する
https://remix.run/docs/en/main/future/vite#cloudflare-proxy

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

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

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

https://remix.run/docs/en/main/future/vite#splitting-up-client-and-server-code

とりとり

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

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

https://www.prisma.io/docs/orm/prisma-client/deployment/edge/deploy-to-cloudflare#postgresql-traditional

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

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

wrangler.toml
compatibility_flags = [ "nodejs_compat" ]

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

しかし、別のページ
https://developers.cloudflare.com/workers/wrangler/configuration/#node-compatibility
を見ると、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互換に設定する。