B2B企業がCloudFunctionsで C2Cサービスに挑んだ話

B2B企業受託がメインのIT企業が、CloudFunctionsとFirebaseを使って、BtoC、CtoCに挑んだ話です。

これからサーバーレス、Firebase触ってみたい方向けの資料になります。

Firebaseの開発の詳細は、こちらのアドベントカレンダーをご参照ください。
https://qiita.com/advent-calendar/2019/diffeasy24

Transcript

1. ##اۀ͕$MPVE'VODUJPOTͰ
   $$αʔϏεΛ্ཱͪ͛ͨ࿩
2. ##اۀ͕$MPVE'VODUJPOTͰ
   $$αʔϏεʹ௅Μͩ࿩
3. w͜Ε͔ΒαʔόʔϨεʹνϟϨϯδ͍ͨ͠ํ ·ͣ͸͡Ίʹର৅ऀ w'JSFCBTF
   
   $MPVE'VODUJPOTʹڵຯ͕͋Δํ
4. wࣗݾ঺հձࣾ঺հ
   wαʔόʔϨε΁ͷาΈ
   w$MPVE'VODUJPOTͱ'JSFCBTF
   wϝϦοτ
   
   σϝϦοτ
   w࠷ޙʹ
5. wࣗݾ঺հձࣾ঺հ
   wαʔόʔϨε΁ͷาΈ
   w$MPVE'VODUJPOTͱ'JSFCBTF
   wϝϦοτ
   
   σϝϦοτ
   w࠷ޙʹ
6. ੢
   ෢࢙ גࣜձࣾEJ⒎FBTZ
 औక໾$50 !@UBLFTIJ@ 4*FSͰ೥ؒओʹۀ຿γεςϜͷ
 ։ൃ ౦ژͰDPGPVOEFSͱͯ͠*5
 ϕϯνϟʔ্ཱͪ͛ ϑϦʔϥϯεϓϩάϥϚʔͱͯ͠
 ಠཱ ೥EJ⒎FBTZʹδϣΠϯ $50ͱͯ͠*5ͷྗͰ
   ੈքதͷzΉ͔͍ͣ͠zΛ؆୯ʹ
 ͢΂͘׆ಈத ˡࠓ͜͜
7. ੈքதͷzΉ͔͍ͣ͠zΛ؆୯ʹ
8. ΦʔμʔϝΠυ
   डୗ։ൃ
10. ೥
 શࠃن໛େձಋೖ ` `
11. wࣗݾ঺հձࣾ঺հ
    wαʔόʔϨε΁ͷาΈ
    w$MPVE'VODUJPOTͱ'JSFCBTF
    wϝϦοτ
    
    σϝϦοτ
    w࠷ޙʹ
12. UP#डୗͰͷҰൠతͳαʔόʔߏ੒
13. $MPVE
 %/4 $MPVE
 $%/ $MPVE
 -PBE
    #BMBODJOH $PNQVUF
    &OHJOF $PNQVUF
    &OHJOF $MPVE
 42- $MPVE
 4UPSBHF w ϑϩϯτΤϯυϓϩάϥϜ
    w ը૾ͳͲ੩తίϯςϯπ w ن໛ʹԠͯ͡ෛՙ෼ࢄ w όοΫΤϯυϓϩάϥϜ w ن໛ʹԠͯ͡ෳ਺୆ߏ੒ w ϩάϑΝΠϧ
    w ಈతϑΝΠϧ $MPVE
 .FNPSZTUPSF w 3FEJT w %#
14. αόʔϨεͱͷग़ձ͍
15. Google͕ఏڙ͢ΔBaaS(Backend as a Service) 2011೥ʹFirebase, Inc.ʹΑͬͯ։ൃ 2014೥ʹGoogleʹങऩ
17. ࣗࣾαʔϏεͰͷ࠾༻
18. ໨ඪୡ੒Ϛϯμϥʔτ ࣗ૸ܕ૊৫Λ໨ࢦ͢اۀͷͨΊͷνʔϜ໨ඪୡ੒πʔϧ
19. w ࢢ৔ͷχʔζ͕ෆ໌֬
    w ࠷খͷਓ਺ίετظؒͰ௅Έ͍ͨ
    w ΠϯϑϥΤϯδχΞ͍ͳ͍ ͳͥ'JSFCBTFΛ࠾༻
20. 'JSFCBTFͷߏ੒ 7VFKT
 ͷ41"
21. w ೔ʑมΘΔཁ݅΁ͷॊೈͳରԠ
    w 3%#೴Ͱͷ/P42-ઃܭˠඇਖ਼نԽ͕伴
    w Ϩεϙϯε͕஗͍ˠແବͳΫΤϦൃߦ
    w ؅ཧπʔϧ͕ͳ͍
    w ϚΠάϨʔγϣϯ͕େม ग़͖ͯͨ՝୊
22. ྫ͑͹ɾɾɾ ೔ʑมΘΔཁ݅΁ͷॊೈͳରԠ w ࠷ॳ͸Ϛϯμϥʔτ͕ొ࿥ɾߋ৽Ͱ͖Ε͹ྑ͍ɻ
    w ໨ඪʹରͯ͠ίϝϯτ͍ͨ͠ɻ w ίϝϯτʹର͍͍ͯ͠Ͷʂ͍ͨ͠ɻ
    w ϚϯμϥʔτͱίϝϯτΛλΠϜϥΠϯʹग़͍ͨ͠ɻ
    w ෦ॺ͝ͱʹϢʔβʔΛ؅ཧ͍ͨ͠ɻ
23. 'JSFCBTFͷߏ੒ 7VFKT
 ͷ41" Cloud SQL
24. 4FSWFSMFTT71$"DDFTT
    Ќ൛
25. 3%#ͱ/P42- 3%# 'JSFTUPSF ෳࡶͳߏ଄ͷσʔλ ୯७ͳߏ଄ͷσʔλ ݫີͳҰ؏ੑ͕ඞཁͳσʔλ ετοΫ͍ͯ͘͠σʔλ ߋ৽ɾ࡟আɾ෇͚ସ͕͑ଟ͍ ୯७ͳऔಘ
26. ΩϟϯϖʔϯαΠτͷ૬ஊ
27. w ୹ೲظ
    w ֬ఆͨ͠ཁ݅
    w ΞΫηε਺ͷ༧ଌෆೳ
    w $.౳ʹΑΓॠؒతʹΞΫηε૿Ճ
    w ػೳ͸γϯϓϧʢΩϟϯϖʔϯίʔυൃߦʣ
    w γεςϜ͕ࢭ·ͬͨΒ౰વΫϨʔϜ ΩϟϯϖʔϯαΠτͷ૬ஊ
28. 'JSFCBTFͷߏ੒ 7VFKT
 ͷ41" ֎෦"1* ֎෦"1*ೝূΩʔ
29. w େྔͷΩϟϯϖʔϯίʔυΛϚελʔొ࿥͢Δͷʹ ࣌ؒΛཁ͢Δ
 ˠ'JSFTUPSF΁ͷσʔλ౤ೖ͸౓ʹ্͕݅ݶ
    w Ωϟϯϖʔϯͷ൓ԠʹΑͬͯ௥ՃͰສ݅୯Ґ ͰΩϟϯϖʔϯίʔυ͕ૹΒΕͯ͘Δ ग़͖ͯͨ՝୊
30. 'JSFCBTFͷߏ੒ 7VFKT
 ͷ41" Cloud SQL ֎෦"1* ֎෦"1*ೝূΩʔ
31. w $MPVE42-͕ϘτϧωοΫʹ
    w $MPVE'VODUJPOTʹΑͬͯɺॊೈʹରԠͰ ͖ͨ
    w γϯϓϧͳػೳͩͬͨͷͰɺߴ଎ʹߏஙͰ͖ͨ
    w ҆ఆՔಇͰɺ͓٬༷΋ຬ଍ ৼΓฦΓ
32. $UP$ࣗࣾαʔϏε΁ͷ௅ઓ
33. ࡞ͬͨ$UP$αʔϏε Ձ஋ڞײ͢Δਓ͕ͨͪܨ͕Δ
 ϚονϯάϓϥοτϑΥʔϜ • Ϣʔβʔ/ϓϩϑΟʔϧొ࿥ • νϟοτ • νϟοτͷ΍ΓͱΓͰ਌ີ౓UP • ਌ີ౓͕͕͋Δͱ༑ୡͱͯ͠ܨ͕Δ
34. ࡞ͬͨ΋ͷͷɾɾ৭ʑ͋Γ·ͨ͠ɾɾ
35. <൪֎ฤ-5>
    डୗاۀ͕
    ৽نαʔϏεΛ
    ্ཱͪ͛Δ࣌͸
    ͜͜ʹؾΛ͚ͭΖʂ
36. ࣾձ৘੎ ΠϯλʔωοτͰͷग़ձ͍͕
    ࣾձ໰୊ʹɾɾ
37. ͳΜͰࠓͦΕ΍Δͷʁ डୗνʔϜͱ৽نαʔϏενʔϜʹ
    ෼͚ͯΈͨ wԿΛ΍͍ͬͯΔͷ͔Α͘Θ͔Βͳ͍ɾɾʁ
    wͳΜͰࠓ΍Δඞཁ͕͋Δͷɾɾʁ ͳΜ͔ͪΐͬͱ͗͘͠Ό͘ɾɾɾ
38. ՝୊ղܾܕͱ՝୊ൃݟܕ ՝୊ղܾܕ ՝୊ൃݟܕ w ՝୊͕໌֬
    w ΍Δҙٛ΍ɺ΍ͬͨ݁ՌͷมԽ͕૝૾͠΍͍͢ w ʮ՝୊ʯ͕ԾઆͰ͋Γɺෆ໌֬ νʔϜҎ֎ͷϝϯόʔͷೲಘײ
 ͕ඞཁ
39. εϐʔυͱೲಘײ w εϐʔσΟʹࣄۀΛਐΊΔͨΊʹϝϯόʔͷ
 ೲಘײ͕େࣄ
    w ೲಘײ㱠શһࢍ੒
    w ఆظతͳঢ়گͷڞ༗͕େࣄ
    w ԿΛ΍͍ͬͯΔ͔ʁ
    w ࠓޙͲͷΑ͏ʹਐΊΔ͔ʁ
    w ఫୀͷϙΠϯτ͸ʁ
40. Ұ୴ετοϓɻ
41. ໭Γ·͢ɾɾ
42. w $UP$͸ະ஌ͷྖҬ
    w ΞΫηε਺͕༧ଌෆՄೳ
    w ࢢ৔ͷχʔζ͕ෆ໌֬
    w ࠷খͷਓ਺ίετظؒͰ௅Έ͍ͨ
    w ·ͣ͸.71Ͱࣄۀݕূ
    w ΠϯϑϥΤϯδχΞ͍ͳ͍ ͳͥ'JSFCBTF$MPVE'VODUJPOTΛ࠾༻
43. αʔϏεͷߏ੒ 7VFKT
 ͷ41" Cloud SQL ϦΞϧλΠϜσʔλ ୯७ʹετοΫ
 ͍ͯ͘͠σʔλ ؔ܎ੑΛ࣋ͭ
 σʔλ
44. wࣗݾ঺հձࣾ঺հ
    wαʔόʔϨε΁ͷาΈ
    w$MPVE'VODUJPOTͱ'JSFCBTF
    wϝϦοτ
    
    σϝϦοτ
    w࠷ޙʹ
45. ։ൃʹ͍ͭͯͷϙΠϯτղઆ
46. 'JSFCBTF"VUIFOUJDBUJPOͰ
    ϩάΠϯ࣮૷
47. 'JSFCBTF"VUIFOUJDBUJPOͰ؆୯ೝূ ϝʔϧ ύεϫʔυೝূ΍
 ֤छ 4/4ೝূ͕؆୯
48. 'JSFCBTF6*ͰϩάΠϯը໘΋ <template> <firebase-auth /> </template> <script> import FirebaseAuth ɹɹ from "@/components/FirebaseAuth"; export default { name: "Login", components: { FirebaseAuth } }; </script>
49. 'JSFCBTF6*ͰϩάΠϯը໘΋
50. 3FBMUJNF%BUBCBTFͰ
    ϦΞϧλΠϜνϟοτ
51. 3FBMUJNF%BUBCBTF
    
    'JSFTUPSF • ଟ࠼Ͱߴ଎ͳΫΤϦ • ࣗಈͰεέʔϧ • ެࣜαΠτͰਪ঑ • γϯϓϧͳσʔλΛ
 ؆୯ʹอଘ • ϨΠςϯγ͕ඇৗʹ௿͍ • සൟͳঢ়ଶಉظʹ࠷ద
52. firebase .database() .ref("messages") .push( { messageText: this.messageText, uid: this.uid } ); σʔλͷ௥Ճ
53. σʔλ͕௥Ճ͞Ε͍ͯΔ͜ͱΛ֬ೝ
54. firebase .database() .ref("messages") .on("child_added", snapshot => { this.messages.unshift(snapshot.val()); }); σʔλͷϦΞϧλΠϜߋ৽
55. σʔλͷϧʔϧ
56. σʔλͷϧʔϧઃఆ͸ࡉ৺ͷ஫ҙΛ ΫϥΠΞϯτ͔Β௚઀σʔλΛߋ৽ ِ૷Մೳ 3FBMUJNF%BUBCBTF
    
    'JSFTUPSFଆͰϧʔϧ؅ཧ
57. σʔλͷϧʔϧઃఆ͸ࡉ৺ͷ஫ҙΛ match /databases/{database}/documents { match /users/{uid} { allow update, delete: if request.auth.uid == uid; allow create, read : if request.auth.uid != null; } match /messages/{uid} { allow update, delete: if request.auth.uid == uid; allow create, read: if request.auth.uid != null; } }
58. $MPVE'VODUJPOTͷ࣮ߦ
59. $MPVE'VODUJPOTͷ࣮ߦ exports.hello = https.onCall(async (data, context) => { }); exports.updateUser = https.onCall(async (data, context) => { }); exports.getUser = https.onCall(async (data, context) => { }); exports.sendPushMessage = firestore .document(“messages/{userId}") .onWrite(async (change, context) => { }); JOEFYKT
60. $MPVE'VODUJPOTͷ࣮ߦ σϓϩΠ
61. $MPVE'VODUJPOTͷ࣮ߦ const hello = functions.httpsCallable("hello"); const result = await hello({ name: "takeshi" }); this.message = result.data.message; ΫϥΠΞϯταΠυ exports.hello = https.onCall((data, context) => { return { message: `Hello, ${data.name}.`, uid: context.auth.uid }; }); αʔόʔαΠυ OPEFKT ೝূ৘ใͷऔಘ΋؆୯
62. τϦΨʔͷར༻
63. 'JSFTUPSFߋ৽ΛτϦΨʔʹ௨஌ exports.sendPushMessage = firestore .document("messages/{userId}") .onWrite(async (change, context) => { const data = change.after.data(); const previousData = change.before.data(); const userRef = await admin .firestore() .collection("users") .doc(context.params.userId); const userDoc = await userRef.get(); ߋ৽લޙͷ஋औಘ
64. 'JSFTUPSFߋ৽ΛτϦΨʔʹ௨஌ const payload = { notification: { title: "௨஌λΠτϧ", body: "௨஌ຊจ" } }; admin .messaging() .sendToDevice(user.fcmToken, payload); ϓογϡ௨஌ૹ৴
65. wࣗݾ঺հձࣾ঺հ
    wαʔόʔϨε΁ͷาΈ
    w$MPVE'VODUJPOTͱ'JSFCBTF
    wϝϦοτ
    
    σϝϦοτ
    w࠷ޙʹ
66. w ϓϩμΫτཁ݅ͷ։ൃʹूதͰ͖ͨ
    w ೝূपΓͷॲཧ͕؆୯
    w ̍ॲཧɿ̍ؔ਺ͳͷͰɺυϝΠϯΛ·͕ͨͳ͍ɺ ϚΠΫϩαʔϏεతͳͭ͘ΓΛҙࣝͰ͖ͨ ϝϦοτ
67. w ϕϯμʔϩοΫΠϯ
    w ྉۚͷ༧ଌ͕೉͍͠ɾා͍
    w σʔλϕʔεϧʔϧͷઃఆ࿙ΕͳͲ஫ҙ σϝϦοτ
68. wࣗݾ঺հձࣾ঺հ
    wαʔόʔϨε΁ͷาΈ
    w$MPVE'VODUJPOTͱ'JSFCBTF
    wϝϦοτ
    
    σϝϦοτ
    w࠷ޙʹ
70. EJ⒎FBTZ$50੢ͷ
  ʹ͠ ೔࿈ଓ౤ߘνϟϨϯδ
    
 "EWFOU
    $BMFOEBS
     ઈࢍެ։தʂ ޙչ
71. NBLF
    EJ⒏DVMU
    UIJOHT
    FBTZ ੈքதͷzΉ͔͍ͣ͠zΛ؆୯ʹ