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 吉次 洋毅
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
36. 終