RESTful Firebase with Vue.js

2019.12.12 Sendai Frontend Meetup #3
https://sfeug.connpass.com/event/156387/

Transcript

1. RESTful Firebase
   with Vue.js
   2019/12/12
   Sendai Frontend Meetup #3
   吉次 洋毅
   

   View Slide

2. 誰？
   ● 吉次洋毅（ヨシツグヒロキ）
   ● 1991年生まれ（28歳）
   ● 経歴
   ○ 某レストラン検索サイトでバックエンドエンジニアなど
   ○ 某HR会社でエンジニアをしつつ
   ○ フリーランスで受託開発&他社さんの開発やプロジェクトマネジメントのお手伝い
   ● 趣味
   ○ 一人旅 & 写真 & スーパー銭湯
   ○ スマブラ（VIPボーダー周辺をウロウロ・ゼロサムユーザ）
   ○ ポケモン（約20年ぶりにはじめました）
   @gyarasu
   

   View Slide

3. 今日はFirebaseとVue.jsのお話
   ✕
   

   View Slide

4. 話すこと
   ● SPAとFirebaseによるサーバレス開発
   ● Firebaseへの依存とサービスグロース
   ● RESTful Firebase
   ● まとめ
   ● CORSとの戦い（時間あれば）
   

   View Slide

5. Chapter. 1
   SPAとFirebaseによる
   サーバレス開発
   

   View Slide

6. サーバレスでアプリケーションを作れる！
   Frontend
   Backend
   

   View Slide

7. Firebaseの良いところ
   ● 必要なものがだいたい揃ってる
   ○ 認証
   ○ 関数の実行
   ○ データベース（NoSQL）
   ○ ファイルストレージ
   ● 低コスト
   ○ お金
   ○ 導入する手間（firebase-toolsでの操作）
   ○ 学習コスト
   

   View Slide

8. Vue.jsの良いところ
   ● vue cliで簡単にバックエンドから独立したSPAの
   プロジェクトが作れる
   ● 学習コストが低い
   ● 成熟したエコシステム
   ● 豊富なドキュメント
   

   View Slide

9. 新規サービスのスタートアップには最適！
   ✕
   

   View Slide

10. 最高！...なのか？？
    

    View Slide

11. Chapter. 2
    Firebaseへの依存と
    サービスのグロース
    

    View Slide

12. そのSPA、切り離せますか？
    Frontend
    Backend
    

    View Slide

13. サービスグロースで起こりうること
    ● 短い時間単位で大量の書き込み
    ○ Firestoreで耐えうるか？
    ● コードベースの肥大化
    ○ それに耐えうるアーキテクチャ設計ができているか？
    ● パフォーマンス問題の顕在化
    ○ Cloud Functionsのコールドスタート問題など
    

    View Slide

14. 結果的にどうなるか？
    

    View Slide

15. それぞれ別のものに置換される可能性がある
    Frontend
    Backend
    

    View Slide

16. Chapter. 3
    RESTful Firebase
    

    View Slide

17. Firebase Cloud Functionの呼び出し方
    ● onCall（とても便利）
    ○ 呼び出し可能関数では、Firebase Authentication と FCM トークンが
    使用可能な場合、自動的にリクエストに追加されます。
    ○ functions.https.onCall トリガーは、リクエスト本文を自動的に逆シリア
    ル化し、認証トークンを検証します。
    ○ 使えるメソッドはPOSTのみ
    ● onRequest（すこし頑張る必要あり）
    ○ HTTP 関数のイベント ハンドラは onRequest() イベントをリッスンしま
    す。このイベントは、Express ウェブ フレームワークによって管理され
    るルーターとアプリをサポートします。
    

    View Slide

18. onCallは諸刃の剣（ただ、とても楽）
    APIの実装に依存
    クライアントの実装に依存
    チームの人「グロースしてきたからAPIはgolang×k8sで作り直そうか」
    

    View Slide

19. こうなっていると、
    そう簡単には切り離せない
    

    View Slide

20. バックエンドとフロントエンドのつ
    ながりを標準的な
    インターフェースにして
    それぞれのポータビリティを確保
    したい
    

    View Slide

21. なので、
    onRequestベースで作る。
    

    View Slide

22. RESTful Firebase（Cloud Functions）
    https://github.com/gyarasu/express-ts-cloud-functions
    ● Express.js
    ● TypeScript
    ● Cloud Functions最適化
    →URL設計への制約
    ● POSTメソッド以外も使え
    る（標準的なHTTPメソッ
    ド、ステータスコード）
    ● Clean Architectureに基
    づく関心の分離
    ● CORS対応
    

    View Slide

23. 標準化による疎結合化
    REST API
    

    View Slide

24. Chapter. 4
    まとめ
    

    View Slide

25. まとめ
    ● スタートアップは高速に！
    ○ SPAやFirebaseは大いに活用すべき
    ● サービスグロースを視野に入れた設計を！
    ○ 切り離せる？捨てやすい？代替可能？
    ○ できるだけ標準的な仕組みで作ろう
    

    View Slide

26. Chapter. 5
    （番外編）CORSとの戦い
    

    View Slide

27. onRequestベースのAPIで起こること
    ● CORS（Cross-Origin-Resource-Sharing）
    ○ サーバサイドでのCORS対応が必要
    ○ クライアントサイドでのsimple request化（preflightを飛ば
    さない）
    ● Firebase Authの認証トークンを自前で管理
    ● onCallを使ってると、そのへんをよしなにやってく
    れる
    

    View Slide

28. 単純リクエストでのやり取り
    ● クロスオリジンにConetnt−Type: appllication/jsonのリクエスト
    をするとpreflightを引き起こす
    ● preflightにより、正しくクロスオリジンへのリクエストが通るかを
    確認する
    ● サーバ側でのCORS対応によらず、preflightは発生する
    

    View Slide

29. 単純リクエストでのやり取り
    appllication/json
    appllication/x-www-for
    m-urlencoded
    実装
    プラグイン/ミド
    ルウェア form object
    json object
    vue-axios-cors Express.js
    リクエスト
    

    View Slide

30. 開発者が意識する実装部分は
    RESTful。プラグインと
    middlewareで吸収。
    

    View Slide

31. axiosを拡張したvueプラグイン
    https://github.com/gyarasu/vue-axios-cors
    ● axios（HTTPクライアン
    ト）のVue向けプラグイン
    ● POST / PUTの場合に自
    動的に単純リクエストに
    変換
    ● preflightを避ける
    （Authorizationヘッダつ
    いてる場合は不可避）
    

    View Slide

32. Express.jsでのjsonへの変換
    https://expressjs.com/en/api.html
    一応、上記のようなドキュメントがあるが、明示的に書かなく
    てもやってくれるようす。
    

    View Slide

33. FirebaseでRESTfulに作って開
    発スピードとポータビリティの両
    立を試みよう！
    

    View Slide

34. 単純リクエスト補足
    ● Authroizationヘッダを付与している場合、
    appllication/x-www-form-urlencodedに変換してもpreflightは
    飛びます
    ● どうしてもpreflightを避けたい場合は認証情報をbodyに含め
    るなどすると一応実現はできる（あまり一般的ではない）
    ● Cloud FunctionsはFirebase Hostingと連携してカスタムド
    メインを使えるので、そもそもCORSにしないのが一番シンプ
    ル（いろいろやったけど結局これが結論...）
    

    View Slide

35. 参考リンク
    ● https://firebase.google.com/docs/functions/callabl
    e-reference?hl=ja
    ● https://firebase.google.com/docs/functions/http-ev
    ents
    ● https://developer.mozilla.org/ja/docs/Web/HTTP/C
    ORS
    

    View Slide

36. 終
    

    View Slide