Nuxt.js + Firebaseでの開発と高速化に挑んだ話

Nuxt.js + FirebaseでWebアプリにチャット機能の導入する際に
工夫した点、感じたメリット・デメリットについてお話します。
その他には、フロント周りでボトルネックになっていた処理を調査し、高速化した話をする予定です。

Transcript

1. Nuxt.js + Firebaseでの開ൃと 高速化に挑んだ話 鈴木孝之
2. "HFOEB ࣗݾ঺հɾձࣾ঺հ
   'JSFCBTFಋೖʹ͋ͨͬͯͷܦҢ
   'JSFCBTFͷಋೖɻͦΕ͔Βͷݒ೦ɾվળ఺
   Ϗϧυߴ଎ԽͰ΍ͬͨࣄ
3. ࣗݾ঺հɾձࣾ঺հ
4. 0.ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ※ಉ੏ಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹಠཱɻ ɾݱࡏ͸ɺडୗ։ൃΛ΍ΓͭͭɺࣗࣾWebαʔϏεΛ։ൃதɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ ◆εΩϧ PHP,Symfony2,CakePHP3,Laravel5, JavaScript,backbone.js,Angular.js
5. 0.ࣗݾ঺հ
6. Copyright Re:Build.inc All Rights Reserved. ձࣾ঺հ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ໨̍̒−̕ ◆ࣄۀ಺༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 6໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ
7. 7 ࣗࣾ։ൃνʔϜߏ੒ Suzuki Takayuki ਖ਼ࣾһ (ि5೔ۈ຿) Kakazu Yuki (ਖ਼ࣾһ) Ϛωδϝϯτ&։ൃ ։ൃ ϑϦʔϥϯε (ि2೔ۈ຿) ϑϦʔϥϯε (ि2೔ۈ຿) ϑϦʔϥϯε (ि2೔ۈ຿) ϑϦʔϥϯε (ि1೔ۈ຿) ཁ݅ఆٛ UI/UX ਖ਼ࣾһ (ि5೔ۈ຿) ෭ۀ (ि1೔ۈ຿) ͜ͷϙδγϣϯΛ ΍ͬͯ·͢ʂ
8. 'JSFCBTFಋೖʹ͋ͨͬͯͷܦҢ
9. 9 ࣗࣾWebαʔϏεͷ։ൃ ɾαʔϏε໊ Tadoru
 https://tadoru.work/
 
 ɾγεςϜ֓ཁ ΤϯδχΞಉ࢜ͷ࢓ࣄ঺հ ίϛϡχςΟ
10. Re:Build اۀͷ୲౰ऀ͕ ΤʔδΣϯτΛબͿ ΤʔδΣϯτ͕ࣗ෼ͷܨ ͕Γͷ͋ΔΤϯδχΞ· ͨ͸νʔϜʹ੠Λ͔͚Δ ΤʔδΣϯτ͸ ࣄલʹ৹੍ࠪ ϫʔΧʔ ΤʔδΣϯτ اۀ ϏδωεϞσϧ ࠾༻ใु εΩϧ ܦݧ Քಇঢ়گ εΩϧ ܦݧ Քಇঢ়گ εΩϧ ܦݧ Քಇঢ়گ ࢓ࣄΛ঺հ͢Δ ˕ ̋ ̋ × ˕ ̋ × ̋ ̋
11. 11 બఆٕͨ͠ज़ ▪ٕज़ཁ݅ ɾαʔόαΠυ 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
12. ϑϩϯτΤϯυ αʔόαΠυ શମߏ੒ Gitlab CI ϥΠϒϥϦͳͲ Firebase ϥΠϒϥϦͳͲ
13. શମͷΞʔΩςΫνϟ(̐ͭͷυϝΠϯผ) ϑϩϯτΤϯυ αʔόαΠυ blade MPAߏ੒ ϑϩϯτΤϯυ αʔόαΠυ SPAߏ੒ αʔόαΠυ ϑϩϯτΤϯυ αʔόαΠυ blade MPAߏ੒ ϫʔΧʔը໘ ΤʔδΣϯτը໘ اۀը໘ SPAߏ੒ ϑϩϯτΤϯυ ӡӦը໘ MPA SPA
14. νϟοτػೳͷ࣮ݱํ๏Λٞ࿦ WebSocketɺϩϯάϙʔϦϯάɺFirebaseͷͲΕΛ࢖͏͔ʁ ɾ൑அج४ - ࣮૷೉қ౓͕ͦ͜·Ͱߴ͘ͳ͍ɻ͋͘·Ͱεϐʔυॏࢹɻ - ϝϯςφϯείετ͕௿͍ɻ - ޙʑɺϝοηʔδͷจݴΛղੳͯ͠෼ੳ͢ΔՄೳੑ͋Γɻ - ࠾༻ͷ΢ϦʹͳΔΑ͏ͳٕज़ͩͱঘྑ͍ɻ
15. ϩϯάϙʔϦϯάͷௐࠪ݁Ռ ɾLong pollingͱ͸ʁ ݹయతͳํ๏ͰɺҰఆ࣌ؒ͝ͱʹαʔόʹߋ৽Λ໰͍߹ΘͤΔख๏ɻ ϖʔδશମΛऔಘ͢ΔͱߴෛՙͱͳΔͨΊɺAjax௨৴ͰϦΫΤετ͠มߋ෦෼Λߋ৽͢Δͷ͕ ࠷ۙͰ͸ओྲྀɻ ΫϥΠΞϯτ͔Βૹ৴͞ΕͨϦΫΤετΛαʔό͕͍ͬͨΜอཹ͠ɺ αʔόଆͰΠϕϯτ͕ൃੜͨ͠ࡍʹ೚ҙͷλΠϛϯάͰϨεϙϯεΛฦ͢ख๏ɻ ϦΞϧλΠϜੑ͸ߴ͍ɻ ແବͳ໰͍߹Θͤ͸ൃੜ͠ͳ͍͕ɺ௕࣌ؒHTTPίωΫγϣϯΛ઎༗ͯ͠͠·͏ɻ Ұ౓ΫϥΠΞϯτʹPushͨ͠Βɺ·ͨΫϥΠΞϯτ͔ΒͷϦΫΤετΛ଴ͨͳ͍ͱ͍͚ͳ ͍ɻ λΠϛϯάʹΑͬͯ͸λΠϜϥά͕ൃੜ͢Δɻ http://peacock.ky-3.net/realtime_notification/realtime_notification
16. ϩϯάϙʔϦϯάͷ࣮૷ྫ http://peacock.ky-3.net/realtime_notification/realtime_notification
17. WebSocketௐࠪ݁Ռ ɾWebsocket HTTPΛ֦ுͨ͠ϦΞϧλΠϜ௨৴Λલఏͱͯ͠૒ํ޲ʹσʔλ͕ૹड৴Ͱ͖ Δ௨৴ϓϩτίϧͷ͜ͱɻ খ͞ͳσʔλαΠζͰ৘ใΛૹड৴Ͱ͖ΔͨΊHTTPʹൺ΂Δͱ͔ͳΓ௨৴ ίετ͕௿͍ɻ TCPίωΫγϣϯΛுΓͬͺͳ͠ʹ͢ΔͨΊɺϊϯϒϩοΩϯάI/Oαʔό ʢNode.jsʣ͕ඞཁɻ
18. Laravel EchoͰ࣮ݱ͢Δ৔߹ http://crought.com/blog/ %E3%80%90laravel%E3%81%A7%E7%B0%A1%E6%98%93%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%80%911- %E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E6%A9%9F%E8%83%BD%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF %E3%81%AE%E7%90%86-173/ Լهͷهࣄ͔ΒҾ༻
19. Laravel EchoͰ࣮ݱ͢Δ৔߹ http://crought.com/blog/ %E3%80%90laravel%E3%81%A7%E7%B0%A1%E6%98%93%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%80%911- %E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E6%A9%9F%E8%83%BD%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF %E3%81%AE%E7%90%86-173/ Լهͷهࣄ͔ΒҾ༻
20. Laravel EchoͰ࣮ݱ͢Δ৔߹ http://crought.com/blog/ %E3%80%90laravel%E3%81%A7%E7%B0%A1%E6%98%93%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%80%911- %E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E6%A9%9F%E8%83%BD%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF %E3%81%AE%E7%90%86-173/ Լهͷهࣄ͔ΒҾ༻
21. Laravel EchoͰ࣮ݱ͢Δ৔߹ http://crought.com/blog/ %E3%80%90laravel%E3%81%A7%E7%B0%A1%E6%98%93%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%80%911- %E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E6%A9%9F%E8%83%BD%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF %E3%81%AE%E7%90%86-173/ Լهͷهࣄ͔ΒҾ༻
22. Laravel EchoͰ࣮ݱ͢Δ৔߹ http://crought.com/blog/ %E3%80%90laravel%E3%81%A7%E7%B0%A1%E6%98%93%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%80%911- %E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E6%A9%9F%E8%83%BD%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF %E3%81%AE%E7%90%86-173/ Լهͷهࣄ͔ΒҾ༻
23. Laravel EchoͰ࣮ݱ͢Δ৔߹ http://crought.com/blog/ %E3%80%90laravel%E3%81%A7%E7%B0%A1%E6%98%93%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%80%911- %E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E6%A9%9F%E8%83%BD%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF %E3%81%AE%E7%90%86-173/ ೉ͦ͠͏…ʂ
24. Firebaseௐࠪ݁Ռ αʔόෛՙ ಋೖίετ ϝϯςφϯείετ Firebase ͋·Γ͔͔Βͳ͍ ௿Ί গͳ͍ ϩϯάϙʔϦϯά ͔͔Δ ௿Ί ී௨ WebSocket ͋·Γ͔͔Βͳ͍ ߴΊ ଟΊ
25. ٞ࿦ͷ݁Ռ Firebaseʹܾఆʂʂ ɾબఆཧ༝ - αϯϓϧΛ࡞ͬͯΈͨ࣌ʹ൒೔͘Β͍Ͱ࣮૷Ͱ͖ͨɻ - ผҊ݅Ͱ࡞ͬͨϝοηʔδػೳ͕1ਓ݄΄Ͳ͔͚࣮ͯ૷͕ͨ͠ɺ όά͕ଟ͘ϝϯςφϯείετΛԼ͔͛ͨͬͨɻ - LaravelEcho(Websocket)΍ϩϯάϙʔϦϯάͰ ࣮૷ͨ͠Β͚ͬ͜͏޻਺͕͔͔Γͦ͏ͩͬͨɻ - ࠾༻ͷ΢ϦʹͳΓͦ͏ɻ
26. FirebaseಋೖલͰͷݒ೦఺ - Firebase্ͷDatabaseͷແྉ࿮͕1GB͔͠ͳ͍ - ίϨΫγϣϯؒͰ֎෦ΩʔΛ࣋ͨͤΒΕͳ͍ɻ - ݕࡧ৚݅ʹҰ෦ɺ੍ݶ͋Γɻ
27. 'JSFCBTFͷಋೖɻ
    ͦΕ͔Βͷݒ೦ɾվળ఺
28. Firestoreͷߏ੒ usersίϨΫγϣϯ roomsίϨΫγϣϯ
29. usersίϨΫγϣϯ ίϨΫγϣϯͷJSONߏ଄ྫ FirebaseͷFireStoreྫ
30. roomsίϨΫγϣϯ ίϨΫγϣϯͷJSONߏ଄ྫ FirebaseͷFireStoreྫ
31. ը໘Πϝʔδ(MPA)
32. ը໘Πϝʔδ(MPA) νϟοτ෦෼͚ͩVue.jsͷ ίϯϙʔωϯτΛ࢖༻ Index.vue RoomCreateForm.vue Messages.vue Rooms.vue
33. ը໘Πϝʔδ(SPA)
34. ը໘Πϝʔδ(SPA) Index.vue RoomCreateForm.vue Messages.vue Rooms.vue νϟοτ෦෼͸ྲྀ༻ͯ͠ɺ શମ͸Nuxt.jsΛ࢖༻
35. ҰൠϢʔβը໘ͷߏ੒ Laravelͷblade RoomCreateForm.vue Messages.vue Rooms.vue UserCreateForm.vue Index. vue Firebase Tadoru DB FirebaseʹϩάΠϯ ϢʔβΛొ࿥͢Δ ϧʔϜΛ࡞੒͢Δ νϟοτ૬खΛऔಘ͢Δ ϧʔϜϝϯόʔ৘ใΛऔಘ͢Δ ϝοηʔδҰཡΛऔಘ͢Δ ϝοηʔδΛૹ৴͢Δ ϧʔϜҰཡΛऔಘ͢Δ
36. اۀϢʔβը໘ͷߏ੒ pages/chat/index.vue RoomCreateForm.vue Messages.vue Rooms.vue UserCreateForm.vue Index. vue Firebase Tadoru DB FirebaseʹϩάΠϯ ϢʔβΛొ࿥͢Δ ϧʔϜΛ࡞੒͢Δ νϟοτ૬खΛऔಘ͢Δ ϧʔϜϝϯόʔ৘ใΛऔಘ͢Δ ϝοηʔδҰཡΛऔಘ͢Δ ϝοηʔδΛૹ৴͢Δ ϧʔϜҰཡΛऔಘ͢Δ
37. γʔέϯεਤ ʙ ϧʔϜ࡞੒ʙ
38. γʔέϯεਤ ʙ ϧʔϜ࡞੒ʙ ϧʔϜ࡞੒࣌ʹ Clound FuctionͰ UsersͷαϒίϨΫγϣϯʹ ॻ͖ࠐΈʹ͍͘
39. 3 9 Google Cloud Functions for Firebase http://furandon-pig.hatenablog.com/entry/2014/06/04/215727 Cloud Functions for Firebase Λ࢖͏͜ͱͰɺΠ ϕϯτυϦϒϯͳΞϓϦέʔγϣϯΛ࡞੒͢Δ ͜ͱ͕Ͱ͖·͢ɻ SMS ϝοηʔδͷૹ৴ͳͲ ͷॲཧͷΑ͏ͳ֎෦αʔϏε࿈ܞͳͲΛߦ͏͜ ͱ͕ՄೳʹͳΓ·͢ɻ·ͨɺΫϥΠΞϯτΞϓ Ϧέʔγϣϯʹ࣮૷ͤ͞Δʹ͸ॏͨ͗͢ΔΑ͏ ͳॲཧΛ Cloud Functions for Firebase ʹҕͶ Δ͜ͱ͕Ͱ͖·͢ɻ
40. functionͷॲཧ UsersͷαϒίϨΫγϣϯʹ roomsΛॻ͖ࠐΈ
41. UsersʹαϒίϨΫγϣϯΛ࣋ͨͤͨཧ༝ - Ҏલ(2019೥3݄͝Ζ)ͷ΍Γ ํͩͱݕࡧ͕ࠔ೉ͩͬͨͱࢥͬ ͨͷͰɺͦ͏͍ͯͨ͠ - ࠓ͸ΫΤϦ͕؆୯ʹͰ͖Δ͔ ΋͠Εͳ͍ https://speakerdeck.com/koogawa/firestore-falsedetashe-ji-nituite?slide=17
42. γʔέϯεਤ ʙ ϧʔϜҰཡɺϝοηʔδҰཡΛऔಘʙ
43. Users͔Βroomsͷ৘ใΛ औಘ γʔέϯεਤ ʙ ϧʔϜҰཡɺϝοηʔδҰཡΛऔಘʙ
44. usersͷαϒίϨΫγϣϯ͔ΒroomsΛऔಘ Users͝ͱͷID͝ͱʹର৅ͷ roomsΛαϒίϨΫγϣϯ͔ Βऔಘ͢Δ
45. ֤มߋΛײ஌ͯ͠ɺνϟοτ৘ใΛߋ৽ https://firebase.google.com/docs/firestore/query-data/listen?hl=ja
46. Ϣʔβͷొ࿥࣌ͷॳظϑϩʔ <STEP1> DBʹϢʔβొ࿥ Firebase Tadoru DB Ϣʔβ৘ใΛొ࿥ Ϣʔβ৘ใΛొ࿥ <STEP2> Firestoreʹ Ϣʔβొ࿥ gRPCͰૹΔ ؅ཧ͕໘౗ʹͳΔ͕DBͱ FirestoreʹϢʔβ৘ใ͕̎ͭग़ དྷΔࣄʹͳͬͯ͠·ͬͨ…ɻ PHPͷFirestoreͷϥΠϒϥϦ͕ gRPCࢦఆͩͬͨ LaravelͷΦϒβʔόͰ Firestoreͷొ࿥ॲཧൃಈ
47. PHPଆ͔ΒUser৘ใొ࿥࣌ʹΦϒβʔόʔͰFiresotreʹ΋ొ࿥ gRPCͷΠϯετʔϧ΋ඞཁ ͳͷͰɺཁ஫ҙ
48. ӡ༻ޙͷݒ೦఺ ʙ Clound Function͕஗͍໰୊ ʙ ϝοηʔδϧʔϜͷॳظىಈ࣌
49. ӡ༻ޙͷݒ೦఺ ʙ Clound Function͕஗͍໰୊ ʙ ϝοηʔδϧʔϜͷ2ճ໨Ҏ߱ͷىಈ࣌
50. Clound Function͕஗͍ཧ༝ firebaseͷcloud functions͕࣮ߦ͞ΕΔ·Ͱͷ͕࣌ؒҟ༷ʹ௕ ͍ɻτϦΨʔͷ৚݅Λຬ͔ͨͯ͠Βɺ5ඵલޙ͔͔͔ͬͯΒσʔ λʹ࣮ߦ݁Ռ͕൓ө͞ΕΔ͜ͱ͕͋Δɻ cloud functionsʹҰఆظؒͷΞΫηε͕ͳ͍৔߹͸ɺࣗಈతʹΠ ϯελϯε͕εϦʔϓϞʔυʹೖΔɻ https://qiita.com/Masaaki/items/54cf16c6c55cdae91b82
51. ղܾࡦ ಛʹͳ͠ɻ සൟʹϦΫΤετ͕ૹΒΕ͍ͯΔ৔߹͸ɺࠓճͷ໰୊͸ൃੜ͠ ͳ͍͸ͣͳͷͰɺ։ൃ؀ڥಛ༗ͷ໰୊Ͱ͋Δɻຊ൪؀ڥͰ͸Π ϯελϯε͕ఀࢭ͢Δ͜ͱ͸ͳ͍͸ͣͳͷͰɺେͨ͠໰୊ʹͳ Βͳ͍ɻ https://qiita.com/Masaaki/items/54cf16c6c55cdae91b82
52. Ϗϧυߴ଎ԽͰ΍ͬͨࣄ
53. 8FCQBDL
    #VOEMF
    "OBMZ[FSͱ͸ʁ ԼهΛՄࢹԽͯ͘͠ΕΔɻ ɾwebpackͷ଎౓վળͷҝɺ஗͍ loader΍pluginΛ஌Γ͍ͨ ɾόϯυϧϑΝΠϧͷαΠζΛݮ Β͍ͨ͠ͷͰɺόϯυϧϑΝΠϧ ಺ͷ֤ύοέʔδ͕Ͳͷ͘Β͍ͷ ༰ྔΛ઎Ί͍ͯΔ͔஌Γ͍ͨ https://github.com/webpack-contrib/webpack-bundle-analyzer
54. ࣮ߦํ๏
55. 8FCQBDL
    #VOEMF
    "OBMZ[FSͱ͸ʁ https://qiita.com/kurosame/items/9e7092cdf08ff2ba7500
56. ݱঢ়ͷ՝୊ ᶃChart.js͕ॏ͍ ᶄmoment.js͕ॏ͍ - locale͕ແବʹଟ͍ ᶅlodash.js͕ॏ͍
57. ᶃChart.js͕ॏ͍ ɾvue-chart.jsͷதͰ࢖ΘΕ͍ͯΔͷͰɺ ֎͢ͷ͸೉ͦ͠͏ͩͬͨɻ
58. ᶄmoment.js͕ॏ͍ nuxt.config.jsʹmomentͷ ઃఆΛ௥Ճ
59. ᶅlodash.js͕ॏ͍ ɾݱঢ়ɺσΟʔϓίϐʔͷ Օॴʹ͔͠lodash.js͕࢖Θ Ε͍ͯͳ͔ͬͨ
60. ᶅlodash.js͕ॏ͍ https://kuroeveryday.blogspot.com/2017/05/deep-clone-object-in-javascript.html ੜͷJSͰ΋σΟʔϓίϐʔ Ͱ͖Δ͕ɺ͜Ε͸࣮֬ʹͰ ͖͍ͯΔ͔ո͍͠Β͍͠ɻ
61. ᶅlodash.js͕ॏ͍ https://qiita.com/hareku/items/d9f92c96697163356bd3 lodashΛimport _ from 'lodash'ͷΑ͏ʹಡΈࠐΜͰ ͠·͏ͱɺશͯͷlodashؔ਺ͳͲ͕bundle͞Εͯ ͠·͍·͢ɻ ͦΕΛճආ͢ΔͨΊɺ࢖༻͢Δؔ਺ͷΈΛimport ͢ΔΑ͏ʹมߋ͠·͢ɻ
62. վળ݁Ռ lodashͱmoment.js͸ ΄΅ফ͑ͨʂ
63. վળ݁Ռ ໿1MBܰྔԽ
64. ·ͱΊ
    
65. - Firebase͸ࢥͬͨΑΓಋೖ͢Δʹ͋ͨͬͯɺ޻਺͕͔͔ͬͨ - FirebaseΛೖΕͯগ͠ෳࡶͳΞʔΩςΫνϟʹͳͬͯ͠·ͬͨ (஌ݟ͕͋Ε͹ճආͰ͖͔ͨ΋͠Εͳ͍) - Ϗϧυͷߴ଎Խ͢Δʹ͋ͨͬͯɺmoment.js΍lodash.js͕ॏ͘ ͳΔͷ͸Α͋͘Γͦ͏ ·ͱΊ