Open33
Remix Vite に Prisma / Turso の Early Access 版を入れて Cloudflare Pages で動くか実験する
Coji Mizoguchi無料枠の大きいサーバレスで SQLite 互換な分散 RDBMS サービス、Tursoがとてもいい感じだったのですが、
Prisma の Early Access 版で Cloudflare Pages (Workers) で動かせそうな雰囲気だったので実験してみます。
This Early Access lets you use Prisma Client on Cloudflare Workers, Cloudflare Pages, Vercel Edge Functions, or Vercel Edge Middleware.
...
Turso with @prisma/adapter-libsql
Coji MizoguchiRemix Vite の Cloudflare Pages テンプレートを元に、Tailwindcss, Prettier, Biome を入れたベースになるリポジトリを用意した。
とりあえず git 経由でデプロイして動いてます。
Coji Mizoguchiドキュメントを真似て、 @early-access なパッケージを入れます。
$ pnpm i prisma@early-access @prisma/client@early-access @prisma/adapter-libsql@early-ac
cess
WARN 2 deprecated subdependencies found: rollup-plugin-inject@3.0.2, sourcemap-codec@1.4.8
Packages: +30
++++++++++++++++++++++++++++++
Progress: resolved 891, reused 789, downloaded 9, added 30, done
node_modules/.pnpm/@prisma+engines@5.11.0-dev.46/node_modules/@prisma/engines: Running postinstall node_modules/.pnpm/@prisma+engines@5.11.0-dev.46/node_modules/@prisma/engines: Running postinstall script, done in 2.7s
node_modules/.pnpm/prisma@5.11.0-dev.46/node_modules/prisma: Running preinstall script, done in 29ms
node_modules/.pnpm/@prisma+client@5.11.0-dev.46_prisma@5.11.0-dev.46/node_modules/@prisma/client: Rnode_modules/.pnpm/@prisma+client@5.11.0-dev.46_prisma@5.11.0-dev.46/node_modules/@prisma/client: Running postinstall script, done in 263ms
dependencies:
+ @prisma/adapter-libsql 5.11.0-dev.46
+ @prisma/client 5.11.0-dev.46
+ prisma 5.11.0-dev.46
Done in 14.8s
prisma の初期化
$ pnpm prisma init
✔ Your Prisma schema was created at prisma/schema.prisma
You can now open it in your favorite editor.
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
Next steps:
1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started
2. Set the provider of the datasource block in schema.prisma to match your database: postgresql, mysql, sqlite, sqlserver, mongodb or cockroachdb.
3. Run prisma db pull to turn your database schema into a Prisma schema.
4. Run prisma generate to generate the Prisma Client. You can then start querying your database.
More information in our documentation:
https://pris.ly/d/getting-started
prisma/schema.prisma ファイルを編集します。
いつもテストで使ってるオーダーデータのモデルを入れます。
prisma/schema.prisma
generator client {
provider = "prisma-client-js"
previewFeatures = ["driverAdapters"]
}
datasource db {
provider = "sqlite"
url = "file:../data/dev.db"
}
model SampleOrder {
id String @id @default(cuid())
region String?
name String
email String
zip String
country String
prefecture String
city String
address String
phone String
note String?
createdAt String @map("created_at")
@@map("sample_orders")
}
開発中の環境変数を設定する .dev.vars と、ローカルでのデータベースファイルが保存されるディレクトリdataと、 を .gitignore に追加します。
.gitignore
node_modules
/.cache
/build
.env
.wrangler
+.dev.vars
+data
prisma migrate dev で、モデルからマイグレーションファイルを生成します。
$ pnpm prisma migrate dev
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": SQLite database "dev.db" at "file:../data/dev.db"
SQLite database dev.db created at file:../data/dev.db
✔ Enter a name for the new migration: … init
Applying migration `20240311064401_init`
The following migration(s) have been created and applied from new schema changes:
migrations/
└─ 20240311064401_init/
└─ migration.sql
Your database is now in sync with your schema.
✔ Generated Prisma Client (v5.11.0-dev.46) to ./node_modules/.pnpm/@prisma+client@5.11.0-dev.46_pri
sma@5.11.0-dev.46/node_modules/@prisma/client in 39ms
turso cli でデータベースを新規作成します。今回は cfpages-example という名前にしました。
$ turso db create cfpages-example
Created database cfpages-example at group default in 4.161s.
Start an interactive SQL shell with:
turso db shell cfpages-example
To see information about the database, including a connection URL, run:
turso db show cfpages-example
To get an authentication token for the database, run:
turso db tokens create cfpages-example
turso の token を作成します。token が表示されます。
$ turso db tokens create cfpages-example
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
turso の DB URL が必要なので cli で表示します。
$ turso db show cfpages-example
Name: cfpages-example
URL: libsql://cfpages-example-coji.turso.io
ID: b716b9a2-2216-49fa-8de3-a71d436484e7
Group: default
Version: 0.23.7
Locations: nrt
Size: 4.1 kB
Sleeping: No
Database Instances:
NAME TYPE LOCATION
nrt primary nrt
必要な設定を .dev.vars ファイルを作成して記載します。
TURSO_DATABASE_URL="libsql://cfpages-example-coji.turso.io"
TURSO_AUTH_TOKEN="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
load-context.ts に上記の環境変数の型を追記します。
load-context.ts
import type { PlatformProxy } from 'wrangler'
// When using `wrangler.toml` to configure bindings,
// `wrangler types` will generate types for those bindings
// into the global `Env` interface.
// Need this empty interface so that typechecking passes
// even if no `wrangler.toml` exists.
type Env = {
+ TURSO_DATABASE_URL: string
+ TURSO_AUTH_TOKEN: string
}
type Cloudflare = Omit<PlatformProxy<Env>, 'dispose'>
declare module '@remix-run/cloudflare' {
interface AppLoadContext {
cloudflare: Cloudflare
}
}
shadcn-ui いれたり、テスト用の jsx などを入れたりします。
この辺は一気にやったのであとでまとめてリポジトリみてください。
Coji Mizoguchiturso のデータベースをマイグレーションします。ちょいめんどい
$ turso db shell cfpages-example < prisma/migrations/20240311064401_init/migration.sql
prisma のこのドキュメントを参考にしました。
Coji Mizoguchicloudflare の場合環境変数 は process.env を使えず、 context.cloudflare.env の中に都度入っていて、
loader / action で都度それを参照して libsql client 及びそれをアダプターとした prisma client を作成するヘルパー関数を定義します。
app/services/turso.server.ts
import { createClient } from '@libsql/client'
import { PrismaLibSQL } from '@prisma/adapter-libsql'
import { PrismaClient } from '@prisma/client'
export const createTursoPrismaClient = (url: string, authToken: string) => {
const libsql = createClient({
url,
authToken,
})
const adapter = new PrismaLibSQL(libsql)
const prisma = new PrismaClient({
adapter,
log: ['query'],
})
return prisma
}
router で使う方はこんなかんじです。
export const loader = async ({ request, context }: LoaderFunctionArgs) => {
const prisma = createTursoPrismaClient(
context.cloudflare.env.TURSO_DATABASE_URL,
context.cloudflare.env.TURSO_AUTH_TOKEN,
)
const sampleOrders = await prisma.sampleOrder.findMany({
take: 10,
orderBy: { createdAt: 'desc' },
})
return json({sampleOrders})
}
ローカルで動かしてみましょう。
$ pnpm dev
> remix-vite-prisma-turso-cfpages-example@ dev /Users/coji/progs/spike/remix/remix-vite-prisma-turso-cfpages-example
> remix vite:dev
Using vars defined in .dev.vars
Using vars defined in .dev.vars
Using vars defined in .dev.vars
Using vars defined in .dev.vars
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
ブラウザでアクセスします。
SELECT 成功です。
Coji Mizoguchisubmit して insert もしてみます。
こちらも成功です。
select, insert ともにローカルでは 50~100ms 程度でできてますね。
Coji Mizoguchiさて、これまではローカル(nodejs)で動かしてたので動くのは当然でした。
wrangler pages dev でうごかしてみます。
Coji Mizoguchiまずは vite:build します。
$ pnpm build
> remix-vite-prisma-turso-cfpages-example@ build /Users/coji/progs/spike/remix/remix-vite-prisma-turso-cfpages-example
> remix vite:build
Using vars defined in .dev.vars
Using vars defined in .dev.vars
Using vars defined in .dev.vars
Using vars defined in .dev.vars
vite v5.1.5 building for production...
node_modules/.pnpm/next-themes@0.2.1_next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next-themes/dist/index.module.js (1:1576) A comment
"/*#__PURE__*/"
in "node_modules/.pnpm/next-themes@0.2.1_next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next-themes/dist/index.module.js" contains an annotation that Rollup cannot interpret due to the position of the comment. The comment will be removed to avoid issues.
node_modules/.pnpm/next-themes@0.2.1_next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next-themes/dist/index.module.js (1:2992) A comment
"/*#__PURE__*/"
in "node_modules/.pnpm/next-themes@0.2.1_next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next-themes/dist/index.module.js" contains an annotation that Rollup cannot interpret due to the position of the comment. The comment will be removed to avoid issues.
✓ 1588 modules transformed.
build/client/.vite/manifest.json 1.82 kB │ gzip: 0.38 kB
build/client/assets/root-Gv6mzGgd.css 13.78 kB │ gzip: 3.43 kB
build/client/assets/_app-NAehUJGd.js 1.63 kB │ gzip: 0.72 kB
build/client/assets/_app._id-tC-Pbn_z.js 3.26 kB │ gzip: 1.14 kB
build/client/assets/textarea-Cl-D2gnL.js 6.78 kB │ gzip: 2.63 kB
build/client/assets/entry.client-DbRsdzay.js 14.05 kB │ gzip: 5.00 kB
build/client/assets/utils-Bz47sbbS.js 20.75 kB │ gzip: 6.85 kB
build/client/assets/root-BqoJaWn0.js 29.61 kB │ gzip: 9.06 kB
build/client/assets/index-DfJni9ia.js 62.08 kB │ gzip: 21.16 kB
build/client/assets/_app._index-DphJOyPj.js 97.10 kB │ gzip: 26.70 kB
build/client/assets/components-CVvGzKWL.js 163.07 kB │ gzip: 52.90 kB
✓ built in 1.44s
Using vars defined in .dev.vars
Using vars defined in .dev.vars
vite v5.1.5 building SSR bundle for production...
✓ 21 modules transformed.
build/server/.vite/manifest.json 0.19 kB
build/server/assets/server-build-Gv6mzGgd.css 13.78 kB
build/server/index.js 31.11 kB
✓ built in 58ms
できました。
Coji Mizoguchi実行してみましょう。
$ pnpm run start
> remix-vite-prisma-turso-cfpages-example@ start /Users/coji/progs/spike/remix/remix-vite-prisma-turso-cfpages-example
> wrangler pages dev ./build/client
▲ [WARNING] No compatibility_date was specified. Using today's date: 2024-03-11.
Pass it in your terminal:
\`\`\`
--compatibility-date=2024-03-11
\`\`\`
See https://developers.cloudflare.com/workers/platform/compatibility-dates/
for more information.
Compiling worker to "/Users/coji/progs/spike/remix/remix-vite-prisma-turso-cfpages-example/.wrangler/tmp/pages-dvHrjy/functionsWorker-0.08687277647464886.mjs"...
✨ Compiled Worker successfully
⛅️ wrangler 3.32.0
-------------------
Using vars defined in .dev.vars
Your worker has access to the following bindings:
- Vars:
- TURSO_DATABASE_URL: "(hidden)"
- TURSO_AUTH_TOKEN: "(hidden)"
[wrangler:inf] Ready on http://localhost:8788
⎔ Starting local server...
✘ [ERROR] service core:user:worker: Uncaught ReferenceError: process is not defined
at null.<anonymous> (functionsWorker-0.08687277647464886.js:70559:45) in
../node_modules/.pnpm/@prisma+debug@5.11.0-dev.46/node_modules/@prisma/debug/dist/index.js
at null.<anonymous> (functionsWorker-0.08687277647464886.js:27:50) in
__require22
at null.<anonymous> (functionsWorker-0.08687277647464886.js:70718:28) in
../node_modules/.pnpm/@prisma+driver-adapter-utils@5.11.0-dev.46/node_modules/@prisma/driver-adapter-utils/dist/index.mjs
at null.<anonymous> (functionsWorker-0.08687277647464886.js:24:56) in __init
at null.<anonymous> (functionsWorker-0.08687277647464886.js:71082:5) in
../node_modules/.pnpm/@prisma+adapter-libsql@5.11.0-dev.46_@libsql+client@0.5.3/node_modules/@prisma/adapter-libsql/dist/index.mjs
at null.<anonymous> (functionsWorker-0.08687277647464886.js:24:56) in __init
at null.<anonymous> (functionsWorker-0.08687277647464886.js:76974:5) in
../build/server/index.js
at null.<anonymous> (functionsWorker-0.08687277647464886.js:24:56) in __init
at null.<anonymous> (functionsWorker-0.08687277647464886.js:77466:5) in
[[path]].ts
at null.<anonymous> (functionsWorker-0.08687277647464886.js:24:56) in __init
✘ [ERROR] MiniflareCoreError [ERR_RUNTIME_FAILURE]: The Workers runtime failed to start. There is likely additional logging output above.
あれれ、だめですね。
Coji Mizoguchi✘ [ERROR] service core:user:worker: Uncaught ReferenceError: process is not defined
at null.<anonymous> (functionsWorker-0.08687277647464886.js:70559:45) in
../node_modules/.pnpm/@prisma+debug@5.11.0-dev.46/node_modules/@prisma/debug/dist/index.js
うーん、prisma の debug?
Coji Mizoguchiprisma のデバッグログ出してたので消して試してみましょう。
app/services/turso.server.ts
import { createClient } from '@libsql/client'
import { PrismaLibSQL } from '@prisma/adapter-libsql'
import { PrismaClient } from '@prisma/client'
export const createTursoPrismaClient = (url: string, authToken: string) => {
const libsql = createClient({
url,
authToken,
})
const adapter = new PrismaLibSQL(libsql)
const prisma = new PrismaClient({
adapter,
- log: ['query'],
})
return prisma
}
build してから再度 start します。
$ pnpm build
> remix-vite-prisma-turso-cfpages-example@ build /Users/coji/progs/spike/remix/remix-vite-prisma-turso-cfpages-example
> remix vite:build
Using vars defined in .dev.vars
Using vars defined in .dev.vars
Using vars defined in .dev.vars
Using vars defined in .dev.vars
vite v5.1.5 building for production...
node_modules/.pnpm/next-themes@0.2.1_next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next-themes/dist/index.module.js (1:1576) A comment
"/*#__PURE__*/"
in "node_modules/.pnpm/next-themes@0.2.1_next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next-themes/dist/index.module.js" contains an annotation that Rollup cannot interpret due to the position of the comment. The comment will be removed to avoid issues.
node_modules/.pnpm/next-themes@0.2.1_next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next-themes/dist/index.module.js (1:2992) A comment
"/*#__PURE__*/"
in "node_modules/.pnpm/next-themes@0.2.1_next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next-themes/dist/index.module.js" contains an annotation that Rollup cannot interpret due to the position of the comment. The comment will be removed to avoid issues.
✓ 1588 modules transformed.
build/client/.vite/manifest.json 1.82 kB │ gzip: 0.38 kB
build/client/assets/root-Gv6mzGgd.css 13.78 kB │ gzip: 3.43 kB
build/client/assets/_app-NAehUJGd.js 1.63 kB │ gzip: 0.72 kB
build/client/assets/_app._id-tC-Pbn_z.js 3.26 kB │ gzip: 1.14 kB
build/client/assets/textarea-Cl-D2gnL.js 6.78 kB │ gzip: 2.63 kB
build/client/assets/entry.client-DbRsdzay.js 14.05 kB │ gzip: 5.00 kB
build/client/assets/utils-Bz47sbbS.js 20.75 kB │ gzip: 6.85 kB
build/client/assets/root-BqoJaWn0.js 29.61 kB │ gzip: 9.06 kB
build/client/assets/index-DfJni9ia.js 62.08 kB │ gzip: 21.16 kB
build/client/assets/_app._index-DphJOyPj.js 97.10 kB │ gzip: 26.70 kB
build/client/assets/components-CVvGzKWL.js 163.07 kB │ gzip: 52.90 kB
✓ built in 1.35s
Using vars defined in .dev.vars
Using vars defined in .dev.vars
vite v5.1.5 building SSR bundle for production...
✓ 21 modules transformed.
build/server/.vite/manifest.json 0.19 kB
build/server/assets/server-build-Gv6mzGgd.css 13.78 kB
build/server/index.js 31.09 kB
✓ built in 54ms
coji@coji-mba: ~/progs/spike/remix/remix-vite-prisma-turso-cfpages-example (main *=)
$ pnpm start
> remix-vite-prisma-turso-cfpages-example@ start /Users/coji/progs/spike/remix/remix-vite-prisma-turso-cfpages-example
> wrangler pages dev ./build/client
▲ [WARNING] No compatibility_date was specified. Using today's date: 2024-03-11.
Pass it in your terminal:
\`\`\`
--compatibility-date=2024-03-11
\`\`\`
See https://developers.cloudflare.com/workers/platform/compatibility-dates/
for more information.
Compiling worker to "/Users/coji/progs/spike/remix/remix-vite-prisma-turso-cfpages-example/.wrangler/tmp/pages-slWTso/functionsWorker-0.6247347841262545.mjs"...
✨ Compiled Worker successfully
⛅️ wrangler 3.32.0
-------------------
Using vars defined in .dev.vars
Your worker has access to the following bindings:
- Vars:
- TURSO_DATABASE_URL: "(hidden)"
- TURSO_AUTH_TOKEN: "(hidden)"
[wrangler:inf] Ready on http://localhost:8788
⎔ Starting local server...
✘ [ERROR] service core:user:worker: Uncaught ReferenceError: process is not defined
at null.<anonymous> (functionsWorker-0.6247347841262545.js:70559:45) in
../node_modules/.pnpm/@prisma+debug@5.11.0-dev.46/node_modules/@prisma/debug/dist/index.js
at null.<anonymous> (functionsWorker-0.6247347841262545.js:27:50) in
__require22
at null.<anonymous> (functionsWorker-0.6247347841262545.js:70718:28) in
../node_modules/.pnpm/@prisma+driver-adapter-utils@5.11.0-dev.46/node_modules/@prisma/driver-adapter-utils/dist/index.mjs
at null.<anonymous> (functionsWorker-0.6247347841262545.js:24:56) in __init
at null.<anonymous> (functionsWorker-0.6247347841262545.js:71082:5) in
../node_modules/.pnpm/@prisma+adapter-libsql@5.11.0-dev.46_@libsql+client@0.5.3/node_modules/@prisma/adapter-libsql/dist/index.mjs
at null.<anonymous> (functionsWorker-0.6247347841262545.js:24:56) in __init
at null.<anonymous> (functionsWorker-0.6247347841262545.js:76974:5) in
../build/server/index.js
at null.<anonymous> (functionsWorker-0.6247347841262545.js:24:56) in __init
at null.<anonymous> (functionsWorker-0.6247347841262545.js:77465:5) in
[[path]].ts
at null.<anonymous> (functionsWorker-0.6247347841262545.js:24:56) in __init
✘ [ERROR] MiniflareCoreError [ERR_RUNTIME_FAILURE]: The Workers runtime failed to start. There is likely additional logging output above.
うーん、やっぱだめ。process なんてないよと。
Coji Mizoguchiうーん、ここ臭いんだけど
../node_modules/.pnpm/@prisma+debug@5.11.0-dev.46/node_modules/@prisma/debug/dist/index.js
globalThis.DEBUG ?? (globalThis.DEBUG = process.env.DEBUG ?? "");
globalThis.DEBUG_COLORS ?? (globalThis.DEBUG_COLORS = process.env.DEBUG_COLORS ? process.env.DEBUG_COLORS === "true" : true);
DEBUG 設定してるのどこだろ。prisma の中？
Coji Mizoguchiぜんぜんわからない。
Coji Mizoguchiなにも考えずに本番にデプロイしてみよう。
Coji Mizoguchiデプロイしたけど、一緒で、駄目でした。なんでや😫
17:42:03.338 Cloning repository...
17:42:04.083 From https://github.com/coji/remix-vite-prisma-turso-cfpages-example
17:42:04.084 * branch 06118872b02d0561842ef9e94d89bcf2af582d5d -> FETCH_HEAD
17:42:04.085
17:42:04.124 HEAD is now at 0611887 Update PrismaClient log configuration
17:42:04.125
17:42:04.219
17:42:04.220 Using v2 root directory strategy
17:42:04.250 Success: Finished cloning repository files
17:42:04.928 Restoring from dependencies cache
17:42:04.949 Restoring from build output cache
17:42:09.784 Success: Dependencies restored from build cache.
17:42:09.868 Detected the following tools from environment: pnpm@8.7.1, nodejs@18.17.1
17:42:10.799 Installing project dependencies: pnpm install
17:42:11.558 Lockfile is up to date, resolution step is skipped
17:42:11.607 Progress: resolved 1, reused 0, downloaded 0, added 0
17:42:11.768 Packages: +770
17:42:11.768 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
17:42:12.609 Progress: resolved 770, reused 162, downloaded 0, added 122
17:42:13.638 Progress: resolved 770, reused 761, downloaded 0, added 758
17:42:14.404 Progress: resolved 770, reused 770, downloaded 0, added 770, done
17:42:17.601
17:42:17.601 dependencies:
17:42:17.601 + @conform-to/react 1.0.3
17:42:17.601 + @conform-to/zod 1.0.3
17:42:17.602 + @faker-js/faker 8.4.1
17:42:17.602 + @libsql/client 0.5.3
17:42:17.602 + @prisma/adapter-libsql 5.11.0-dev.46
17:42:17.603 + @prisma/client 5.11.0-dev.46
17:42:17.603 + @radix-ui/react-label 2.0.2
17:42:17.603 + @radix-ui/react-slot 1.0.2
17:42:17.603 + @radix-ui/react-tabs 1.0.4
17:42:17.603 + @remix-run/cloudflare 2.8.1
17:42:17.604 + @remix-run/cloudflare-pages 2.8.1
17:42:17.604 + @remix-run/react 2.8.1
17:42:17.604 + class-variance-authority 0.7.0
17:42:17.604 + clsx 2.1.0
17:42:17.604 + dayjs 1.11.10
17:42:17.604 + isbot 5.1.1
17:42:17.605 + lucide-react 0.354.0
17:42:17.605 + miniflare 3.20240304.0
17:42:17.605 + next-themes 0.2.1
17:42:17.605 + prisma 5.11.0-dev.46
17:42:17.606 + react 18.2.0
17:42:17.606 + react-dom 18.2.0
17:42:17.606 + react-twc 1.4.1
17:42:17.606 + remix-toast 1.2.0
17:42:17.606 + sonner 1.4.3
17:42:17.606 + tailwind-merge 2.2.1
17:42:17.606 + tailwindcss-animate 1.0.7
17:42:17.606 + zod 3.22.4
17:42:17.606
17:42:17.607 devDependencies:
17:42:17.607 + @biomejs/biome 1.6.0
17:42:17.607 + @cloudflare/workers-types 4.20240222.0
17:42:17.607 + @remix-run/dev 2.8.1
17:42:17.607 + @types/react 18.2.64
17:42:17.607 + @types/react-dom 18.2.21
17:42:17.607 + node-fetch 3.3.2
17:42:17.607 + npm-run-all 4.1.5
17:42:17.607 + postcss 8.4.35
17:42:17.607 + prettier 3.2.5
17:42:17.608 + prettier-plugin-organize-imports 3.2.4
17:42:17.608 + prettier-plugin-tailwindcss 0.5.12
17:42:17.608 + tailwindcss 3.4.1
17:42:17.608 + typescript 5.4.2
17:42:17.608 + vite 5.1.5
17:42:17.608 + vite-tsconfig-paths 4.3.1
17:42:17.608 + wrangler 3.32.0
17:42:17.608
17:42:17.636
17:42:17.637 > remix-vite-prisma-turso-cfpages-example@ postinstall /opt/buildhome/repo
17:42:17.637 > prisma generate
17:42:17.637
17:42:18.252 Prisma schema loaded from prisma/schema.prisma
17:42:19.010
17:42:19.010 ✔ Generated Prisma Client (v5.11.0-dev.46) to ./node_modules/.pnpm/@prisma+client@5.11.0-dev.46_prisma@5.11.0-dev.46/node_modules/@prisma/client in 61ms
17:42:19.010
17:42:19.010 Start using Prisma Client
17:42:19.010 ```
17:42:19.010 import { PrismaClient } from @prisma/client
17:42:19.011 const prisma = new PrismaClient()
17:42:19.011 ```
17:42:19.011
17:42:19.011 More information: https://pris.ly/d/client
17:42:19.011
17:42:19.011 ┌─────────────────────────────────────────────────────────────┐
17:42:19.011 │ Deploying your app to serverless or edge functions? │
17:42:19.012 │ Try Prisma Accelerate for connection pooling and caching. │
17:42:19.012 │ https://pris.ly/cli/accelerate │
17:42:19.012 └─────────────────────────────────────────────────────────────┘
17:42:19.012
17:42:19.226 Done in 8s
17:42:19.311 Executing user command: pnpm run build
17:42:20.031
17:42:20.031 > remix-vite-prisma-turso-cfpages-example@ build /opt/buildhome/repo
17:42:20.031 > remix vite:build
17:42:20.032
17:42:22.387 vite v5.1.5 building for production...
17:42:22.458 transforming...
17:42:25.692 node_modules/.pnpm/next-themes@0.2.1_next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next-themes/dist/index.module.js (1:1576) A comment
17:42:25.692
17:42:25.692 "/*#__PURE__*/"
17:42:25.693
17:42:25.693 in "node_modules/.pnpm/next-themes@0.2.1_next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next-themes/dist/index.module.js" contains an annotation that Rollup cannot interpret due to the position of the comment. The comment will be removed to avoid issues.
17:42:25.693 node_modules/.pnpm/next-themes@0.2.1_next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next-themes/dist/index.module.js (1:2992) A comment
17:42:25.693
17:42:25.693 "/*#__PURE__*/"
17:42:25.693
17:42:25.693 in "node_modules/.pnpm/next-themes@0.2.1_next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next-themes/dist/index.module.js" contains an annotation that Rollup cannot interpret due to the position of the comment. The comment will be removed to avoid issues.
17:42:26.430 ✓ 1588 modules transformed.
17:42:26.559 rendering chunks...
17:42:26.627 computing gzip size...
17:42:26.637 build/client/.vite/manifest.json 1.82 kB │ gzip: 0.38 kB
17:42:26.637 build/client/assets/root-Gv6mzGgd.css 13.78 kB │ gzip: 3.43 kB
17:42:26.637 build/client/assets/_app-NAehUJGd.js 1.63 kB │ gzip: 0.72 kB
17:42:26.638 build/client/assets/_app._id-tC-Pbn_z.js 3.26 kB │ gzip: 1.14 kB
17:42:26.638 build/client/assets/textarea-Cl-D2gnL.js 6.78 kB │ gzip: 2.63 kB
17:42:26.638 build/client/assets/entry.client-DbRsdzay.js 14.05 kB │ gzip: 5.00 kB
17:42:26.638 build/client/assets/utils-Bz47sbbS.js 20.75 kB │ gzip: 6.84 kB
17:42:26.638 build/client/assets/root-BqoJaWn0.js 29.61 kB │ gzip: 9.00 kB
17:42:26.638 build/client/assets/index-DfJni9ia.js 62.08 kB │ gzip: 21.12 kB
17:42:26.638 build/client/assets/_app._index-DphJOyPj.js 97.10 kB │ gzip: 26.69 kB
17:42:26.639 build/client/assets/components-CVvGzKWL.js 163.07 kB │ gzip: 52.87 kB
17:42:26.639 ✓ built in 4.22s
17:42:26.771 vite v5.1.5 building SSR bundle for production...
17:42:26.780 transforming...
17:42:26.949 ✓ 21 modules transformed.
17:42:26.965 rendering chunks...
17:42:26.967 build/server/.vite/manifest.json 0.19 kB
17:42:26.967 build/server/assets/server-build-Gv6mzGgd.css 13.78 kB
17:42:26.967 build/server/index.js 31.10 kB
17:42:26.968 ✓ built in 195ms
17:42:27.015 Finished
17:42:27.016 Found Functions directory at /functions. Uploading.
17:42:28.900 ✨ Compiled Worker successfully
17:42:29.032 Validating asset output directory
17:42:29.704 Deploying your site to Cloudflare's global network...
17:42:34.753 Uploading... (5/12)
17:42:35.460 Uploading... (7/12)
17:42:36.284 Uploading... (9/12)
17:42:36.356 Uploading... (12/12)
17:42:36.357 ✨ Success! Uploaded 7 files (5 already uploaded) (2.16 sec)
17:42:36.357
17:42:36.609 ✨ Upload complete!
17:42:37.715 Skipping build output cache as it's not supported for your project
17:42:38.662 Success: Assets published!
17:42:41.935 Error: Failed to publish your Function. Got error: Uncaught ReferenceError: process is not defined
at functionsWorker-0.379065524879282.js:66787:45 in ../node_modules/.pnpm/@prisma+debug@5.11.0-dev.46/node_modules/@prisma/debug/dist/index.js
at functionsWorker-0.379065524879282.js:18:50 in __require2
at functionsWorker-0.379065524879282.js:66945:28 in ../node_modules/.pnpm/@prisma+driver-adapter-utils@5.11.0-dev.46/node_modules/@prisma/driver-adapter-utils/dist/index.mjs
at functionsWorker-0.379065524879282.js:15:56 in __init
at functionsWorker-0.379065524879282.js:67296:5 in ../node_modules/.pnpm/@prisma+adapter-libsql@5.11.0-dev.46_@libsql+client@0.5.3/node_modules/@prisma/adapter-libsql/dist/index.mjs
at functionsWorker-0.379065524879282.js:15:56 in __init
at functionsWorker-0.379065524879282.js:73129:5 in ../build/server/index.js
at functionsWorker-0.379065524879282.js:15:56 in __init
at functionsWorker-0.379065524879282.js:73621:5 in [[path]].ts
at functionsWorker-0.379065524879282.js:15:56 in __init
wrangler pages dev に --node-compat 入れたら手元ではうごいた
- "start": "wrangler pages dev ./build/client",
+ "start": "wrangler pages dev --node-compat ./build/client",
cloudflare pages の本番のほうでは settings の function から Configure Production compatibility flags の設定が必要そうなのだが、ここに何を入れればよいのかわからない。
node-compat がいいのか、nodejs_compat がいいのか、node_compat がいいのか。みんな混乱してるみたい。
とりあえずUIのヘルプリンク先にあるこの記述を信用してみる
compatibility_flags = [ "nodejs_compat" ]
Coji Mizoguchiはい、だめでした。
20:37:10.870 Error: Failed to publish your Function. Got error: Uncaught ReferenceError: process is not defined
at functionsWorker-0.22490787114527144.js:66787:45 in ../node_modules/.pnpm/@prisma+debug@5.11.0-dev.46/node_modules/@prisma/debug/dist/index.js
at functionsWorker-0.22490787114527144.js:18:50 in __require2
at functionsWorker-0.22490787114527144.js:66945:28 in ../node_modules/.pnpm/@prisma+driver-adapter-utils@5.11.0-dev.46/node_modules/@prisma/driver-adapter-utils/dist/index.mjs
at functionsWorker-0.22490787114527144.js:15:56 in __init
at functionsWorker-0.22490787114527144.js:67296:5 in ../node_modules/.pnpm/@prisma+adapter-libsql@5.11.0-dev.46_@libsql+client@0.5.3/node_modules/@prisma/adapter-libsql/dist/index.mjs
at functionsWorker-0.22490787114527144.js:15:56 in __init
at functionsWorker-0.22490787114527144.js:73129:5 in ../build/server/index.js
at functionsWorker-0.22490787114527144.js:15:56 in __init
at functionsWorker-0.22490787114527144.js:73621:5 in [[path]].ts
at functionsWorker-0.22490787114527144.js:15:56 in __init
全部いれたった。
Coji Mizoguchi駄目でした
20:42:17.758 Error: Failed to publish your Function. Got error: No such compatibility flag: node_compat
No such compatibility flag: node-compat
Coji Mizoguchichimame さんのスクラップによれば
まず、RemixはCloudflare PagesかCloudflare Workersのどちらかで動作が可能。しかし、node_compat オプションを指定するにはCloudflare Pagesでは動作しない。なのでCloudflare Workersで作成する必要がある。
ということであった。なるほどな。。