Upgrade to Pro — share decks privately, control downloads, hide ads and more …

RESTful Firebase with Vue.js

gyarasu
December 12, 2019

RESTful Firebase with Vue.js

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

gyarasu

December 12, 2019
Tweet

More Decks by gyarasu

Other Decks in Technology

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