RESTful Firebase with Vue.js

45d01c5df7a87588fe3fff1a138681f3?s=47 gyarasu
December 12, 2019

RESTful Firebase with Vue.js

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

45d01c5df7a87588fe3fff1a138681f3?s=128

gyarasu

December 12, 2019
Tweet

Transcript

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

    洋毅
  2. 誰? • 吉次洋毅(ヨシツグヒロキ) • 1991年生まれ(28歳) • 経歴 ◦ 某レストラン検索サイトでバックエンドエンジニアなど ◦

    某HR会社でエンジニアをしつつ ◦ フリーランスで受託開発&他社さんの開発やプロジェクトマネジメントのお手伝い • 趣味 ◦ 一人旅 & 写真 & スーパー銭湯 ◦ スマブラ(VIPボーダー周辺をウロウロ・ゼロサムユーザ) ◦ ポケモン(約20年ぶりにはじめました) @gyarasu
  3. 今日はFirebaseとVue.jsのお話 ✕

  4. 話すこと • SPAとFirebaseによるサーバレス開発 • Firebaseへの依存とサービスグロース • RESTful Firebase • まとめ

    • CORSとの戦い(時間あれば)
  5. Chapter. 1 SPAとFirebaseによる サーバレス開発

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

  7. Firebaseの良いところ • 必要なものがだいたい揃ってる ◦ 認証 ◦ 関数の実行 ◦ データベース(NoSQL) ◦

    ファイルストレージ • 低コスト ◦ お金 ◦ 導入する手間(firebase-toolsでの操作) ◦ 学習コスト
  8. Vue.jsの良いところ • vue cliで簡単にバックエンドから独立したSPAの プロジェクトが作れる • 学習コストが低い • 成熟したエコシステム •

    豊富なドキュメント
  9. 新規サービスのスタートアップには最適! ✕

  10. 最高!...なのか??

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

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

  13. サービスグロースで起こりうること • 短い時間単位で大量の書き込み ◦ Firestoreで耐えうるか? • コードベースの肥大化 ◦ それに耐えうるアーキテクチャ設計ができているか? •

    パフォーマンス問題の顕在化 ◦ Cloud Functionsのコールドスタート問題など
  14. 結果的にどうなるか?

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

  16. Chapter. 3 RESTful Firebase

  17. Firebase Cloud Functionの呼び出し方 • onCall(とても便利) ◦ 呼び出し可能関数では、Firebase Authentication と FCM

    トークンが 使用可能な場合、自動的にリクエストに追加されます。 ◦ functions.https.onCall トリガーは、リクエスト本文を自動的に逆シリア ル化し、認証トークンを検証します。 ◦ 使えるメソッドはPOSTのみ • onRequest(すこし頑張る必要あり) ◦ HTTP 関数のイベント ハンドラは onRequest() イベントをリッスンしま す。このイベントは、Express ウェブ フレームワークによって管理され るルーターとアプリをサポートします。
  18. onCallは諸刃の剣(ただ、とても楽) APIの実装に依存 クライアントの実装に依存 チームの人「グロースしてきたからAPIはgolang×k8sで作り直そうか」

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

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

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

  22. RESTful Firebase(Cloud Functions) https://github.com/gyarasu/express-ts-cloud-functions • Express.js • TypeScript • Cloud

    Functions最適化 →URL設計への制約 • POSTメソッド以外も使え る(標準的なHTTPメソッ ド、ステータスコード) • Clean Architectureに基 づく関心の分離 • CORS対応
  23. 標準化による疎結合化 REST API

  24. Chapter. 4 まとめ

  25. まとめ • スタートアップは高速に! ◦ SPAやFirebaseは大いに活用すべき • サービスグロースを視野に入れた設計を! ◦ 切り離せる?捨てやすい?代替可能? ◦

    できるだけ標準的な仕組みで作ろう
  26. Chapter. 5 (番外編)CORSとの戦い

  27. onRequestベースのAPIで起こること • CORS(Cross-Origin-Resource-Sharing) ◦ サーバサイドでのCORS対応が必要 ◦ クライアントサイドでのsimple request化(preflightを飛ば さない) •

    Firebase Authの認証トークンを自前で管理 • onCallを使ってると、そのへんをよしなにやってく れる
  28. 単純リクエストでのやり取り • クロスオリジンにConetnt−Type: appllication/jsonのリクエスト をするとpreflightを引き起こす • preflightにより、正しくクロスオリジンへのリクエストが通るかを 確認する • サーバ側でのCORS対応によらず、preflightは発生する

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

    object vue-axios-cors Express.js リクエスト
  30. 開発者が意識する実装部分は RESTful。プラグインと middlewareで吸収。

  31. axiosを拡張したvueプラグイン https://github.com/gyarasu/vue-axios-cors • axios(HTTPクライアン ト)のVue向けプラグイン • POST / PUTの場合に自 動的に単純リクエストに

    変換 • preflightを避ける (Authorizationヘッダつ いてる場合は不可避)
  32. Express.jsでのjsonへの変換 https://expressjs.com/en/api.html 一応、上記のようなドキュメントがあるが、明示的に書かなく てもやってくれるようす。

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

  34. 単純リクエスト補足 • Authroizationヘッダを付与している場合、 appllication/x-www-form-urlencodedに変換してもpreflightは 飛びます • どうしてもpreflightを避けたい場合は認証情報をbodyに含め るなどすると一応実現はできる(あまり一般的ではない) • Cloud

    FunctionsはFirebase Hostingと連携してカスタムド メインを使えるので、そもそもCORSにしないのが一番シンプ ル(いろいろやったけど結局これが結論...)
  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