RESTful Firebase with Vue.js

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

最高！...なのか？？

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

結果的にどうなるか？

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Chapter. 3 RESTful Firebase

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Chapter. 4 まとめ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

参考リンク ● 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

Slide 36

Slide 36 text

終