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

809959df8efd6639f22674007b851c45?s=47 Jungmo Kang
October 05, 2017

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

809959df8efd6639f22674007b851c45?s=128

Jungmo Kang

October 05, 2017
Tweet

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: '