Vueのバックエンドとして Firebaseを使った話

#vuejs_meetup5で発表した資料です。

blog: http://tech-blog.abeja.asia/entry/firebase-on-vue-j
github: https://github.com/abeja-inc/abeja-totalizer

Transcript

1. VueͷόοΫΤϯυͱͯ͠ FirebaseΛ࢖ͬͨ࿩
2. ࠓճͷςʔϚ Vue͕SPAͱ͍͍ͯ͠ͷ͸Θ͔ͬͨɻ ࣮ӡ༻͸Ͳ͏͢Δ͔ʁ →Firebaseʹͨ͠Β޾ͤͰͨ͠
3. AGENDA 1.VueͷόοΫΤϯυ 2.VueͱFirebase 3.·ͱΊ
4. 1.VueͷόοΫΤϯυ
5. ΞϓϦέʔγϣϯɾαʔόʔ EC2 Instance Nginx Express AWS S3
6. ΞϓϦέʔγϣϯɾαʔόʔ • ࣗ༝౓͸ߴ͍ɺͰ΋࡞Δͷ΋େม • ӡ༻ίετ͕͔͔Δʢαʔόʔμ΢ϯίϫΠʣ
7. ΞϓϦέʔγϣϯɾαʔόʔ EC2 Instance Nginx Express
8. αʔόʔϨε AWS API Gateway λ λ λ … S3
9. αʔόʔϨε • DynamoDB͍͚ͯͳ͍ɻ • LambdaͷϩάݟͮΒ͍ • σϓϩΠ͕େม • ServerlessΛ࢖͕ͬͨσϓϩΠʹࣦഊͨ͠Γɺcloud formation͕յΕͯ࡟আ͢Δϋϝʹɻ
10. αʔόʔϨε AWS API Gateway λ λ λ …
11. Firebase(BaaS) Firebase Functions Storage Auth
12. Firebase(BaaS) • All in One • Firebase FunctionsͰ֤छΠϕϯτ࣌ͷॲཧΛॻ͚Δ • σϓϩΠ͸Firebase CLIͰҰൃʂ
13. Firebase(BaaS) Firebase Functions Storage Auth
14. 2.VueͱFirebase
15. VueͱFirebaseͷ࿈ܞ • VueFireͷ௥Ճ • VueFireΛొ࿥ • Firebaseͱ࿈ܞ $ npm install firebase vuefire --save import Vue from 'vue' import VueFire from 'vuefire' import App from './App' Vue.use(VueFire) import Firebase from 'firebase' let config = { apiKey: "...", authDomain: "...", databaseURL: "...", storageBucket: "...", messagingSenderId: "..." }; let app = Firebase.initializeApp(config) let db = app.database()
16. ͜ΜͳͷάάΕ͹ͨ͘ ͞Μग़ͯ͘Δ
17. ࣮ࡍͲ͏࢖͍ͬͯΔͷ͔
18. CRM Firebase Functions Storage Auth ϒϥ΢β ผαʔόʔ
19. Realtime Database event trigger Firebase Functions Storage Auth ϒϥ΢β ผαʔόʔ 1.ొ࿥ 2.ൃՐ 3.ొ࿥
20. Realtime Database event trigger ίʔυ͸͜Μͳײ͡ export const changedCustomerInfo = functions.database.ref(`/${DB_ROOT}/customers/ {customerKey}`) .onWrite(databaseEvents.OnCustomerChanged) export const changedAreas = functions.database.ref(`/${DB_ROOT}/areas/{areaKey}`) .onWrite(databaseEvents.OnAreasChanged) export const changedShops = functions.database.ref(`/${DB_ROOT}/shops/{shopKey}`) .onWrite(databaseEvents.OnShopsChanged) export const changedDevices = functions.database.ref(`/${DB_ROOT}/devices/{deviceKey} `) .onWrite(databaseEvents.OnDevicesChanged) export const changedUsers = functions.database.ref(`/${DB_ROOT}/customers/ {customerId}/users/{userId}`) .onWrite(databaseEvents.OnUsersChanged) export const changeContracts = functions.database.ref(`/${DB_ROOT}/contracts/ {contractKey}`) .onWrite(databaseEvents.OnContractChanged)
21. Cloud Storage trigger Firebase Functions Storage Auth ϒϥ΢β ผαʔόʔ 1.ొ࿥ 2.ൃՐ
22. ΋ͪΖΜɺHTTP trigger Firebase Functions Storage Auth ϒϥ΢β ผαʔόʔ 1.Call 2.TokenCheck
23. ETC • Firebase Authentication Trigger • Google Analytics for Firebase Trigger • Cloud Pub/Sub
24. Functions ࿈ܞ Firebase Firebase Function Firebase Function
25. ෳ਺ͷFirebaseΛϩʔυ const config = { apiKey: …, authDomain: …, databaseURL: … } const secondaryConfig = { apiKey: …, authDomain: …, databaseURL: … } const firebaseApp = firebase.initializeApp(config) const secondaryFirebaseApp = firebase.initializeApp(secondaryConfig, 'secondary')
26. 3.·ͱΊ
27. 3.·ͱΊ • ̏ϲ݄࢖ͬͨײ૝͸VueͷόοΫΤϯυͱͯ͠ඇৗʹ͍͍ • ΄΅͢΂ͯἧ͍ͬͯΔ͠ɺӡ༻΋ָɻ • σʔλͷѻ͍΋ָɻόοΫΞοϓ΋ϦετΞ΋ίϯιʔϧ ্ͰͰ͖Δɻ • SPAͱ૬ੑ͕͍͍
28. Ͱ΋ۜͷ஄͸ͳ͍ʂ
29. FunctionsͷσόοΫ ͕Ͱ͖ͳ͍ʂʂ
30. FunctionsͷσόοΫ ͕Ͱ͖ͳ͍ʂʂ
31. σʔλ͸ϑϥοτʹʂ customers -KnrCVAqhTQ33fGkz50s shops -KnrCVBHeSztSd86_CVI: true ... shops -KnrCVBHeSztSd86_CVI customerKey: -KnrCVAqhTQ33fGkz50s devices -KnXFP1dGQoLsu4dzran: true ... devices -KnXFP1dGQoLsu4dzran customerKey: -KnrCVAqhTQ33fGkz50s shopKey: -KnrCVBHeSztSd86_CVI name: '