2分コーディングの一環でNext.js + Prisma + NextAuth.js + React Query で作るフルスタックアプリケーションの新時代をやった。とにかく簡単に認証 + DBアクセスがあるアプリケーションを作ってvercelにデプロイできるサンプルが出来て非常に良かった。趣味プロダクトをちょっと作ってみるのに良さそう。
shibayu36/next-prisma-auth-tutorialに試した例を置いているので参考にどうぞ。
やれたこと
- Googleのアカウントを使ってサインインし、TODOを追加できるアプリケーション
- herokuのPostgreSQL dbをデータソースとして動くアプリケーションをvercelにデプロイ
作業メモ
- prisma、migrationのツールも入ってるし便利すぎる。
- migrationしたけどpsqlでdocker内にアクセスできなかったので、次はその確認から ->
psql -p 54320 -h localhost next-prisma-auth-tutorial next-prisma-auth-tutorialで確認できる - なんか
MissingDriverError: Wrong driver: "postgresql" given. Supported drivers are: "cordova", "expo", "mariadb", "mongodb", "mssql", "mysql", "oracle", "postgres", "sqlite", "better-sqlite3", "sqljs", "react-native", "aurora-data-api", "aurora-data-api-pg".と言われる- まずpostgresqlじゃなくてpostgres
- その後pg入れないといけなかった
yarn add pg
- sessionのcallbackでuser.idを埋めるのがうまくいかない
- TypeScript | NextAuth.js でtypes拡張しろやって書いてあったからやった（ひどいと思う）
- デプロイ後にOAuthのcallbackがうまくいかない
no pg_hba.conf entry for host “3.239.40.61”, user- ローカルから Heroku Postgres に接続する際は SSL 通信にする - Neo’s World
- 【Express】HerokuのPostgreSQLのデータを表示する - クモのようにコツコツと
- 結局HerokuのFreeプランでPostgreSQLを作ると、自己署名証明書になってるのでエラーになる。一旦rejectUnauthorizedで回避。https://github.com/shibayu36/next-prisma-auth-tutorial/commit/a2f5d987c5901df82d8e90ea8626795d75a8aca2
- デプロイまで終わったよー。動いた！
利用技術の簡易調査
next-auth
- Introduction | NextAuth.js
- なんかめっちゃ色々対応していてすごい
- Designed to work with any OAuth service, it supports OAuth 1.0, 1.0A and 2.0
- Built-in support for many popular sign-in services
- Supports email / passwordless authentication
- Supports stateless authentication with any backend (Active Directory, LDAP, etc)
- Supports both JSON Web Tokens and database sessions
- Designed for Serverless but runs anywhere (AWS Lambda, Docker, Heroku, etc…)
- そしてまじで一瞬で実装できることがわかった。
- プロバイダーの対応
- https://next-auth.js.org/configuration/providers
- カスタムプロバイダもできそう
- https://zenn.dev/okumura_daiki/articles/c9e0065716d862
- こういう風にメールアドレスパスワードのやつも作れる
Prisma
- スキーマ定義しておくと、データベースのマイグレートもできるし、タイプセーフなクライアントも勝手に作ってくれる
- graphql 事例
- docker使ってテスト
- クリーンアーキテクチャ的にして、mock するテストパターン
- なんかこういう感じにすると、relationを一気に引いて、objectに埋め込んだりできる。便利だね
const allUsers = await prisma.user.findMany({
include: { posts: true },
})
Prismaとは
It consists of the following parts: * Prisma Client: Auto-generated and type-safe query builder for Node.js & TypeScript * Prisma Migrate: Migration system * Prisma Studio: GUI to view and edit data in your database
- あとVSCode使ってると、スキーマ定義ミスってるとエラーが出たりして便利
- https://zenn.dev/kanasugi/articles/a082bd39c5bdf2
- ちょうど説明が出てた
react-query
React Query - Hooks for fetching, caching and updating asynchronous data in React
- サーバの状態との同期が強い？
- 基本的には、キャッシュを作ってくれたり、キャッシュの破棄だったり、一定時間で再フェッチしてくれたりみたいなのをいい感じにやれる
- Quick Start | React Query | TanStack のコードが大体の概念を理解できる
- Important Defaults | React Query | TanStack あたりを見ると、TTL的なものがデフォルトで入ってて便利
vercel
- 何も準備しなくても、いい感じにフレームワークなどを検知してデプロイできて便利そう Build Step - Vercel Documentation
yarn run vercelだけでデプロイできる。- vercelコマンドは Build Step - Vercel Documentation にあるように、scripts buildを自動で呼んだりする
- Git - Vercel Documentation mainにpushしたら本番デプロイ、それ以外ならpreviewデプロイとかを自動でできて、簡単にGitOps実現できる
