Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

02886e95c50822b9aa2552da1e518491?s=47 Takayuki
August 17, 2019

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

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

02886e95c50822b9aa2552da1e518491?s=128

Takayuki

August 17, 2019
Tweet

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