ブラウザでPrismaを試せるプレイグラウンドを作りたかった
tekihei2317動機
Prismaはとても使いやすいツールですが、それなりに機能が多く、全く知らないところから使えるようになるまでに少しハードルがあると感じています。人に勧めようとしたときに、どのドキュメントを渡せばいいのかが分かりませんでした。
そのため、ブラウザでPrismaを試せるプレイグラウンドを作って、学習コストを小さくできればと考えました。
ところで以前Svelteに入門したのですが、チュートリアルが非常に分かりやすかったのが印象的でした。読んで実際に動かすと、実践投入できそうだと感じるくらい理解することができました。Prismaでもそのようなチュートリアルを作ってみたいです。
Svelteのチュートリアル自体は付属のPlaygroundではなく環境構築して動かしたのですが（インテリセンスがなかったので）、Playgroundがあることは手軽に入門するきっかけになると思います。
tekihei2317目的
- Prismaを布教するために、気軽に試せるプレイグラウンドを作ること
- Prismaの仕組みの理解を深めること。エッジ関数では動かないという話があった[1]ので、それが解決される過程を理解したい。また、自分でORMを作りたいのでその時の参考にしたい。
- 自分が作りたいものを作ることを楽しむこと
- 最終的には、Prismaのプレイグラウンドを埋め込んでチュートリアルを作成したい。Svelteのチュートリアルが分かりやすく、終わらせれば実践投入できそうだと感じたので、Prismaもそうなるようにしたい。
tekihei2317プレイグラウンドでできること
- Prisma Schemaを記述すると、その通りのデータベースを作成できる。差分のマイグレーションは一旦考えない。
- Prisma Clientを記述するときに、TypeScriptの補完ができる
- Prisma Clientを実行すると、クエリの結果が確認できる。console.logした結果を出力するのと、データベースのブラウジングができるといいと思う。
ちなみに、Prismaには公式のプレイグラウンドが用意されている。
使ってみたところ、スキーマを変更することができなかったので、APIを確認するときに使うのが主な用途なのかなと感じた。また、Prismaでカラムを入力するときにcmd + i(VSCode)の補完をしばしば使うので、それが使えないのが少し気になった。
TypeScript Playgroundのように広く使われるものを目指したい。また、VSCodeに慣れているのでMonaco Editorをベースに作りたい。
tekihei2317Prisma Clientをどこで動かすか
ブラウザ上でTypeScriptでツールを作成・実行できるサービス「Moyuk」を支える技術を参考に、Prisma Clientを動かす場所を考える。
まず、サーバーはなるべく用意したくないのでクライアント側で実行したい。クライアント側で一番Node.jsに近い環境なのはWebContainer(Stackblitz)っぽかったので、まずはStackblitzでPrismaが動かせるかどうかを試してみた。
結論から言うと、StackblitzではPrismaを動かすことはできないようだった。理由は、PrismaのEngineがRustのバイナリで、それを動かせないからだ。詳細は次のIssueに書かれている。
具体的には、マイグレーションを実行したときや、クエリを実行したときに次のようなエラーが発生した。
マイグレーションを実行したとき:
❯ prisma migrate dev --name init
prisma:warn Prisma failed to detect the libssl/openssl version to use, and may not work as expected. Defaulting to "openssl-1.1.x".
Please manually install OpenSSL and try installing Prisma again.
prisma:warn Prisma doesn't know which engines to download for the Linux distro "undefined". Falling back to Prisma engines built "debian".
Please report your experience by creating an issue at https://github.com/prisma/prisma/issues so we can add your distro to the list of known supported distros.
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": SQLite database "dev.db" at "file:./dev.db"
prisma:warn Prisma failed to detect the libssl/openssl version to use, and may not work as expected. Defaulting to "openssl-1.1.x".
Please manually install OpenSSL and try installing Prisma again.
prisma:warn Prisma doesn't know which engines to download for the Linux distro "undefined". Falling back to Prisma engines built "debian".
Please report your experience by creating an issue at https://github.com/prisma/prisma/issues so we can add your distro to the list of known supported distros.
Error: Migration engine error:
クエリを実行したとき:
❯ node index.mjs
prisma:warn Prisma failed to detect the libssl/openssl version to use, and may not work as expected. Defaulting to "openssl-1.1.x".
Please manually install OpenSSL and try installing Prisma again.
prisma:warn Prisma doesn't know which engines to download for the Linux distro "undefined". Falling back to Prisma engines built "debian".
Please report your experience by creating an issue at https://github.com/prisma/prisma/issues so we can add your distro to the list of known supported distros.
PrismaClientInitializationError:
Invalid `prisma.user.findMany()` invocation:
Unable to require(`/home/projects/node-uspq2x/node_modules/.prisma/client/libquery_engine-debian-openssl-1.1.x.so.node`).
The Prisma engines do not seem to be compatible with your system. Please refer to the documentation about Prisma's system requirements: https://pris.ly/d/system-requirements
Details: Cannot load native addon because loading addons is disabled: /home/projects/node-uspq2x/node_modules/.prisma/client/libquery_engine-debian-openssl-1.1.x.so.node
at Pn.handleRequestError (file:///home/projects/node-uspq2x/node_modules/@prisma/client/runtime/library.js:171:7205)
at Pn.handleAndLogRequestError (file:///home/projects/node-uspq2x/node_modules/@prisma/client/runtime/library.js:171:6358)
at eval (file:///home/projects/node-uspq2x/node_modules/@prisma/client/runtime/library.js:174:2908)
at async eval (file:///home/projects/node-uspq2x/node_modules/@prisma/client/runtime/library.js:174:3123)
at async t._executeRequest (file:///home/projects/node-uspq2x/node_modules/@prisma/client/runtime/library.js:174:10621)
at async main (file://file:///home/projects/node-uspq2x/index.mjs:17:17) {
clientVersion: '4.14.1',
errorCode: undefined
}
メンテナの方も、
With it enabled, Stackblit can download the engines, but still not execute them of course. Here is the output of prisma -v in that situation:
Technically we would now be in a position to prisma generate --data-proxy and then use that in an app to send queries via Data Proxy. Currently the Data Proxy does not set any CORS headers and does not respond to preflight requests though - starting a discussion about that internally.
と言っているので、Stackblitzで動かすことは難しく、Data Proxyを経由してSQLを発行する必要がありそうだった。
tekihei2317Prisma Clientをどこで動かすか（Part 2）
結局、Prisma Engineを動かすためにNode.jsのサーバーが必要になりそうだ。具体的には次のことをする必要がある。
- サーバー側でデータベースを用意する
- Prisma Clientを使ったコードを、サーバー側で実行する
- マイグレーションをサーバー側で実行する
メンテナンスにかかるコストや、サーバー自体のコストを考えると、現時点で作るのは厳しいという結論になった（個人的な問題）。
Prisma Clientがクライアント側で動かせるようになるのを待ちたい。Prisma EngineをWasm化する話もあるみたいだが、DBにソケットでアクセスする必要があり、その部分のWasmのエコシステムが整うまでは難しいようだった。
Prisma Clientがクライアント側で動くようになれば、SQLiteのWasmを使って全てをクライアント側で完結できるようになりそうなので、面白そう。