プロトタイプ用途でFirebaseを使ってよかったという話
2018-01-01 17:00:00 +0900
最近、個人的な趣味と社の技術検証を兼ねてFirebaseを触っている。
一番のモチベーションとしてはFirebase Realtime Databaseの存在が大きかったのだけど、 フロントエンド・クライアントサイドエンジニアがプロトタイプ作るときに、 あると便利な機能が一通り揃っているという観点でも良いと思ったので、紹介したい。
知っている人からすれば2年遅れくらいだろうけど、サーバーサイドをメインにしている人間には新鮮だったので、 下記でそれぞれのサービスについて解説する。
Firebase Realtime Database / Firestore
今更解説する必要もないと思っているけど... チャットを5分で作れるだの、1分で作れるだのと言ったものはだいたいコレでできている。
Firebase Realtime Database はクラウドでホスティングされるデータベースです。データは JSON として保存され、接続されているすべてのクライアントとリアルタイムで同期されます。iOS、Android、JavaScript SDK を使用してクロスプラットフォーム アプリを構築した場合、すべてのクライアントが、1 つの Firebase Realtime Database インスタンスを共有して、最新のデータによる更新を自動的に受信します。
とあるが、Websocketで通信して、内容を同期してくれるというシロモノである。 ローカルでも永続化されているので、オフラインでもちゃんとあとからオンラインになったときに同期してくれる。
Firebase RealTime Database / Firestoreの違いについて
- Firebase Realtime Databaseの方が先発で、Firestoreが後発の発展系だと思ってもらって良い。
今はどっちにすればいいのか？？
- Firebase RealTime Databaseの方が情報量も多いし、関連ライブラリ等で面倒なく使えるのは多分こっちなので、プロトタイプ用途だけであればこっちでもエエんちゃうかと思っている。
- プロダクションで...という場合はFirestoreの方がかゆいところに手が届く感じがして良さげ。*1
Firebase Hosting
Firebaseの静的サイトのホスティングサービスで、コマンドラインでのDeployがめっちゃ簡単。 コマンドラインツールをインストールして、firebase deployってやれば静的ファイルを配信してくれる。 既にプロジェクトを作っている場合、以下のコマンドでデプロイが完了する。
npm install -g firebase-tool firebase login firebase deploy #カレントディレクトリでコレを実行する
ここでは割愛するけど、CIサービスなんかでDeployするためのTokenを発行するコマンドもあって便利。 AmazonS3よりも手軽さで言うと勝っているという印象がある。 当然Firebase RealTime Databaseも感動したけど、コレがシンプルな機能だけど一番の感動だった。
SPAでのRewrite設定
フロントエンドルーターのあるアプリケーションでFirebase Hostingを利用する場合、rewrite設定をする必要がある。 他のフロントエンドルーターを利用する場合でも同じ設定をすればいいと思う。 VueRouterでの設定の解説ページを貼っておくので参考にして欲しい。
HTML5 History モード · vue-router
Firebase Storage
画像アップロードも面倒なので、サーバーサイド実装なしできると工数削られて本当に助かる。 とりあえず作るということを優先すれば本番でも投入できそう。（Pricingは見ていないが...） まぁプロトタイプ用途でココまで必要かと言われればそうでもないが...
おわりに
最近Railsでプロトタイプするのですらスピードが足りないと感じていて、 SPAでザクザク書いちゃった方が手慣れしていないエンジニアでも早いなぁと感じている。*2 ただコレに寄りかかったまま*3で本番投入すると、 特定のサービスに依存しすぎているのと、いざという時のデータの移行が大変なので、 parse.comのようにポシャる事を考えるとリスクヘッジは必要。
今後本番でも使いたいサービスなので、この辺についても書いていきたいです。