Zenn
⚡

Blitz.jsでSupabaseのデータベースに接続する

2021/08/27に公開
Next.js
React
TypeScript
Prisma
blitz
tech

はじめに

初投稿です。勉強したことをアウトプットして残していきたいと思い、投稿を始めました。
普段は学生でPythonによる機械学習で研究をしている一方で、プライベートではReactやNext.jsを勉強しています。

今回は、ReactのフルスタックフレームワークであるBlitz.jsが先日、v1.0に向けた大きな修正が終了したと発信していたことを機に、久しぶりに触れてみました。

過去にチュートリアルだけやったことはあったのですが、その時はデータベースがローカル環境のSQLiteもしくはPostgreSQLの2択だったため、「開発時だったら良いかもしれないけれど、実際にデプロイしたらな〜」 と思い、チュートリアルをやったきりで終わっていました。

しかし、今回調べていたところ、PostgreSQLが使えるBaaSであるSupabaseのデータベースに接続している記事を見つけたので、それを参考にBlitz.jsでSupabaseのデータベースに接続する方法をご紹介していきます。

1.プロジェクトの作成

Supabaseにて、organisationを作成の後、projectを作成します。今回はsample-blitzというプロジェクト名で作成します。

プロジェクトを作成したらSettings > Database > Connection stringより下記のようなPostgreSQLのURLをコピーします。

postgresql://postgres:[YOUR-PASSWORD]@db.lfaauywmqdqnfrscfwlg.supabase.co:5432/postgres

[YOUR-PASSWORD] にはプロジェクト作成時に設定したパスワードに変更します。

これで、Supabase側の準備は終わりです。

2.アプリケーションの作成

次に、Blitz.jsのアプリケーションを下記コマンドで作成します。今回はsample-blitzというフォルダ名で作成します。

blitz new sample-blitz

途中、フォームライブラリの選択を求められますが、推奨されているReact Final Formを選択します。

これで、アプリケーションが作成されました。

3.データベースURLとプロバイダの変更

それでは早速、変更していきます。

まず、作成したアプリのデータベースのプロバイダをpostgresに変更します。

db/schema.prisma
datasource db {
+  provider = "postgres"
-  provider = "sqlite"
  url      = env("DATABASE_URL")
}

次に、DATABASE_URLをPostgreSQLのURLに変更します。デフォルトでは.env.localと.env.test.localの2つの環境設定ファイルに記述されているので、それぞれ変更します。

.env.local
+ DATABASE_URL="postgresql://postgres:[YOUR-PASSWORD]@db.lfaauywmqdqnfrscfwlg.supabase.co:5432/postgrese"
- DATABASE_URL="file:./db.sqlite"
.env.test.local
+ DATABASE_URL="postgresql://postgres:[YOUR-PASSWORD]@db.lfaauywmqdqnfrscfwlg.supabase.co:5432/postgrese"
- DATABASE_URL="file:./db.sqlite"

さらに、df/migrationsフォルダを削除します。
最後に、下記コマンドでデータベースをマイグレーションします。

blitz prisma migrate dev

途中、マイグレーション名を入力するよう求められますが、今回は何も打たずエンターキーで省略します。
データベースのマイグレーションに成功すると下記のような表示に出ます。

The following migration(s) have been created and applied from new schema changes:

migrations/
  └─ 20210826143502_/
    └─ migration.sql

Your database is now in sync with your schema.

確認のため、SupabaseのTablesも確認します。

無事、初期アプリで用意されているUser、Session、Tokenの3つのモデルのテーブルがSupabase上でも、作成できているのが確認できました。

4.テストユーザー登録

最後に試しにユーザーを登録してみます。ちなみにユーザーモデルは、

db/schema.prisma
model User {
  id             Int      @id @default(autoincrement())
  createdAt      DateTime @default(now())
  updatedAt      DateTime @updatedAt
  name           String?
  email          String   @unique
  hashedPassword String?
  role           String   @default("USER")

  tokens   Token[]
  sessions Session[]
}

のようになっており、名前はnullでも良く、メールアドレスは必須、パスワードはnullでも良いが、バリデーションでnullは不可になっているので、メールアドレスとパスワードを入力すればユーザー登録ができそうです。
早速、下記コマンドでローカルサーバーを立ち上げ、Sign Up画面からユーザーを登録します。

blitz dev


Sign Up画面


ホーム画面(ログイン後)

無事にユーザー登録が成功したようなので、Supabaseも確認します。

Supabaseでも、きちんとユーザーが登録されていることを確認できました。

おわりに

今回初投稿ということもあり、拙い文章であったり、技術的にもまだまだ未熟なので、今後はより技術を磨いていきたいと思います。

また、Blitz.jsがそろそろv1.0をリリースされるので、今後はより多くの方と共有できたらなと思います。

最後まで読んでいただきありがとうございました🙇‍♂️

参考

Discussion