社内システムを

Nuxt + FirebaseからNuxt + GraphQLで作り直した話

Hidetoshi Ota

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

・主な経験�フロントエンド: Vue (Nuxt、TypeScript)�バックエンド: Spring (Java)、Laravel (PHP)、PL/SQL、もっとレガシーなものも�インフラ: AWSなどのクラウド

・現在�フロントエンド中心にバックエンドの開発なども行っている�株式会社ペットキャンプのサービスの開発も行っています

太田秀俊

ファンタラクティブ株式会社 エンジニア

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

概要

・Firebase未経験者がFirebaseを使って社内システムを作った話

・GraphQLほぼ未経験者がFirebaseで作ったシステムを、GraphQL (データソースにRDB) で作り直した話

・VueとNuxtについて話す会だけど主にFirebaseとGraphQLについて話します🙏

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

どういうシステム？

・Stack Overflowのような質問をしたら回答が返ってくるようなシステム

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

なぜ社内システムを作ることになったか

・知識の共有と将来への蓄積�メンバー毎に異なる経験や知識を持っていたので共有して知見をためていける場所があるといいと考えた

・新しいサービスや技術の検証をしたかった�どんどん新しいサービスや技術が生まれているが、いきなりクライアントのサービスで使うのは不安

・入社したタイミングが唯一のバックエンドエンジニアが退職したタイミングだった�社内だけでシステムを作ることができなくなったのでバックエンドの再構築が必要になった

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

バックエンドをどうするか

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

課題

メリット

まずはFirebaseを使うことに

・SSRしなければフロントのホスティングがすごく楽な状況で、フロントエンドエンジニアがサーバーサイドに関するインフラの知識を身に付け運用するのは重い

・Firestoreでどこまでできるのか試してみたい

・無料枠で結構使えそう

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

排除する

排除する

挑戦する

Firebaseを使ってみて

・費用�小さなサービスであれば月0〜100円くらいで運用することができる�キャッシュが使えるならさらに費用を削減できる�アクセスが多いサービスを作るとかなり課金されるのでデータ設計やキャッシュは重要

・データ整合性�FirestoreにはTransaction、Batch、FirestoreをトリガーとしたFunctionsの実行が用意されているため、データ整合性を保つことができる�おそらく他のTransactionの影響を受けるためより厳密にするには工夫する必要がある�性能が犠牲になったり課金対象の処理が増える�トランザクションと非正規化 (複数ドキュメントの同時更新) を考えるとreadとwriteはわけて考えたほうがよさそう

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

Firebaseを使ってみて

・検索・集計�クライアントサイドジョインで多くのものは問題ない�CollectionGroupを使用することでCollectionを跨いだデータ取得はできる�セキュリティルールが大きく影響する�RDBほどクエリの自由度がなく、非正規化や文字列を分割した配列をもたせるなど工夫が必要で運用がむずかしい�自由にSQLで集計するようなことはFirestore単体では不可能だけどBigQueryと連携することはできる�AlgoliaやElasticSearchと連携も

・データバックアップ・リストア�GCPと連携することでできる

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

Firebaseを使ってみて

・デプロイ�ホスティングはとても簡単�Functions、Firestore、Storageのセキュリティルールなども一緒にデプロイできて簡単

・認証�メールアドレス、Facebook、Twitter認証はとても簡単�LINE認証などもfunctionsで独自に実装すれば可�匿名認証を使うと認証してないユーザーをAnalyticsで追える

・その他�SSRではかなり複雑になりそう (まだやったことない)�無料範囲内でも有料プランしかできないことがあるので最初から有料プランにするべき�Firestoreやエミュレーターなど日々進化してる�

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

バックエンドをGraphQL、

フロントもいちから作り直すことに

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

機能拡張

・質問/回答の機能意外にたくさん機能追加したくなった

・おそらくこのままFirebaseで続けることは可能

・Firebaseについての知識がないときに作ったコードをリファクタする必要がある

・デザイン、デザインシステムにもこだわりたい

・バックエンドの選択肢としてFirebase (Firestore) しかないのは不安

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

バージョン2

・データソースはRDB�RDBを使ったバックエンドの構成がひとつは必要だと考えた

・サーバー側の言語もTypeScript

・構成�GraphQLサーバー: graphql-yoga�ORM、スキーマ定義、マイグレーション: prisma2�リゾルバ: nexus (最近開発終了してどうしようか悩んでる)�

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

フロント: Nuxt、バックエンド・インフラ: Firebase

Hosting

Nuxt

Authentication

Firestore

Functions

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

フロント: Nuxt、バックエンド: graphql-yoga・インフラ: AWS

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

Cognito

API Gateway

ALB

Amplify Console

Nuxt

EC2

graphql-yoga

RDS

Lambda

マイグレーション、コード自動生成

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

Nuxt

RDS

schema.prisma

GraphQL Schema FIle

SQL Migration File

マイグレーション

コード自動生成

GraphQL + RDBを使ってみて

・クエリ�欲しいフィールドだけ取得できるが扱いづらい�大きめのコンポーネントのPropはオブジェクトで受け取った方が扱いやすかったのでfragment単位で取得するようにした�ページなどで一括でデータ取得しないとGraphQLの恩恵を受けられなくなる

・インフラ構成がfirebaseに比べて複雑�わかっていたことだけどfirebaseと比べてかなり複雑になった�Amplifyを使うならAppSyncを使うことも検討した方がいいかもしれない

・スキーマ�スキーマをサーバーとフロントで共有し、コード自動生成できるのは最高�OpenAPIほどスキーマが複雑ではない (と思う)�自動生成されたコードにはくせもある

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

GraphQL + RDBを使ってみて

・リゾルバ�Rails、Laravelのクエリビルダーと比べて弱い気がする�Railsでは簡単にできるのにってことができない (やり方がわからないだけかも)�いざとなったら生のSQLを書ける安心感🔥

・その他�Prisma2でMySQLに対するマイグレーションがうまくできなかった� varchar、text周りの問題が解決できず (うろ覚え)

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

今も日々改善中

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

Quokka画面

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す

ありがとうございました

第24回ゆるはち.it Vue.js / Nuxt.jsについてゆるく話す