Nuxt.jsとFirebaseでリアルタイムチャットアプリを開発した話

Transcript

1. Nuxt.jsͱFirebaseͰ ϦΞϧλΠϜνϟοτΞϓϦ ։ൃͨ͠࿩

2. 1 ࣗݾ঺հɾ ձࣾ঺հ Agenda 3 Firebase Realtime Databaseͱ͸ 4 νϟοτͷ࡞Γํ

   5 ࣮૷ɾσϓϩΠํ๏ 6 DEMO 7 ։ൃҊ݅Ͱͷಋೖࣄྫ 2 Firebaseͱ͸

3. 1 ࣗݾ঺հɾձࣾ঺հ

4. 4 ࣗݾ঺հ ԭೄ ԭೄ͔Βདྷ·ͨ͠ʂ

5. 5 ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹϑϦʔϥ

   ϯεΛ΍ͬͨޙʹ2017೥11݄ʹԭೄͰىۀɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ ઓ ◆Twitter @kanbo0605

6. Copyright Re:Build.inc All Rights Reserved. 1.ձࣾ঺հ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ໨̍̒−̕

   ◆ࣄۀ಺༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 6໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ ΤϯδχΞืूதͰ͢ʂ

7. 7 ։ൃνʔϜߏ੒ Suzuki Takayuki ਖ਼ࣾһ (ि5೔ۈ຿) Kakazu Yuki (ਖ਼ࣾһ) Ϛωδϝϯτ&։ൃ

   ։ൃ ϑϦʔϥϯε (ि2೔ۈ຿) ϑϦʔϥϯε (ि2೔ۈ຿) ϑϦʔϥϯε (ि2೔ۈ຿) ϑϦʔϥϯε (ि1೔ۈ຿) ཁ݅ఆٛ UI/UX ਖ਼ࣾһ (ि5೔ۈ຿) ෭ۀ (ि1೔ۈ຿) ͜ͷϙδγϣϯΛ ΍ͬͯ·͢ʂ

8. 8 ࣗࣾWebαʔϏεͷ։ൃ ɾαʔϏε໊ Tadoru
 https://tadoru.work/
 
 ɾγεςϜ֓ཁ ΤϯδχΞಛԽܕͷ ϦϑΝϥϧ Ϋϥ΢υιʔγϯά

9. Re:Build اۀͷ୲౰ऀ͕ ΤʔδΣϯτΛબͿ ΤʔδΣϯτ͕ࣗ෼ͷܨ ͕Γͷ͋ΔΤϯδχΞ· ͨ͸νʔϜʹ੠Λ͔͚Δ ΤʔδΣϯτ͸ ࣄલʹ৹੍ࠪ ϫʔΧʔ ΤʔδΣϯτ

   اۀ ϏδωεϞσϧ ࠾༻ใु εΩϧ ܦݧ Քಇঢ়گ εΩϧ ܦݧ Քಇঢ়گ εΩϧ ܦݧ Քಇঢ়گ ࢓ࣄΛ঺հ͢Δ ˕ ̋ ̋ × ˕ ̋ × ̋ ̋

10. 2 Firebaseͱ͸

11. 11 Firebaseͱ͸ https://www.topgate.co.jp/firebase01-what-is-firebase Firebase ͸ Google ͕ఏڙ͍ͯ͠ΔϞόΠϧ͓Αͼ Web ΞϓϦέʔ γϣϯͷόοΫΤϯυαʔϏεͰ͢ɻΫϥ΢υαʔϏεͷܗଶͰ͸

    BaaS ʹҐஔ෇͚͞Ε·͢ɻ Firebase Λ࢖͏͜ͱͰɺ։ൃऀ͸ΞϓϦ έʔγϣϯͷ։ൃʹઐ೦Ͱ͖ɺόοΫΤϯυͰಈ͘αʔϏεΛ࡞੒͢ Δඞཁ΋؅ཧ͢Δඞཁ΋͋Γ·ͤΜɻ

12. 1 2 BaaSͱ͸ http://furandon-pig.hatenablog.com/entry/2014/06/04/215727 BaaSʢBackend as a serviceʣͱ͸ɺϞόΠϧΞ ϓϦͷόοΫΤϯυػೳΛఏڙ͢ΔΫϥ΢υαʔ ϏεͰ͢ɻ

    - IaaS(Infrastructure as a Service) Amazon EC2,GMOΫϥ΢υ,PublicχϑςΟΫϥ ΢υ౳ - PaaS(Platform as a Service) Heroku,OpenShift,DotCloudͳͲ ΦϯϓϨϛε ΞϓϦέʔγϣϯ ϑΝΠΞ΢Υʔϧ σʔλ ωοτϫʔΫ OS Ծ૝Խ ϋʔυ΢ΣΞ Iaas ΞϓϦέʔγϣϯ ϑΝΠΞ΢Υʔϧ σʔλ ωοτϫʔΫ OS Paas ΞϓϦέʔγϣϯ ϑΝΠΞ΢Υʔϧ σʔλ ωοτϫʔΫ Baas/MBaas ΞϓϦέʔγϣϯ σʔλ

13. 1 3 Firebaseͷػೳ http://furandon-pig.hatenablog.com/entry/2014/06/04/215727 BaaS ʹ͸ɺಠࣗͷϏδωεϩδοΫΛ૊ΈࠐΉ͜ͱ͸Ͱ͖·ͤ ΜɻͦͷͨΊɺଟ͘ͷ BaaS ʹ͸ɺσʔλϕʔεػೳҎ֎ʹ΋ɺ SNS

    ࿈ܞ΍ Android ɺ iOS ͷ SDK ͳͲ͕ఏڙ͞Ε͍ͯ·͢ɻ

14. 1 4 Cloud Firestore http://furandon-pig.hatenablog.com/entry/2014/06/04/215727 ɾNoSQLܕͷσʔλϕʔε ɾߴػೳͳΫΤϦॲཧ ɾϦΞϧλΠϜΞοϓσʔτ ɾΦϑϥΠϯॲཧ

15. 1 5 Firebase Authentication http://furandon-pig.hatenablog.com/entry/2014/06/04/215727 ɾগͳ͍ૢ࡞Ͱߴ඼࣭ͳೝূػೳ ɾೝূ৘ใΛར༻ͯ͠ɺ
 ɹɹଞϓϩμΫτͱͷ࿈ܞ͕Մೳ ɾϑΣσϨʔγϣϯIDϓϩόΠμ
 ɹͱͷ౷߹͕Մೳ


    ɹྫɿTwitter,Facebook …etc

16. 1 6 Realtime Database http://furandon-pig.hatenablog.com/entry/2014/06/04/215727 Firebase ʹݩ͔Βؚ·Ε͍ͯΔΦϒδΣΫτܕ ͷσʔλϕʔεͰ͢ɻϦΞϧλΠϜͰΫϥΠΞ ϯτશମͷঢ়ଶΛಉظͤ͞Δ͜ͱ͕Ͱ͖ɺΦϑ ϥΠϯͰಈ࡞͢Δͱ͖͸σʔλΛΩϟογϡ͠

    ͯΦϯϥΠϯʹͳͬͨ࣌ʹࣗಈతʹσʔλΛಉ ظ͠·͢ɻ

17. 1 7 Google Cloud Functions for Firebase http://furandon-pig.hatenablog.com/entry/2014/06/04/215727 Cloud Functions

    for Firebase Λ࢖͏͜ͱͰɺΠ ϕϯτυϦϒϯͳΞϓϦέʔγϣϯΛ࡞੒͢Δ ͜ͱ͕Ͱ͖·͢ɻ SMS ϝοηʔδͷૹ৴ͳͲ ͷॲཧͷΑ͏ͳ֎෦αʔϏε࿈ܞͳͲΛߦ͏͜ ͱ͕ՄೳʹͳΓ·͢ɻ·ͨɺΫϥΠΞϯτΞϓ Ϧέʔγϣϯʹ࣮૷ͤ͞Δʹ͸ॏͨ͗͢ΔΑ͏ ͳॲཧΛ Cloud Functions for Firebase ʹҕͶ Δ͜ͱ͕Ͱ͖·͢ɻ

18. 1 8 NoSQLσʔλϕʔε Id name email password 1 ླ໦ suzuki@gm

    ail.com xxxxxx 2 ాத tanaka@gm ail.com xxxxxx 3 ໼෦ yabe@gmail .com xxxxxx 4 େਿ osugi@gmai l.com xxxxxx ϦϨʔγϣφϧσʔλϕʔε NoSQL(ίϨΫγϣϯ/υΩϡϝϯτ) υΩϡϝϯτ ίϨΫγϣϯ

19. 1 9 NoSQLσʔλϕʔε ίϨΫγϣϯ/υΩϡϝϯτ || σΟϨΫτϦπϦʔ (ϑΥϧμͱϑΝΠϧͱத਎)

20. 2 0 NoSQLσʔλϕʔε

21. 2 1 Firebaseͷར༻γʔϯ ɾWebΞϓϦͷҰ෦ͰϦΞϧλΠϜνϟοτΛಋೖ ɾWebΞϓϦͷೝূ෦෼͚ͩ࢖͏ ɾωΠςΟϒΞϓϦͷσʔλϕʔε୅ΘΓͱͯ͠࢖͏ ͳͲ

22. 3 Firebase Realtime Databaseͱ͸

23. 2 3 Firebase Realtime Databaseͱ͸ https://firebase.google.com/docs/database/?hl=ja NoSQL Ϋϥ΢υ σʔλϕʔεͰσʔλͷอ؅ͱಉظΛߦ͏͜ͱ͕Ͱ ͖·͢ɻ

    σʔλ͸͢΂ͯͷΫϥΠΞϯτʹΘͨͬͯϦΞϧλΠϜͰಉظ͞Εɺ ΞϓϦ͕ΦϑϥΠϯʹͳͬͯ΋Ҿ͖ଓ͖࢖༻Ͱ͖·͢ɻ Ϋϥ΢υϗετܕσʔλϕʔεͰ͢ɻ σʔλ͸ JSON ͱͯ͠อଘ͞Εɺ઀ଓ͞Ε͍ͯΔ͢΂ͯͷΫϥΠΞϯ τͱϦΞϧλΠϜͰಉظ͞Ε·͢ɻ

24. 2 4 Firebase Realtime Databaseͱ͸ ֊૚ߏ଄ͰݟΕΔ

25. 2 5 Firebase Realtime Databaseͱ͸

26. 4 Firebase Hostingͱ͸

27. 2 7 Firebase Hostingͱ͸ https://firebase.google.com/docs/hosting/ Firebase Hosting ͸ɺ΢ΣϒΞϓϦɺ੩తίϯςϯπɺಈతίϯςϯ π޲͚ͷߴ଎Ͱ҆શੑͷߴ͍ϗεςΟϯάΛఏڙ͠·͢ɻ Firebase

    Hosting ͸σϕϩούʔ޲͚ͷɺຊ൪؀ڥϨϕϧͷ΢Σϒ ί ϯςϯπ ϗεςΟϯάͰ͢ɻ

28. 2 8 Firebase Hostingͱ͸ https://firebase.google.com/docs/hosting/

29. 5 ࣮૷ɾσϓϩΠํ๏

30. 3 0 FirebaseͷηοτΞοϓ https://cr-vue.mio3io.com/tutorials/firebase.html ϓϩδΣΫτΛ࡞੒͢Δ ϓϩδΣΫτ໊Λೖྗͯ͠ɺ ೔ຊϦʔδϣϯΛબ୒͢Δ

31. 3 1 FirebaseͷAuth(Twitterͷઃఆ) https://cr-vue.mio3io.com/tutorials/firebase.html ࠓճ͸TwiterೝূΛબ୒

32. 3 2 FirebaseͷAuth(Twitterͷઃఆ) https://cr-vue.mio3io.com/tutorials/firebase.html ίʔϧόοΫURLΛίϐʔ ͢Δ

33. 3 3 FirebaseͷAuth(Twitterͷઃఆ) https://cr-vue.mio3io.com/tutorials/firebase.html Twitterͷ։ൃը໘ͰίʔϧόοΫ URLΛઃఆ͢Δ

34. 3 4 Vue.jsͰFirebaseΛ࢖͏ https://cr-vue.mio3io.com/tutorials/firebase.html $ npm install firebase import firebase

    from ‘firebase' Ͱ ಡΈࠐΉ

35. 3 5 Vue.jsͰFirebaseΛ࢖͏ https://cr-vue.mio3io.com/tutorials/firebase.html Firebase ͷʮAuthenticationʯϖʔδͰ࣍ͷΑ͏ͳίʔυ͕දࣔ͞ΕΔͷͰɺషΓ෇͚Δ JSΛίϐʔ͢Δ

36. 3 6 Vue.jsͰFirebaseΛ࢖͏ https://cr-vue.mio3io.com/tutorials/firebase.html

37. 3 7 Vue.jsͰFirebaseΛ࢖͏ https://cr-vue.mio3io.com/tutorials/firebase.html main.js

38. 3 8 Vue.jsͰFirebaseΛ࢖͏ https://cr-vue.mio3io.com/tutorials/firebase.html App.vue

39. 3 9 σϓϩΠ https://qiita.com/gupuru/items/25a6722f6f802d3a5250

40. 4 0 σϓϩΠ https://qiita.com/gupuru/items/25a6722f6f802d3a5250

41. 6 DEMO

42. 4 2 ߏ੒ ϩάΠϯ Firebase Hosting Firebase Auth ϩάΠϯ RealTimeDB

    ϝοηʔδΛૹ৴

43. 4 3 DEMO https://myfirstfirebase-21fa3.firebaseapp.com/

44. 7 ։ൃҊ݅Ͱͷಋೖࣄྫ

45. 4 5 બఆٕͨ͠ज़ ▪ٕज़ཁ݅ ɾαʔόαΠυ PHP(Laravel5.8) ɾϑϩϯτΤϯυ JavaScript(Vue.js,Nuxt.js) ɾςετ PHPUnit,Cypress

    ɾ੩తղੳ ESlint,PHPStan ɾΠϯϑϥ AWS(EC2,S3,RDS(mariadb)) ɾ։ൃ؀ڥ php7,nginx,mariadb,docker,webpack ɾͦͷଞ gitlab,gitlabCI(ࣗಈσϓϩΠͳ Ͳ),Slack,phpStorm

46. ϑϩϯτΤϯυ αʔόαΠυ શମߏ੒ Gitlab CI ϥΠϒϥϦͳͲ Firebase ϥΠϒϥϦͳͲ

47. νϟοτػೳͷ࣮ݱํ๏Λٞ࿦ WebSocketɺϩϯάϙʔϦϯάɺFirebaseͷͲΕΛ࢖͏͔ʁ ɾ൑அج४ - ࣮૷೉қ౓͕ͦ͜·Ͱߴ͘ͳ͍ɻ͋͘·Ͱεϐʔυॏࢹɻ - ϝϯςφϯείετ͕௿͍ɻ - ޙʑɺϝοηʔδͷจݴΛղੳͯ͠෼ੳ͢ΔՄೳੑ͋Γɻ -

    ࠾༻ͷ΢ϦʹͳΔΑ͏ͳٕज़ͩͱঘྑ͍ɻ

48. ٞ࿦ͷ݁Ռ Firebaseʹܾఆʂʂ ɾબఆཧ༝ - αϯϓϧΛ࡞ͬͯΈͨ࣌ʹ൒೔͘Β͍Ͱ࣮૷Ͱ͖ͨɻ - ผҊ݅Ͱ࡞ͬͨϝοηʔδػೳ͕1ਓ݄΄Ͳ͔͚࣮ͯ૷͕ͨ͠ɺ όά͕ଟ͘ϝϯςφϯείετΛԼ͔͛ͨͬͨɻ - LaravelEcho(Websocket)΍ϩϯάϙʔϦϯάͰ

    ࣮૷ͨ͠Β͚ͬ͜͏޻਺͕͔͔Γͦ͏ͩͬͨɻ - ࠾༻ͷ΢ϦʹͳΓͦ͏ɻ

49. FirebaseͰͷݒ೦఺ - Firebase্ͷDatabaseͷແྉ࿮͕1GB͔͠ͳ͍ҝɺ ελʔτΞοϓاۀͰ՝ۚ͞Ε·͘Δͷ͸ΩπΠɻ - ίϨΫγϣϯؒͰ֎෦ΩʔΛ࣋ͨͤΒΕͳ͍ɻ - ݕࡧ৚݅ʹҰ෦ɺ੍ݶ͋Γɻ

50. FirebaseΛ࢖ͬͨνϟοτػೳͷશମߏ੒(૝ఆ) ϩάΠϯ Token͕ฦ٫͞ΕΔ /message αʔόαΠυଆͰ ϩάΠϯॲཧΛ࣮ߦ tokenΛൃߦɻ νϟοτΛߦ͏ ϑϩϯτΤϯυ /login

    ϒϥ΢β͔ΒΞΫηε͠ɺ ϢʔβIDͱύεϫʔυΛೖྗ ϦΞϧλΠϜͰϝοηʔδͷ΍ΓͱΓ ఆظతʹDBʹϝοηʔδσʔ λΛॻ͖ࠐΈʹ͍͘ eyJ0eXAiOiJKV1QiLCJhbGci OiJIUzI1NiJ9.eyJpc3MiOiJod HRwOlwvXC9sb2NhbGhvc3 RcL2FwaVwvdjFcL2xvZ2luIiw iaWF0IjoxNTQxMzk3NDAyLC JleHAiOjE1NDE0MDEwMDIs Im5iZiI6MTU0MTM5NzQwMi wianRpIjoiSGx1eUVXRU5Jc TdWRHZ6ZyIsInN1YiI6MSwi cHJ2IjoiMWFiMTVlMTVhNG NiODBjOWY3MTJkZTQ3OD ViMmIyMDk4ZGFlMjhjMyJ9. Qkbo7Mf4kMlTbWT- r4L6GhSUUlTUE7p7OHPdob FEXiI Tokenͷྫ { "users": { "user_01": { "user_id": 23, "company_id": 43 "rooms": ["room01", "room02"] }, }, "rooms": { "room01": { "last_message": "͜Μʹͪ͸ʂ", "created_at": datetime }, "room02": { ... } }, } αʔόαΠυ

51. ίϨΫγϣϯ͸جຊతʹ͸Ұͭʹ·ͱΊͯɺ಺෦ͰϦϨʔγϣϯΛ࣋ͨͤΔ ίϨΫγϣϯͷJSONߏ଄ྫ FirebaseͷDatabaseྫ

52. ߏ੒ LaravelଆͰ΋ ϩάΠϯࡁΈ

53. ը໘Πϝʔδ

54. ը໘Πϝʔδ

55. ը໘Πϝʔδ ͜ͷ෦෼͸ VueComponent

56. ը໘Πϝʔδ

57. ࣮ࡍɺӡ༻ͯ͠ΈͯͲ͏͔ͩͬͨʁ - LaravelଆͰϩάΠϯͯ͠ɺFirebaseଆͰ΋ϩάΠϯ͢Δͱ͍͏ গ͠ෳࡶͳ࣮૷ʹͳͬͨɻ - Componentͱͯ͠੾Γग़֤ͯ͠ը໘ʹ࣮૷Ͱ͖Δͷ͸ศར - ࢥͬͨΑΓόά͕ଟ͍ - ϢʔβλΠϓ͕̏छྨ͋ͬͯɺϝοηʔδͰ͖ΔਓͷϑΟϧ

    λϦϯάͳͲ্͕ख͍ͬͯ͘ͳ͍ࣄ͕͋Δɻ

58. 5 8 ࠂ஌ 10/12 PHPΧϯϑΝϨϯεԭೄ։࠵͠·͢ʂ https://phpcon.okinawa.jp