2019.12.12 Sendai Frontend Meetup #3 https://sfeug.connpass.com/event/156387/
RESTful Firebasewith Vue.js2019/12/12Sendai Frontend Meetup #3吉次 洋毅
View Slide
誰?● 吉次洋毅(ヨシツグヒロキ)● 1991年生まれ(28歳)● 経歴○ 某レストラン検索サイトでバックエンドエンジニアなど○ 某HR会社でエンジニアをしつつ○ フリーランスで受託開発&他社さんの開発やプロジェクトマネジメントのお手伝い● 趣味○ 一人旅 & 写真 & スーパー銭湯○ スマブラ(VIPボーダー周辺をウロウロ・ゼロサムユーザ)○ ポケモン(約20年ぶりにはじめました)@gyarasu
今日はFirebaseとVue.jsのお話✕
話すこと● SPAとFirebaseによるサーバレス開発● Firebaseへの依存とサービスグロース● RESTful Firebase● まとめ● CORSとの戦い(時間あれば)
Chapter. 1SPAとFirebaseによるサーバレス開発
サーバレスでアプリケーションを作れる!FrontendBackend
Firebaseの良いところ● 必要なものがだいたい揃ってる○ 認証○ 関数の実行○ データベース(NoSQL)○ ファイルストレージ● 低コスト○ お金○ 導入する手間(firebase-toolsでの操作)○ 学習コスト
Vue.jsの良いところ● vue cliで簡単にバックエンドから独立したSPAのプロジェクトが作れる● 学習コストが低い● 成熟したエコシステム● 豊富なドキュメント
新規サービスのスタートアップには最適!✕
最高!...なのか??
Chapter. 2Firebaseへの依存とサービスのグロース
そのSPA、切り離せますか?FrontendBackend
サービスグロースで起こりうること● 短い時間単位で大量の書き込み○ Firestoreで耐えうるか?● コードベースの肥大化○ それに耐えうるアーキテクチャ設計ができているか?● パフォーマンス問題の顕在化○ Cloud Functionsのコールドスタート問題など
結果的にどうなるか?
それぞれ別のものに置換される可能性があるFrontendBackend
Chapter. 3RESTful Firebase
Firebase Cloud Functionの呼び出し方● onCall(とても便利)○ 呼び出し可能関数では、Firebase Authentication と FCM トークンが使用可能な場合、自動的にリクエストに追加されます。○ functions.https.onCall トリガーは、リクエスト本文を自動的に逆シリアル化し、認証トークンを検証します。○ 使えるメソッドはPOSTのみ● onRequest(すこし頑張る必要あり)○ HTTP 関数のイベント ハンドラは onRequest() イベントをリッスンします。このイベントは、Express ウェブ フレームワークによって管理されるルーターとアプリをサポートします。
onCallは諸刃の剣(ただ、とても楽)APIの実装に依存クライアントの実装に依存チームの人「グロースしてきたからAPIはgolang×k8sで作り直そうか」
こうなっていると、そう簡単には切り離せない
バックエンドとフロントエンドのつながりを標準的なインターフェースにしてそれぞれのポータビリティを確保したい
なので、onRequestベースで作る。
RESTful Firebase(Cloud Functions)https://github.com/gyarasu/express-ts-cloud-functions● Express.js● TypeScript● Cloud Functions最適化→URL設計への制約● POSTメソッド以外も使える(標準的なHTTPメソッド、ステータスコード)● Clean Architectureに基づく関心の分離● CORS対応
標準化による疎結合化REST API
Chapter. 4まとめ
まとめ● スタートアップは高速に!○ SPAやFirebaseは大いに活用すべき● サービスグロースを視野に入れた設計を!○ 切り離せる?捨てやすい?代替可能?○ できるだけ標準的な仕組みで作ろう
Chapter. 5(番外編)CORSとの戦い
onRequestベースのAPIで起こること● CORS(Cross-Origin-Resource-Sharing)○ サーバサイドでのCORS対応が必要○ クライアントサイドでのsimple request化(preflightを飛ばさない)● Firebase Authの認証トークンを自前で管理● onCallを使ってると、そのへんをよしなにやってくれる
単純リクエストでのやり取り● クロスオリジンにConetnt−Type: appllication/jsonのリクエストをするとpreflightを引き起こす● preflightにより、正しくクロスオリジンへのリクエストが通るかを確認する● サーバ側でのCORS対応によらず、preflightは発生する
単純リクエストでのやり取りappllication/jsonappllication/x-www-form-urlencoded実装プラグイン/ミドルウェア form objectjson objectvue-axios-cors Express.jsリクエスト
開発者が意識する実装部分はRESTful。プラグインとmiddlewareで吸収。
axiosを拡張したvueプラグインhttps://github.com/gyarasu/vue-axios-cors● axios(HTTPクライアント)のVue向けプラグイン● POST / PUTの場合に自動的に単純リクエストに変換● preflightを避ける(Authorizationヘッダついてる場合は不可避)
Express.jsでのjsonへの変換https://expressjs.com/en/api.html一応、上記のようなドキュメントがあるが、明示的に書かなくてもやってくれるようす。
FirebaseでRESTfulに作って開発スピードとポータビリティの両立を試みよう!
単純リクエスト補足● Authroizationヘッダを付与している場合、appllication/x-www-form-urlencodedに変換してもpreflightは飛びます● どうしてもpreflightを避けたい場合は認証情報をbodyに含めるなどすると一応実現はできる(あまり一般的ではない)● Cloud FunctionsはFirebase Hostingと連携してカスタムドメインを使えるので、そもそもCORSにしないのが一番シンプル(いろいろやったけど結局これが結論...)
参考リンク● https://firebase.google.com/docs/functions/callable-reference?hl=ja● https://firebase.google.com/docs/functions/http-events● https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
終