React + Prisma + PostgreSQL on Heroku でアプリを作ってみる
概要
誰でも見られて、サクッと作れる環境が欲しかったのと、 最近話題のPrismaを使ってみたかったので、Heroku上にアプリを作ってみました。
とりあえずPostgreSQLまでつながっていることが知りたかったので、 ボタンは何もデザインせず、出力結果もコンソールにそのまま出してますが、 React + Prisma + PostgreSQL on Herokuの構成で、 フロントからAPIをコールして、RDBからデータを取得するところまで作れました。
今後はここをベースに、ちょっとしたアプリを作っていこうと考えています。
試した背景
これを試してみた具体な背景ですが、Prismaを使ったみたかったことに加え、 ちょっとしたPoCで検証するときになるべく低コスト（利用料と管理面両方）な環境がほしい、というのがあります。
AWSやGCPといったクラウドサービスでも良いものの、 MFAやIAMのポリシーなど、セキュリティ対策をちゃんとしないといけなかったり、 無料枠の制限も限定的なので、利用料を気にしつつ使ったりと、 小規模（エンジニアが１人、２人くらい）だとめんどくさいなと感じることが多かったので、 Herokuを使うことで、その辺りを効率化できないかと考えました。
今回はHerokuの無料版のアドオンのPostgreSQLを利用しているので、DBに関しても利用料は無料でした。 GraphQLの学習コストはありますが、Prismaクライアントが用意されており、 フロントアプリとしては、非同期ライブラリからエンドポイントを指定して呼び出しができますので、 Prisma以外の学習コストは発生せず、Prisma自体もORMを使ったことがある人なら理解しやすそうな感じでした。 （Prismaをもっと触ってみると、色々課題が出るかもしれません。。）
Prismaを使う前提なので、こういった構成を考えましたが、 少し調べた感じですと、低コストという意味では、 フロントはHerokuで、バックエンドはFaunaDBあたりも良いのかも知れません。 （このあたりも今後勉強したいところです。） bagelee.com
アプリについて
アプリ構成の概要は、以下の図のStatic HTMLの部分を、Reactで作成したSPAに置き換えているだけです。
引用元：
Deploying to Heroku | Prisma Documentation
今回のHerokuアプリのディレクトリ構造は、以下のようになっており、 heroku-app/src/spa配下に作成しているReact アプリをビルドする際に、 生成されたアプリを、heroku-app/public にコピーすることで、 デプロイ時に、SPAとAPIを同時にデプロイするようにしています。
heroku-app
|- Procfile
|- README.md
|- node_modules
|- package.json
|- prisma // prismaのスキーマ定義などが格納されています
|- public // src/spa配下のアプリを配置するディレクトリ
-- src
|- api // prismaクライアントを使ったAPIのソースが格納されます
|- spa // spaアプリのソースが格納されます
PrismaAPIの構築やHerokuへデプロイする方法は、以下のページを参考に進めました。 SPA開発するところ以外は、すべてこのページでなんとかなります。
終わりに
まだまだPrismaを学び始めたばかりなので、これから実際にアプリを作っていき、この構成の評価していきたいと思います。
