Nuxt.js + Firebaseでの開発と高速化に挑んだ話

by Takayuki

Slide 1

Slide 1 text

Nuxt.js + Firebaseでの開ൃと高速化に挑んだ話鈴木孝之

Slide 2

Slide 2 text

"HFOEB ࣗݾ঺հɾձࣾ঺հ 'JSFCBTFಋೖʹ͋ͨͬͯͷܦҢ 'JSFCBTFͷಋೖɻͦΕ͔Βͷݒ೦ɾվળ఺ Ϗϧυߴ଎ԽͰ΍ͬͨࣄ

Slide 3

Slide 3 text

ࣗݾ঺հɾձࣾ঺հ

Slide 4

Slide 4 text

0.ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ※ಉ੏ಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹಠཱɻ ɾݱࡏ͸ɺडୗ։ൃΛ΍ΓͭͭɺࣗࣾWebαʔϏεΛ։ൃதɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ ◆εΩϧ PHP,Symfony2,CakePHP3,Laravel5, JavaScript,backbone.js,Angular.js

Slide 5

Slide 5 text

0.ࣗݾ঺հ

Slide 6

Slide 6 text

Slide 7

Slide 7 text

7 ࣗࣾ։ൃνʔϜߏ੒ Suzuki Takayuki ਖ਼ࣾһ (ि5೔ۈ຿) Kakazu Yuki (ਖ਼ࣾһ) Ϛωδϝϯτ&։ൃ ։ൃ ϑϦʔϥϯε (ि2೔ۈ຿) ϑϦʔϥϯε (ि2೔ۈ຿) ϑϦʔϥϯε (ि2೔ۈ຿) ϑϦʔϥϯε (ि1೔ۈ຿) ཁ݅ఆٛ UI/UX ਖ਼ࣾһ (ि5೔ۈ຿) ෭ۀ (ि1೔ۈ຿) ͜ͷϙδγϣϯΛ ΍ͬͯ·͢ʂ

Slide 8

Slide 8 text

'JSFCBTFಋೖʹ͋ͨͬͯͷܦҢ

Slide 9

Slide 9 text

9 ࣗࣾWebαʔϏεͷ։ൃ ɾαʔϏε໊ Tadoru  https://tadoru.work/    ɾγεςϜ֓ཁ ΤϯδχΞಉ࢜ͷ࢓ࣄ঺հ ίϛϡχςΟ

Slide 10

Slide 10 text

Re:Build اۀͷ୲౰ऀ͕ ΤʔδΣϯτΛબͿ ΤʔδΣϯτ͕ࣗ෼ͷܨ ͕Γͷ͋ΔΤϯδχΞ· ͨ͸νʔϜʹ੠Λ͔͚Δ ΤʔδΣϯτ͸ ࣄલʹ৹੍ࠪ ϫʔΧʔ ΤʔδΣϯτ اۀ ϏδωεϞσϧ ࠾༻ใु εΩϧ ܦݧ Քಇঢ়گ εΩϧ ܦݧ Քಇঢ়گ εΩϧ ܦݧ Քಇঢ়گ ࢓ࣄΛ঺հ͢Δ ˕ ̋ ̋ × ˕ ̋ × ̋ ̋

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

શମͷΞʔΩςΫνϟ(̐ͭͷυϝΠϯผ) ϑϩϯτΤϯυ αʔόαΠυ blade MPAߏ੒ ϑϩϯτΤϯυ αʔόαΠυ SPAߏ੒ αʔόαΠυ ϑϩϯτΤϯυ αʔόαΠυ blade MPAߏ੒ ϫʔΧʔը໘ ΤʔδΣϯτը໘ اۀը໘ SPAߏ੒ ϑϩϯτΤϯυ ӡӦը໘ MPA SPA

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

ϩϯάϙʔϦϯάͷௐࠪ݁Ռ ɾLong pollingͱ͸ʁ ݹయతͳํ๏ͰɺҰఆ࣌ؒ͝ͱʹαʔόʹߋ৽Λ໰͍߹ΘͤΔख๏ɻ ϖʔδશମΛऔಘ͢ΔͱߴෛՙͱͳΔͨΊɺAjax௨৴ͰϦΫΤετ͠มߋ෦෼Λߋ৽͢Δͷ͕ ࠷ۙͰ͸ओྲྀɻ ΫϥΠΞϯτ͔Βૹ৴͞ΕͨϦΫΤετΛαʔό͕͍ͬͨΜอཹ͠ɺ αʔόଆͰΠϕϯτ͕ൃੜͨ͠ࡍʹ೚ҙͷλΠϛϯάͰϨεϙϯεΛฦ͢ख๏ɻ ϦΞϧλΠϜੑ͸ߴ͍ɻ ແବͳ໰͍߹Θͤ͸ൃੜ͠ͳ͍͕ɺ௕࣌ؒHTTPίωΫγϣϯΛ઎༗ͯ͠͠·͏ɻ Ұ౓ΫϥΠΞϯτʹPushͨ͠Βɺ·ͨΫϥΠΞϯτ͔ΒͷϦΫΤετΛ଴ͨͳ͍ͱ͍͚ͳ ͍ɻ λΠϛϯάʹΑͬͯ͸λΠϜϥά͕ൃੜ͢Δɻ http://peacock.ky-3.net/realtime_notiﬁcation/realtime_notiﬁcation

Slide 16

Slide 16 text

ϩϯάϙʔϦϯάͷ࣮૷ྫ http://peacock.ky-3.net/realtime_notiﬁcation/realtime_notiﬁcation

Slide 17

Slide 17 text

WebSocketௐࠪ݁Ռ ɾWebsocket HTTPΛ֦ுͨ͠ϦΞϧλΠϜ௨৴Λલఏͱͯ͠૒ํ޲ʹσʔλ͕ૹड৴Ͱ͖ Δ௨৴ϓϩτίϧͷ͜ͱɻ খ͞ͳσʔλαΠζͰ৘ใΛૹड৴Ͱ͖ΔͨΊHTTPʹൺ΂Δͱ͔ͳΓ௨৴ ίετ͕௿͍ɻ TCPίωΫγϣϯΛுΓͬͺͳ͠ʹ͢ΔͨΊɺϊϯϒϩοΩϯάI/Oαʔό ʢNode.jsʣ͕ඞཁɻ

Slide 18

Slide 18 text

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/ Լهͷهࣄ͔ΒҾ༻

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Firebaseௐࠪ݁Ռ αʔόෛՙ ಋೖίετ ϝϯςφϯείετ Firebase ͋·Γ͔͔Βͳ͍ ௿Ί গͳ͍ ϩϯάϙʔϦϯά ͔͔Δ ௿Ί ී௨ WebSocket ͋·Γ͔͔Βͳ͍ ߴΊ ଟΊ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

FirebaseಋೖલͰͷݒ೦఺ - Firebase্ͷDatabaseͷແྉ࿮͕1GB͔͠ͳ͍ - ίϨΫγϣϯؒͰ֎෦ΩʔΛ࣋ͨͤΒΕͳ͍ɻ - ݕࡧ৚݅ʹҰ෦ɺ੍ݶ͋Γɻ

Slide 27

Slide 27 text

'JSFCBTFͷಋೖɻ ͦΕ͔Βͷݒ೦ɾվળ఺

Slide 28

Slide 28 text

Firestoreͷߏ੒ usersίϨΫγϣϯ roomsίϨΫγϣϯ

Slide 29

Slide 29 text

usersίϨΫγϣϯ ίϨΫγϣϯͷJSONߏ଄ྫ FirebaseͷFireStoreྫ

Slide 30

Slide 30 text

roomsίϨΫγϣϯ ίϨΫγϣϯͷJSONߏ଄ྫ FirebaseͷFireStoreྫ

Slide 31

Slide 31 text

ը໘Πϝʔδ(MPA)

Slide 32

Slide 32 text

ը໘Πϝʔδ(MPA) νϟοτ෦෼͚ͩVue.jsͷ ίϯϙʔωϯτΛ࢖༻ Index.vue RoomCreateForm.vue Messages.vue Rooms.vue

Slide 33

Slide 33 text

ը໘Πϝʔδ(SPA)

Slide 34

Slide 34 text

ը໘Πϝʔδ(SPA) Index.vue RoomCreateForm.vue Messages.vue Rooms.vue νϟοτ෦෼͸ྲྀ༻ͯ͠ɺ શମ͸Nuxt.jsΛ࢖༻

Slide 35

Slide 35 text

ҰൠϢʔβը໘ͷߏ੒ Laravelͷblade RoomCreateForm.vue Messages.vue Rooms.vue UserCreateForm.vue Index. vue Firebase Tadoru DB FirebaseʹϩάΠϯ ϢʔβΛొ࿥͢Δ ϧʔϜΛ࡞੒͢Δ νϟοτ૬खΛऔಘ͢Δ ϧʔϜϝϯόʔ৘ใΛऔಘ͢Δ ϝοηʔδҰཡΛऔಘ͢Δ ϝοηʔδΛૹ৴͢Δ ϧʔϜҰཡΛऔಘ͢Δ

Slide 36

Slide 36 text

اۀϢʔβը໘ͷߏ੒ pages/chat/index.vue RoomCreateForm.vue Messages.vue Rooms.vue UserCreateForm.vue Index. vue Firebase Tadoru DB FirebaseʹϩάΠϯ ϢʔβΛొ࿥͢Δ ϧʔϜΛ࡞੒͢Δ νϟοτ૬खΛऔಘ͢Δ ϧʔϜϝϯόʔ৘ใΛऔಘ͢Δ ϝοηʔδҰཡΛऔಘ͢Δ ϝοηʔδΛૹ৴͢Δ ϧʔϜҰཡΛऔಘ͢Δ

Slide 37

Slide 37 text

γʔέϯεਤ ʙ ϧʔϜ࡞੒ʙ

Slide 38

Slide 38 text

γʔέϯεਤ ʙ ϧʔϜ࡞੒ʙ ϧʔϜ࡞੒࣌ʹ Clound FuctionͰ UsersͷαϒίϨΫγϣϯʹ ॻ͖ࠐΈʹ͍͘

Slide 39

Slide 39 text

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 ʹҕͶ Δ͜ͱ͕Ͱ͖·͢ɻ

Slide 40

Slide 40 text

functionͷॲཧ UsersͷαϒίϨΫγϣϯʹ roomsΛॻ͖ࠐΈ

Slide 41

Slide 41 text

UsersʹαϒίϨΫγϣϯΛ࣋ͨͤͨཧ༝ - Ҏલ(2019೥3݄͝Ζ)ͷ΍Γ ํͩͱݕࡧ͕ࠔ೉ͩͬͨͱࢥͬ ͨͷͰɺͦ͏͍ͯͨ͠ - ࠓ͸ΫΤϦ͕؆୯ʹͰ͖Δ͔ ΋͠Εͳ͍ https://speakerdeck.com/koogawa/ﬁrestore-falsedetashe-ji-nituite?slide=17

Slide 42

Slide 42 text

γʔέϯεਤ ʙ ϧʔϜҰཡɺϝοηʔδҰཡΛऔಘʙ

Slide 43

Slide 43 text

Users͔Βroomsͷ৘ใΛ औಘ γʔέϯεਤ ʙ ϧʔϜҰཡɺϝοηʔδҰཡΛऔಘʙ

Slide 44

Slide 44 text

usersͷαϒίϨΫγϣϯ͔ΒroomsΛऔಘ Users͝ͱͷID͝ͱʹର৅ͷ roomsΛαϒίϨΫγϣϯ͔ Βऔಘ͢Δ

Slide 45

Slide 45 text

֤มߋΛײ஌ͯ͠ɺνϟοτ৘ใΛߋ৽ https://firebase.google.com/docs/firestore/query-data/listen?hl=ja

Slide 46

Slide 46 text

Ϣʔβͷొ࿥࣌ͷॳظϑϩʔ DBʹϢʔβొ࿥ Firebase Tadoru DB Ϣʔβ৘ใΛొ࿥ Ϣʔβ৘ใΛొ࿥ Firestoreʹ Ϣʔβొ࿥ gRPCͰૹΔ ؅ཧ͕໘౗ʹͳΔ͕DBͱ FirestoreʹϢʔβ৘ใ͕̎ͭग़ དྷΔࣄʹͳͬͯ͠·ͬͨ…ɻ PHPͷFirestoreͷϥΠϒϥϦ͕ gRPCࢦఆͩͬͨ LaravelͷΦϒβʔόͰ Firestoreͷొ࿥ॲཧൃಈ

Slide 47

Slide 47 text

PHPଆ͔ΒUser৘ใొ࿥࣌ʹΦϒβʔόʔͰFiresotreʹ΋ొ࿥ gRPCͷΠϯετʔϧ΋ඞཁ ͳͷͰɺཁ஫ҙ

Slide 48

Slide 48 text

ӡ༻ޙͷݒ೦఺ ʙ Clound Function͕஗͍໰୊ ʙ ϝοηʔδϧʔϜͷॳظىಈ࣌

Slide 49

Slide 49 text

ӡ༻ޙͷݒ೦఺ ʙ Clound Function͕஗͍໰୊ ʙ ϝοηʔδϧʔϜͷ2ճ໨Ҏ߱ͷىಈ࣌

Slide 50

Slide 50 text

Clound Function͕஗͍ཧ༝ firebaseͷcloud functions͕࣮ߦ͞ΕΔ·Ͱͷ͕࣌ؒҟ༷ʹ௕ ͍ɻτϦΨʔͷ৚݅Λຬ͔ͨͯ͠Βɺ5ඵલޙ͔͔͔ͬͯΒσʔ λʹ࣮ߦ݁Ռ͕൓ө͞ΕΔ͜ͱ͕͋Δɻ cloud functionsʹҰఆظؒͷΞΫηε͕ͳ͍৔߹͸ɺࣗಈతʹΠ ϯελϯε͕εϦʔϓϞʔυʹೖΔɻ https://qiita.com/Masaaki/items/54cf16c6c55cdae91b82

Slide 51

Slide 51 text

ղܾࡦ ಛʹͳ͠ɻ සൟʹϦΫΤετ͕ૹΒΕ͍ͯΔ৔߹͸ɺࠓճͷ໰୊͸ൃੜ͠ ͳ͍͸ͣͳͷͰɺ։ൃ؀ڥಛ༗ͷ໰୊Ͱ͋Δɻຊ൪؀ڥͰ͸Π ϯελϯε͕ఀࢭ͢Δ͜ͱ͸ͳ͍͸ͣͳͷͰɺେͨ͠໰୊ʹͳ Βͳ͍ɻ https://qiita.com/Masaaki/items/54cf16c6c55cdae91b82

Slide 52

Slide 52 text

Ϗϧυߴ଎ԽͰ΍ͬͨࣄ

Slide 53

Slide 53 text

8FCQBDL#VOEMF"OBMZ[FSͱ͸ʁ ԼهΛՄࢹԽͯ͘͠ΕΔɻ ɾwebpackͷ଎౓վળͷҝɺ஗͍ loader΍pluginΛ஌Γ͍ͨ ɾόϯυϧϑΝΠϧͷαΠζΛݮ Β͍ͨ͠ͷͰɺόϯυϧϑΝΠϧ ಺ͷ֤ύοέʔδ͕Ͳͷ͘Β͍ͷ ༰ྔΛ઎Ί͍ͯΔ͔஌Γ͍ͨ https://github.com/webpack-contrib/webpack-bundle-analyzer

Slide 54

Slide 54 text

࣮ߦํ๏

Slide 55

Slide 55 text

8FCQBDL#VOEMF"OBMZ[FSͱ͸ʁ https://qiita.com/kurosame/items/9e7092cdf08ff2ba7500

Slide 56

Slide 56 text

ݱঢ়ͷ՝୊ ᶃChart.js͕ॏ͍ ᶄmoment.js͕ॏ͍ - locale͕ແବʹଟ͍ ᶅlodash.js͕ॏ͍

Slide 57

Slide 57 text

ᶃChart.js͕ॏ͍ ɾvue-chart.jsͷதͰ࢖ΘΕ͍ͯΔͷͰɺ ֎͢ͷ͸೉ͦ͠͏ͩͬͨɻ

Slide 58

Slide 58 text

ᶄmoment.js͕ॏ͍ nuxt.config.jsʹmomentͷ ઃఆΛ௥Ճ

Slide 59

Slide 59 text

ᶅlodash.js͕ॏ͍ ɾݱঢ়ɺσΟʔϓίϐʔͷ Օॴʹ͔͠lodash.js͕࢖Θ Ε͍ͯͳ͔ͬͨ

Slide 60

Slide 60 text

ᶅlodash.js͕ॏ͍ https://kuroeveryday.blogspot.com/2017/05/deep-clone-object-in-javascript.html ੜͷJSͰ΋σΟʔϓίϐʔ Ͱ͖Δ͕ɺ͜Ε͸࣮֬ʹͰ ͖͍ͯΔ͔ո͍͠Β͍͠ɻ

Slide 61

Slide 61 text

ᶅlodash.js͕ॏ͍ https://qiita.com/hareku/items/d9f92c96697163356bd3 lodashΛimport _ from 'lodash'ͷΑ͏ʹಡΈࠐΜͰ ͠·͏ͱɺશͯͷlodashؔ਺ͳͲ͕bundle͞Εͯ ͠·͍·͢ɻ ͦΕΛճආ͢ΔͨΊɺ࢖༻͢Δؔ਺ͷΈΛimport ͢ΔΑ͏ʹมߋ͠·͢ɻ

Slide 62

Slide 62 text

վળ݁Ռ lodashͱmoment.js͸ ΄΅ফ͑ͨʂ

Slide 63

Slide 63 text

վળ݁Ռ ໿1MBܰྔԽ

Slide 64

Slide 64 text

·ͱΊ

Slide 65

Slide 65 text

- Firebase͸ࢥͬͨΑΓಋೖ͢Δʹ͋ͨͬͯɺ޻਺͕͔͔ͬͨ - FirebaseΛೖΕͯগ͠ෳࡶͳΞʔΩςΫνϟʹͳͬͯ͠·ͬͨ (஌ݟ͕͋Ε͹ճආͰ͖͔ͨ΋͠Εͳ͍) - Ϗϧυͷߴ଎Խ͢Δʹ͋ͨͬͯɺmoment.js΍lodash.js͕ॏ͘ ͳΔͷ͸Α͋͘Γͦ͏ ·ͱΊ