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

by Jungmo Kang

Slide 1

Slide 1 text

VueͷόοΫΤϯυͱͯ͠ FirebaseΛ࢖ͬͨ࿩

Slide 2

Slide 2 text

ࠓճͷςʔϚ Vue͕SPAͱ͍͍ͯ͠ͷ͸Θ͔ͬͨɻ ࣮ӡ༻͸Ͳ͏͢Δ͔ʁ →Firebaseʹͨ͠Β޾ͤͰͨ͠

Slide 3

Slide 3 text

AGENDA 1.VueͷόοΫΤϯυ 2.VueͱFirebase 3.·ͱΊ

Slide 4

Slide 4 text

1.VueͷόοΫΤϯυ

Slide 5

Slide 5 text

ΞϓϦέʔγϣϯɾαʔόʔ EC2 Instance Nginx Express AWS S3

Slide 6

Slide 6 text

ΞϓϦέʔγϣϯɾαʔόʔ • ࣗ༝౓͸ߴ͍ɺͰ΋࡞Δͷ΋େม • ӡ༻ίετ͕͔͔Δʢαʔόʔμ΢ϯίϫΠʣ

Slide 7

Slide 7 text

ΞϓϦέʔγϣϯɾαʔόʔ EC2 Instance Nginx Express

Slide 8

Slide 8 text

αʔόʔϨε AWS API Gateway λ λ λ … S3

Slide 9

Slide 9 text

αʔόʔϨε • DynamoDB͍͚ͯͳ͍ɻ • LambdaͷϩάݟͮΒ͍ • σϓϩΠ͕େม • ServerlessΛ࢖͕ͬͨσϓϩΠʹࣦഊͨ͠Γɺcloud formation͕յΕͯ࡟আ͢Δϋϝʹɻ

Slide 10

Slide 10 text

αʔόʔϨε AWS API Gateway λ λ λ …

Slide 11

Slide 11 text

Firebase(BaaS) Firebase Functions Storage Auth

Slide 12

Slide 12 text

Firebase(BaaS) • All in One • Firebase FunctionsͰ֤छΠϕϯτ࣌ͷॲཧΛॻ͚Δ • σϓϩΠ͸Firebase CLIͰҰൃʂ

Slide 13

Slide 13 text

Firebase(BaaS) Firebase Functions Storage Auth

Slide 14

Slide 14 text

2.VueͱFirebase

Slide 15

Slide 15 text

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()

Slide 16

Slide 16 text

͜ΜͳͷάάΕ͹ͨ͘ ͞Μग़ͯ͘Δ

Slide 17

Slide 17 text

࣮ࡍͲ͏࢖͍ͬͯΔͷ͔

Slide 18

Slide 18 text

CRM Firebase Functions Storage Auth ϒϥ΢β ผαʔόʔ

Slide 19

Slide 19 text

Realtime Database event trigger Firebase Functions Storage Auth ϒϥ΢β ผαʔόʔ 1.ొ࿥ 2.ൃՐ 3.ొ࿥

Slide 20

Slide 20 text

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)

Slide 21

Slide 21 text

Cloud Storage trigger Firebase Functions Storage Auth ϒϥ΢β ผαʔόʔ 1.ొ࿥ 2.ൃՐ

Slide 22

Slide 22 text

΋ͪΖΜɺHTTP trigger Firebase Functions Storage Auth ϒϥ΢β ผαʔόʔ 1.Call 2.TokenCheck

Slide 23

Slide 23 text

ETC • Firebase Authentication Trigger • Google Analytics for Firebase Trigger • Cloud Pub/Sub

Slide 24

Slide 24 text

Functions ࿈ܞ Firebase Firebase Function Firebase Function

Slide 25

Slide 25 text

ෳ਺ͷFirebaseΛϩʔυ const config = { apiKey: …, authDomain: …, databaseURL: … } const secondaryConfig = { apiKey: …, authDomain: …, databaseURL: … } const firebaseApp = firebase.initializeApp(config) const secondaryFirebaseApp = firebase.initializeApp(secondaryConfig, 'secondary')

Slide 26

Slide 26 text

3.·ͱΊ

Slide 27

Slide 27 text

3.·ͱΊ • ̏ϲ݄࢖ͬͨײ૝͸VueͷόοΫΤϯυͱͯ͠ඇৗʹ͍͍ • ΄΅͢΂ͯἧ͍ͬͯΔ͠ɺӡ༻΋ָɻ • σʔλͷѻ͍΋ָɻόοΫΞοϓ΋ϦετΞ΋ίϯιʔϧ ্ͰͰ͖Δɻ • SPAͱ૬ੑ͕͍͍

Slide 28

Slide 28 text

Ͱ΋ۜͷ஄͸ͳ͍ʂ

Slide 29

Slide 29 text

FunctionsͷσόοΫ ͕Ͱ͖ͳ͍ʂʂ

Slide 30

Slide 30 text

FunctionsͷσόοΫ ͕Ͱ͖ͳ͍ʂʂ

Slide 31

Slide 31 text

σʔλ͸ϑϥοτʹʂ customers -KnrCVAqhTQ33fGkz50s shops -KnrCVBHeSztSd86_CVI: true ... shops -KnrCVBHeSztSd86_CVI customerKey: -KnrCVAqhTQ33fGkz50s devices -KnXFP1dGQoLsu4dzran: true ... devices -KnXFP1dGQoLsu4dzran customerKey: -KnrCVAqhTQ33fGkz50s shopKey: -KnrCVBHeSztSd86_CVI name: '