フロントエンドエンジニアのためのFirebaseサーバーレス開発徹底解説

by TakeshiNishi

Slide 1

Slide 1 text

DIBSJUZDPO@PLJ !@UBLFTIJ@ ϑϩϯτΤϯυΤϯδχΞͷͨΊͷ FirebaseαʔόʔϨε։ൃపఈղઆ

Slide 2

Slide 2 text

/VYUKT'JSFCBTF7VFKT3VCZ($1ϒϩοΫνΣʔϯ ελʔτΞοϓىۀ ԭೄେ޷͖ԹઘΩϟϯϓཱྀߦ ੢෢࢙ ʹ͚ͨ͠͠ !@UBLFTIJ@ w ෱Ԭͷ4*FSͰγεςϜΤϯδχΞ w ϑϦʔϥϯεϓϩάϥϚʔ w ౦ژͷελʔτΞοϓ$P'PVOEFSऔక໾$50 w ϑϦʔϥϯεϓϩάϥϚʔ w גࣜձࣾEJ⒎FBTZऔక໾$50 w גࣜձࣾ0OF4NBMM4UFQ୅දऔక໾$50ˡࠓ͜͜ DIBSJUZDPO@PLJ !@UBLFTIJ@ ࣗݾ঺հ גࣜձࣾ0OF4NBMM4UFQ ୅දऔక໾$50

Slide 3

Slide 3 text

DIBSJUZDPO@PLJ !@UBLFTIJ@ ΋͘͡ w 'JSFCBTFͰԿ͕Ͱ͖Δͷ͔ʁ w 'JSFCBTFͰ؆୯Ϣʔβʔೝূ w 'JSFTUPSFͱ3FBMUJNF%BUBCBTF w $MPVE'VODUJPOTͰαʔόʔϨε։ൃ w /P42-σʔλϕʔεͷઃܭύλʔϯղઆ w 'JSFCBTF։ൃʹ͓͚ΔΞΫηεݖݶͳͲͷ஫ҙ఺ w ·ͱΊ

Slide 4

Slide 4 text

'JSFCBTFͱ͸ʁ උ੉ͷϑΫΪฒ໦

Slide 5

Slide 5 text

'JSFCBTFͱ͸ʁ (PPHMF͕ఏڙ͢Δ #BB4 #BDLFOEBTB4FSWJDF όοΫΤϯυͷ։ൃʢೝূɺετϨʔδͷ؅ཧɺσʔλϕʔεͷ؅ ཧͳͲʣ͕جຊతʹෆཁɻ ϑϩϯτΤϯυͷٕज़͚ͩͰΞϓϦ։ൃ͕Ͱ͖Δɻ DIBSJUZDPO@PLJ !@UBLFTIJ@

Slide 6

Slide 6 text

'JSFCBTFͰԿ͕Ͱ͖Δͷʁ DIBSJUZDPO@PLJ !@UBLFTIJ@

Slide 7

Slide 7 text

'JSFCBTFΛར༻Ͱ͖Δ؀ڥ DIBSJUZDPO@PLJ !@UBLFTIJ@

Slide 8

Slide 8 text

'JSFCBTFͰ ؆୯Ϣʔβʔೝূ ܚࠤ࣍઒ϚϯάϩʔϒΧψʔ

Slide 9

Slide 9 text

'JSFCBTFͰ؆୯Ϣʔβʔೝূ ϝʔϧ ύεϫʔυೝূ΍ ֤छ 4/4ೝূ͕؆୯ DIBSJUZDPO@PLJ !@UBLFTIJ@

Slide 10

Slide 10 text

'JSFCBTFͰ؆୯Ϣʔβʔೝূ firebase .auth() .createUserWithEmailAndPassword(email, password) ϝʔϧΞυϨεͱύεϫʔυͰϢʔβʔ࡞੒ firebase .auth() .signInWithEmailAndPassword(email, password) ϝʔϧΞυϨεͱύεϫʔυͰϩάΠϯ var provider = new firebase.auth.TwitterAuthProvider() firebase.auth().signInWithPopup(provider) 4/4ϩάΠϯ DIBSJUZDPO@PLJ !@UBLFTIJ@

Slide 11

Slide 11 text

'JSFCBTFͰ؆୯Ϣʔβʔೝূ

const ui = new firebaseui.auth.AuthUI(firebase.auth()) ui.start("#firebaseui-auth-container", { signInOptions: [ firebase.auth.GoogleAuthProvider.PROVIDER_ID, firebase.auth.FacebookAuthProvider.PROVIDER_ID, firebase.auth.TwitterAuthProvider.PROVIDER_ID, //ɾɾɾ ] }) 'JSFCBTF6*ͰϩάΠϯը໘΋؆୯࣮૷ DIBSJUZDPO@PLJ !@UBLFTIJ@

Slide 12

Slide 12 text

'JSFCBTFͰ؆୯Ϣʔβʔೝূ 'JSFCBTF6*ͰϩάΠϯը໘΋؆୯࣮૷ DIBSJUZDPO@PLJ !@UBLFTIJ@

Slide 13

Slide 13 text

'JSFTUPSFͱ 3FBMUJNF%BUBCBTF ੢ࢅڮ ஛෋ౡ

Slide 14

Slide 14 text

DIBSJUZDPO@PLJ !@UBLFTIJ@ 'JSFTUPSFͱ3FBMUJNF%BUBCBTF w ϨΠςϯγ͕ඇৗʹ௿͍ w සൟͳঢ়ଶಉظʹ࠷ద w ΫΤϦ͕ශऑ w ෳࡶͳσʔλʹ͸ෆ޲͖ w ଳҬ෯ͱετϨʔδʹͷΈ՝ۚ w 3FBMUJNF%BUBCBTFʹൺ΂ɺ ॊೈͳΫΤϦ w ෳࡶͳσʔλʹରԠ w ΦϖϨʔγϣϯ ಡΈऔΓॻ͖ࠐΈ࡟আ ɺ ଳҬ෯ɺετϨʔδʹ՝ۚ ࠓ೔͸ͪ͜Βͷ࿩ɻ

Slide 15

Slide 15 text

DIBSJUZDPO@PLJ !@UBLFTIJ@ 'JSFTUPSF ίϨΫγϣϯυΩϡϝϯτϑΟʔϧυ͔ΒͳΔ/P42-σʔλϕʔε

Slide 16

Slide 16 text

DIBSJUZDPO@PLJ !@UBLFTIJ@ 'JSFTUPSF import firebase from 'firebase' const db = firebase.firestore() db.collection('information').add({ title: 'λΠτϧ', description: 'ຊจ' }) ௥Ճ

Slide 17

Slide 17 text

DIBSJUZDPO@PLJ !@UBLFTIJ@ 'JSFTUPSF ߋ৽ db.collection('information') .doc(this.id) .update( {readAt: firebase.firestore.FieldValue .serverTimestamp() } ) ࡟আ db.collection('information') .doc(this.id) .delete()

Slide 18

Slide 18 text

DIBSJUZDPO@PLJ !@UBLFTIJ@ 'JSFTUPSF const informationQuery = await db .collection('information') .where('company', '==', company) .orderBy('visibleAt', 'desc') .limit(10) const informationSnapshot = await informationQuery.get() ݕࡧ

Slide 19

Slide 19 text

/P42-σʔλϕʔεͷ ઃܭύλʔϯղઆ ΨϯΨϥʔͷ୩

Slide 20

Slide 20 text

w ඇਖ਼نԽ w 4VC$PMMFDUJPO w ΩʔࢀরϞσϧ w 3FGFSFODFܕ DIBSJUZDPO@PLJ !@UBLFTIJ@ 'JSFTUPSFͷϦϨʔγϣϯσʔλͷऔΓѻ͍ 3%#ͱ͸ҧ͍ɺ +0*/͠ͳ͍ ϦϨʔγϣϯσʔλͲ͏औΓѻ͏ʁ

Slide 21

Slide 21 text

DIBSJUZDPO@PLJ !@UBLFTIJ@ ඇਖ਼نԽ *E OBNF BHF QSFGFDUVSF@JE ʹ͠ *E OBNF ෱Ԭݝ VTFSTςʔϒϧ QSFGFDUVSFTςʔϒϧ VTFST 㸉<6TFS*%> 㸉OBNFlʹ͠z 㸉BHF 㸉QSFGFDUVSFl෱Ԭݝz

Slide 22

Slide 22 text

VTFST 㸉<6TFS*%> 㸉OBNFlʹ͠z 㸉BHF 㸉EJBSJFT 㸉<%JBSZ*%> c㸉UJUMFlλΠτϧz c㸉DPOUFOUlຊจɻຊจɻz 㸉<%JBSZ*%> c㸉UJUMFlλΠτϧz c㸉DPOUFOUlຊจɻຊจɻz wσʔλͷؔ܎͕Θ͔Γ΍͍͢ɻ w ֊૚͕ਂ͍ͱΘ͔Γʹ͘͘ͳΔɻ DIBSJUZDPO@PLJ !@UBLFTIJ@ 4VC$PMMFDUJPO

Slide 23

Slide 23 text

const snapshot = await app.firestore() .collectionGroup("diaries") .where() .get() wDPMMFDUJPO(SPVQͰ4VC$PMMFDUJPOΛԣஅతʹݕࡧՄೳɻ DIBSJUZDPO@PLJ !@UBLFTIJ@ $PMMFDUJPO(SPVQ

Slide 24

Slide 24 text

VTFST 㸉<6TFS*%> 㸉OBNFlʹ͠z 㸉BHF EJBSJFT 㸉<%JBSZ*%> c㸉VTFS*E c㸉UJUMFlλΠτϧz c㸉DPOUFOUlຊจɻຊจɻz 㸉<%JBSZ*%> c㸉VTFS*E c㸉UJUMFlλΠτϧz c㸉DPOUFOUlຊจɻຊจɻz DIBSJUZDPO@PLJ !@UBLFTIJ@ ,FZࢀরϞσϧ

Slide 25

Slide 25 text

୯७ͳ਌ࢠؔ܎ͩͬͨΒɺ4VC$PMMFDUJPO ݕࡧͷύλʔϯ͕ෳ਺͋Ε͹ɺ,FZࢀরϞσϧ ֊૚͕ਂ͘ͳΔ΋ͷ͸ɺ,FZࢀরϞσϧ 4VC$PMMFDUJPOͱ,FZࢀরϞσϧͲͪΒΛ࢖͏͔ʁ ൑அج४͸ʁʁ ࢲͷ൑அج४ DIBSJUZDPO@PLJ !@UBLFTIJ@ 4VC$PMMFDUJPOPS,FZࢀরϞσϧ

Slide 26

Slide 26 text

EJBSJFT 㸉<%JBSZ*%> c㸉UJUMFlλΠτϧz c㸉DPOUFOUlຊจɻຊจɻz c㸉VTFSVTFST 㸉<%JBSZ*%> c㸉UJUMFlλΠτϧz c㸉DPOUFOUlຊจɻຊจɻz c㸉VTFSVTFST w/ͷ਌ࢠؔ܎ͷσʔλͰ͸3FGFSFODFܕΛར༻ɻ DIBSJUZDPO@PLJ !@UBLFTIJ@ 3FGFSFODFܕ

Slide 27

Slide 27 text

const diary = await app.firestore() .collection("diaries") .doc([diaryID]) .get() const user = diary.data().user.get() w ࢠͷσʔλͷऔಘ͕༰қɻ DIBSJUZDPO@PLJ !@UBLFTIJ@ 3FGFSFODFܕͷσʔλऔಘ

Slide 28

Slide 28 text

db.collection(“diaries”).get() .then(function(snapshot) { snapshot(function(diary) { diary.data().user.get() }) }) /໰୊ɻϧʔϓ͝ͱʹϦΫΤετɻ ˠύϑΥʔϚϯε௿Լɻ w ໾৬໊ͳͲ਺͕ݶఆతͳσʔλ͸ϧʔϓͷલʹऔಘͯ͠อ͓࣋ͯ͠ ͍ͯɺϧʔϓ಺ͰϚʔδɻ w ໊ࣾͳͲ΄ͱΜͲมߋ͞Εͳ͍σʔλ͸ඇਖ਼نԽ͓ͯ࣋ͬͯ͘͠ɻ มߋ͕͋ͬͨ৔߹͸ɺόονॲཧͰߋ৽ɻ DIBSJUZDPO@PLJ !@UBLFTIJ@ /໰୊

Slide 29

Slide 29 text

w ϖʔδωʔγϣϯ͢ΔͨΊʹ͸શମͷσʔλαΠζ͕ඞཁɻ w 'JSFTUPSFͰ͸શ݅औಘͯ͠ΫϥΠΞϯτଆͰDPVOU͢Δ͔͠ͳ͍ɻ w ݕࡧ৚݅Ͱ࠷దʹߜΓࠐΉ͜ͱΛߟ͑Δํ͕#FUUFSɻ DIBSJUZDPO@PLJ !@UBLFTIJ@ ϖʔδωʔγϣϯ͠ͳ͍

Slide 30

Slide 30 text

w ॻ͖ࠐΈ࣌ʹ݅਺ϑΟʔϧυΛΠϯΫϦϝϯτ͠ɺ݅਺ϑΟʔϧυ͔ Βσʔλ݅਺Λऔಘɻ w લϖʔδɺ࣍ϖʔδͷΈͷϖʔδωʔγϣϯɺ΋͘͠͸ʮ͞ΒʹಡΈ ࠐΉʯͰදࣔɻ DIBSJUZDPO@PLJ !@UBLFTIJ@ Ͳ͏ͯ͠΋ϖʔδωʔγϣϯ͍ͨ͠ this.lastVisibles[this.page] = snapshot.docs[snapshot.docs.length - 1] db.collection('information') .startAfter(this.lastVisibles[this.page - 1]) .limit(10) ϖʔδ͝ͱʹ࠷ऴߦͷϊʔυΛอ࣋ TUBSU"GUFSͰɺอ࣋ͨ͠࠷ऴߦϊʔυҎ߱ͷσʔλऔಘ

Slide 31

Slide 31 text

'JSFCBTF։ൃʹ͓͚Δ ΞΫηεݖݶͳͲͷ ஫ҙ఺ղઆ ྻं͕૸Δ৿ΧϑΣʮHZVUUPʯ

Slide 32

Slide 32 text

service cloud.firestore { match /databases/{database}/documents { match /users/{userId} { allow read; allow create: if request.auth.uid != null; allow update, delete: if request.auth.uid == userId; } ɹ} } جຊతʹϑϩϯτΤϯυ͔Β௚઀ૢ࡞Ͱ͖ΔͷͰɺϑϩϯτΤ ϯυଆͰ6TFS*%Λِ૷Մೳɻ 'JSFTUPSFͷηΩϡϦςΟϧʔϧͰݖݶͳͲΛ੍ݶɻ ηΩϡϦςΟϧʔϧͷઃఆ DIBSJUZDPO@PLJ !@UBLFTIJ@

Slide 33

Slide 33 text

ྫ Ϣʔβʔͷࢯ໊ɺॅॴɺ࿈བྷઌͳͲͷݸਓ৘ใͱɺχοΫωʔ ϜɺϓϩϑΟʔϧࣸਅͳͲͷެ։৘ใΛ࣋ͭσʔλ VTFST 㸉<6TFS*%> 㸉OJDLOBNFlʹ͠z 㸉QSPpMFlYYYYYYYKQHz 㸉OBNFl੢෢࢙z 㸉BEESFTTl෱Ԭࢢ౦۠ɾɾɾz 㸉FNBJMlUBLFTIJ!IPHFIPHFDPNz ϑΟʔϧυ୯ҐͰηΩϡϦςΟϧʔϧઃఆ Ͱ͖ͳ͍ͷͰɺެ։͞Εͯ͠·͏ʂʂ ηΩϡΞͳσʔλઃܭ DIBSJUZDPO@PLJ !@UBLFTIJ@

Slide 34

Slide 34 text

VTFST 㸉<6TFS*%> 㸉OJDLOBNFlʹ͠z 㸉QSPpMFlYYYYYYYKQHz QSJWBUFT 㸉<6TFS*%> 㸉OBNFl੢෢࢙z 㸉BEESFTTl෱Ԭࢢ౦۠ɾɾɾz 㸉FNBJMlUBLFTIJ!IPHFIPHFDPNz DPMMFDUJPOΛ෼͚Δɻ ηΩϡΞͳσʔλઃܭ DIBSJUZDPO@PLJ !@UBLFTIJ@

Slide 35

Slide 35 text

ྫ BENJOϢʔβʔ͸؅ཧऀը໘Λར༻Ͱ͖ͯɺҰൠϢʔβʔ͸ ؅ཧऀը໘Λར༻Ͱ͖ͳ͍ɻ await admin.auth().setCustomUserClaims( uid, { admin: true } ) if(user.customClaims.admin) { } ΧελϜΫϨʔϜʹʮBENJOʯΛઃఆ BENJOͷ৔߹ͷΈॲཧΛߦ͏ w ΧελϜΫϨʔϜ͸ݖݶ؅ཧͷ৘ใͷΈʹར༻͢Δɻ w Ϣʔβʔͷ৘ใ͸DPMMFDUJPOΛར༻͢Δɻ DIBSJUZDPO@PLJ !@UBLFTIJ@ $VTUPN$MBJNͰݖݶ؅ཧ

Slide 36

Slide 36 text

$MPVE'VODUJPOT ͰαʔόʔϨε։ൃ ѥ೤ଳ஡԰

Slide 37

Slide 37 text

$MPVE'VODUJPOTͱ͸ʁ DIBSJUZDPO@PLJ !@UBLFTIJ@ )5514ͳͲͷϦΫΤετΛτϦΨʔʹ όοΫΤϯυίʔυΛ࣮ߦͰ͖ΔαʔόʔϨεϑϨʔϜϫʔΫ

Slide 38

Slide 38 text

exports.updateUser = https.onCall( async (data, context) => { if (context && context.auth) { await db.collection(“users”) .doc(context.auth.uid) .update({ name: data.name }) return { status: "success" } } } ) $MPVE'VODUJPOTΛ࣮ߦ $MPVE'VODUJPOTʹVQEBUF6TFSΛ௥Ճ DIBSJUZDPO@PLJ !@UBLFTIJ@

Slide 39

Slide 39 text

$MPVE'VODUJPOTΛ࣮ߦ $MPVE'VODUJPOTͷVQEBUF6TFSΛ࣮ߦ DIBSJUZDPO@PLJ !@UBLFTIJ@ import { functions } from '@/plugins/firebase' const updateUser = functions.httpsCallable('updateUser') const result = await updateUser({ name: ‘੢ɹ෢࢙' }) w )551ϦΫΤετ $034ೝূͷτʔΫϯ ͳͲҙࣝ͠ͳͯ͘ྑ͍ɻ w ΫϥΠΞϯτଆͷؔ਺ͱಉ͡Α͏ʹ࣮ߦͰ͖Δɻ

Slide 40

Slide 40 text

$MPVE'VODUJPOTͷ࢖͍Ͳ͜Ζ DIBSJUZDPO@PLJ !@UBLFTIJ@ w $MPVE42-ͳͲ($1ͷػೳΛ࢖͍͍ͨɻ w 'JSFTUPSF΁ͷෳࡶͳτϥϯβΫγϣϯͷॻ͖ࠐΈɻ w 'JSFTUPSBHF΁ͷϑΝΠϧΞοϓϩʔυͱ'JSFTUPSF΁ͷॻ͖ࠐΈɻ w ֎෦αʔϏεͱͷ࿈ܞɻ

Slide 41

Slide 41 text

$MPVE'VODUJPOTͷτϦΨʔ 'JSFTUPSF΁ͷॻ͖ࠐΈΛτϦΨʔʹ$MPVE'VODUJPOTΛىಈ DIBSJUZDPO@PLJ !@UBLFTIJ@ exports.sendPushMessage = firestore .document("messages/{userId}") .onWrite(async (change, context) => { const data = change.after.data(); const previousData = change.before.data(); // uid͔Β௨஌ઌͷϢʔβʔ৘ใΛऔಘ const userRef = await admin .firestore() .collection("users") .doc(context.params.userId); . . .

Slide 42

Slide 42 text

$MPVE'VODUJPOTͰఆظ࣮ߦ $MPVE'VODUJPOTͰఆظ࣮ߦ DIBSJUZDPO@PLJ !@UBLFTIJ@ exports.setConfig = pubsub .schedule("every 5 minutes") .onRun(async (context) => { . . .

Slide 43

Slide 43 text

·ͱΊ ݹӉརౡ

Slide 44

Slide 44 text

·ͱΊ DIBSJUZDPO@PLJ !@UBLFTIJ@ w 'JSFCBTFΛ࢖͏͜ͱͰɺجຊతʹϑϩϯτΤϯυͷ։ൃٕज़͚ͩͰ ӬଓతͳσʔλΛ࢖ͬͨΞϓϦ։ൃՄೳɻ w αʔόʔͷεέʔϧ΍؅ཧ͕ෆཁͳͷͰɺΞϓϦ։ൃʹूதͰ͖Δɻ w ݕࡧͷॊೈੑ͸௿͍ɻ w 3%#ʹ׳Ε਌͠Μͩਓͩͱɺ/P42-ͷσʔλߏ଄΁ͷରԠʹ͕࣌ؒ ͔͔Δɻ w %#ઃܭ͕ॏཁɻ w ϕϯμʔϩοΫΠϯ

Slide 45

Slide 45 text

ࠓ೔ͷ࿩͕͋ͳͨͷখ͞ͳҰาʹ ͭͳ͕Γ·͢Α͏ʹɻ

Slide 46

Slide 46 text

એ఻ !@UBLFTIJ@ ڞײͰະདྷͷ஥ؒͱܨ͕Δ  (͚Ͳͳ͔ͳ͔ܨ͕Βͳ͍)SNS FLAPTALKۙ೔ެ։ ࣾһืूதʂʂ