Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
RESTful Firebase with Vue.js
Search
gyarasu
December 12, 2019
Technology
1
370
RESTful Firebase with Vue.js
2019.12.12 Sendai Frontend Meetup #3
https://sfeug.connpass.com/event/156387/
gyarasu
December 12, 2019
Tweet
Share
More Decks by gyarasu
See All by gyarasu
QAエンジニア組織立ち上げはじめの一歩
gyarasu
0
27
Firebase Cloud Messaging のベストプラクティス を、探している
gyarasu
1
2.1k
Next.jsではじめるPWA
gyarasu
2
1.4k
doda AIジョブサーチ PWAとパフォーマンスの話
gyarasu
0
1.5k
副業時代のプロジェクトマネジメント
gyarasu
3
2.7k
PWA基礎_1
gyarasu
0
280
PWA基礎_2
gyarasu
0
160
PWA基礎_3
gyarasu
0
150
フロントエンドエンジニア (実稼働まで) ひとりでできるもん
gyarasu
0
2.5k
Other Decks in Technology
See All in Technology
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
エンジニア向け会社紹介資料
caddi_eng
14
230k
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
190
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
150
Android研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
100
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
720
AWSでRAGを作る法方
sonoda_mj
1
140
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
4 Signs Your Business is Dying
shpigford
178
21k
Documentation Writing (for coders)
carmenintech
63
4.2k
Automating Front-end Workflow
addyosmani
1362
200k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Being A Developer After 40
akosma
72
580k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Bash Introduction
62gerente
607
210k
Transcript
RESTful Firebase with Vue.js 2019/12/12 Sendai Frontend Meetup #3 吉次
洋毅
誰? • 吉次洋毅(ヨシツグヒロキ) • 1991年生まれ(28歳) • 経歴 ◦ 某レストラン検索サイトでバックエンドエンジニアなど ◦
某HR会社でエンジニアをしつつ ◦ フリーランスで受託開発&他社さんの開発やプロジェクトマネジメントのお手伝い • 趣味 ◦ 一人旅 & 写真 & スーパー銭湯 ◦ スマブラ(VIPボーダー周辺をウロウロ・ゼロサムユーザ) ◦ ポケモン(約20年ぶりにはじめました) @gyarasu
今日はFirebaseとVue.jsのお話 ✕
話すこと • SPAとFirebaseによるサーバレス開発 • Firebaseへの依存とサービスグロース • RESTful Firebase • まとめ
• CORSとの戦い(時間あれば)
Chapter. 1 SPAとFirebaseによる サーバレス開発
サーバレスでアプリケーションを作れる! Frontend Backend
Firebaseの良いところ • 必要なものがだいたい揃ってる ◦ 認証 ◦ 関数の実行 ◦ データベース(NoSQL) ◦
ファイルストレージ • 低コスト ◦ お金 ◦ 導入する手間(firebase-toolsでの操作) ◦ 学習コスト
Vue.jsの良いところ • vue cliで簡単にバックエンドから独立したSPAの プロジェクトが作れる • 学習コストが低い • 成熟したエコシステム •
豊富なドキュメント
新規サービスのスタートアップには最適! ✕
最高!...なのか??
Chapter. 2 Firebaseへの依存と サービスのグロース
そのSPA、切り離せますか? Frontend Backend
サービスグロースで起こりうること • 短い時間単位で大量の書き込み ◦ Firestoreで耐えうるか? • コードベースの肥大化 ◦ それに耐えうるアーキテクチャ設計ができているか? •
パフォーマンス問題の顕在化 ◦ Cloud Functionsのコールドスタート問題など
結果的にどうなるか?
それぞれ別のものに置換される可能性がある Frontend Backend
Chapter. 3 RESTful 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/json appllication/x-www-for m-urlencoded 実装 プラグイン/ミド ルウェア form object json
object vue-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/callabl e-reference?hl=ja • https://firebase.google.com/docs/functions/http-ev ents • https://developer.mozilla.org/ja/docs/Web/HTTP/C ORS
終