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

by Takayuki

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

1 ࣗݾ঺հɾ ձࣾ঺հ Agenda 3 Firebase Realtime Databaseͱ͸ 4 νϟοτͷ࡞Γํ 5 ࣮૷ɾσϓϩΠํ๏ 6 DEMO 7 ։ൃҊ݅Ͱͷಋೖࣄྫ 2 Firebaseͱ͸

Slide 3

Slide 3 text

1 ࣗݾ঺հɾձࣾ঺հ

Slide 4

Slide 4 text

4 ࣗݾ঺հ ԭೄ ԭೄ͔Βདྷ·ͨ͠ʂ

Slide 5

Slide 5 text

5 ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹϑϦʔϥ ϯεΛ΍ͬͨޙʹ2017೥11݄ʹԭೄͰىۀɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ ઓ ◆Twitter @kanbo0605

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

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

2 Firebaseͱ͸

Slide 11

Slide 11 text

11 Firebaseͱ͸ https://www.topgate.co.jp/firebase01-what-is-firebase Firebase ͸ Google ͕ఏڙ͍ͯ͠ΔϞόΠϧ͓Αͼ Web ΞϓϦέʔ γϣϯͷόοΫΤϯυαʔϏεͰ͢ɻΫϥ΢υαʔϏεͷܗଶͰ͸ BaaS ʹҐஔ෇͚͞Ε·͢ɻ Firebase Λ࢖͏͜ͱͰɺ։ൃऀ͸ΞϓϦ έʔγϣϯͷ։ൃʹઐ೦Ͱ͖ɺόοΫΤϯυͰಈ͘αʔϏεΛ࡞੒͢ Δඞཁ΋؅ཧ͢Δඞཁ΋͋Γ·ͤΜɻ

Slide 12

Slide 12 text

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 ΞϓϦέʔγϣϯ σʔλ

Slide 13

Slide 13 text

1 3 Firebaseͷػೳ http://furandon-pig.hatenablog.com/entry/2014/06/04/215727 BaaS ʹ͸ɺಠࣗͷϏδωεϩδοΫΛ૊ΈࠐΉ͜ͱ͸Ͱ͖·ͤ ΜɻͦͷͨΊɺଟ͘ͷ BaaS ʹ͸ɺσʔλϕʔεػೳҎ֎ʹ΋ɺ SNS ࿈ܞ΍ Android ɺ iOS ͷ SDK ͳͲ͕ఏڙ͞Ε͍ͯ·͢ɻ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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(ίϨΫγϣϯ/υΩϡϝϯτ) υΩϡϝϯτ ίϨΫγϣϯ

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

2 0 NoSQLσʔλϕʔε

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

3 Firebase Realtime Databaseͱ͸

Slide 23

Slide 23 text

2 3 Firebase Realtime Databaseͱ͸ https://firebase.google.com/docs/database/?hl=ja NoSQL Ϋϥ΢υ σʔλϕʔεͰσʔλͷอ؅ͱಉظΛߦ͏͜ͱ͕Ͱ ͖·͢ɻ σʔλ͸͢΂ͯͷΫϥΠΞϯτʹΘͨͬͯϦΞϧλΠϜͰಉظ͞Εɺ ΞϓϦ͕ΦϑϥΠϯʹͳͬͯ΋Ҿ͖ଓ͖࢖༻Ͱ͖·͢ɻ Ϋϥ΢υϗετܕσʔλϕʔεͰ͢ɻ σʔλ͸ JSON ͱͯ͠อଘ͞Εɺ઀ଓ͞Ε͍ͯΔ͢΂ͯͷΫϥΠΞϯ τͱϦΞϧλΠϜͰಉظ͞Ε·͢ɻ

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

2 5 Firebase Realtime Databaseͱ͸

Slide 26

Slide 26 text

4 Firebase Hostingͱ͸

Slide 27

Slide 27 text

2 7 Firebase Hostingͱ͸ https://firebase.google.com/docs/hosting/ Firebase Hosting ͸ɺ΢ΣϒΞϓϦɺ੩తίϯςϯπɺಈతίϯςϯ π޲͚ͷߴ଎Ͱ҆શੑͷߴ͍ϗεςΟϯάΛఏڙ͠·͢ɻ Firebase Hosting ͸σϕϩούʔ޲͚ͷɺຊ൪؀ڥϨϕϧͷ΢Σϒ ί ϯςϯπ ϗεςΟϯάͰ͢ɻ

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

5 ࣮૷ɾσϓϩΠํ๏

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

3 4 Vue.jsͰFirebaseΛ࢖͏ https://cr-vue.mio3io.com/tutorials/firebase.html $ npm install firebase import firebase from ‘firebase' Ͱ ಡΈࠐΉ

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

6 DEMO

Slide 42

Slide 42 text

4 2 ߏ੒ ϩάΠϯ Firebase Hosting Firebase Auth ϩάΠϯ RealTimeDB ϝοηʔδΛૹ৴

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

7 ։ൃҊ݅Ͱͷಋೖࣄྫ

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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": { ... } }, } αʔόαΠυ

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

ը໘Πϝʔδ

Slide 54

Slide 54 text

ը໘Πϝʔδ

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

ը໘Πϝʔδ

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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