Firebase+Vue.jsで作った チャットをデプロイ

Firebase+Vue.jsで作った
チャットをデプロイ

Transcript

1. Firebase+Vue.jsで࡞ͬͨ νϟοτΛデプϩΠ
2. 1 ձࣾ঺հɾࣗݾ঺հ Agenda 2 Firebase Realtime Databaseͱ͸ 3 νϟοτͷ࡞Γํ 4 ࣮૷ɾσϓϩΠํ๏ 5 DEMO
3. 1 ձࣾ঺հɾࣗݾ঺հ
4. 4 ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹϑϦʔϥ ϯεΛ΍ͬͨޙʹ2017೥11݄ʹԭೄͰىۀɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ ઓ ◆Twitter @kanbo0605
5. Copyright Re:Build.inc All Rights Reserved. 1.ձࣾ঺հ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ໨̍̒−̕ ◆ࣄۀ಺༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 5໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ
6. 6 ࣗࣾWebαʔϏεͷ։ൃ ɾαʔϏε໊ Tadoru ɾγεςϜ֓ཁ Ϋϥ΢υιʔγϯά ΫϨδοτܾࡁ ͳͲ ɾ࢖͍ͬͯΔٕज़ ݴޠ : PHP,JavaScript ϑϨʔϜϫʔΫ: laravel5,Nuxt.jsͳͲ
7. 2 Firebase Realtime Databaseͱ͸
8. 8 Firebase Realtime Databaseͱ͸ https://firebase.google.com/docs/database/?hl=ja NoSQL Ϋϥ΢υ σʔλϕʔεͰσʔλͷอ؅ͱಉظΛߦ͏͜ͱ͕Ͱ ͖·͢ɻσʔλ͸͢΂ͯͷΫϥΠΞϯτʹΘͨͬͯϦΞϧλΠϜͰಉ ظ͞ΕɺΞϓϦ͕ΦϑϥΠϯʹͳͬͯ΋Ҿ͖ଓ͖࢖༻Ͱ͖·͢ɻ Ϋϥ΢υϗετܕσʔλϕʔεͰ͢ɻσʔλ͸ JSON ͱͯ͠อଘ͞ Εɺ઀ଓ͞Ε͍ͯΔ͢΂ͯͷΫϥΠΞϯτͱϦΞϧλΠϜͰಉظ͞Ε ·͢ɻiOSɺAndroidɺJavaScript SDK Λ࢖༻ͯ͠Ϋϩεϓϥοτ ϑΥʔϜ ΞϓϦΛߏஙͨ͠৔߹ɺ͢΂ͯͷΫϥΠΞϯτ͕ɺ1ͭͷ Realtime Database ΠϯελϯεΛڞ༗ͯ͠ɺ࠷৽ͷσʔλʹΑΔߋ ৽Λࣗಈతʹड৴͠·͢ɻ
9. 9 Firebase Realtime Databaseͱ͸ ֊૚ߏ଄ͰݟΕΔ
10. 1 0 Firebase Realtime Databaseͱ͸
11. 3 Firebase Hostingͱ͸
12. 1 2 Firebase Hostingͱ͸ https://firebase.google.com/docs/hosting/ Firebase Hosting ͸ɺ΢ΣϒΞϓϦɺ੩తίϯςϯπɺಈతίϯςϯ π޲͚ͷߴ଎Ͱ҆શੑͷߴ͍ϗεςΟϯάΛఏڙ͠·͢ɻ Firebase Hosting ͸σϕϩούʔ޲͚ͷɺຊ൪؀ڥϨϕϧͷ΢Σϒ ί ϯςϯπ ϗεςΟϯάͰ͢ɻ
13. 1 3 Firebase Hostingͱ͸ https://firebase.google.com/docs/hosting/
14. 4 ࣮૷ɾσϓϩΠํ๏
15. 1 5 FirebaseͷηοτΞοϓ https://cr-vue.mio3io.com/tutorials/firebase.html ϓϩδΣΫτΛ࡞੒͢Δ ϓϩδΣΫτ໊Λೖྗͯ͠ɺ ೔ຊϦʔδϣϯΛબ୒͢Δ
16. 1 6 FirebaseͷAuth(Twitterͷઃఆ) https://cr-vue.mio3io.com/tutorials/firebase.html ࠓճ͸TwiterೝূΛબ୒
17. 1 7 FirebaseͷAuth(Twitterͷઃఆ) https://cr-vue.mio3io.com/tutorials/firebase.html ίʔϧόοΫURLΛίϐʔ ͢Δ
18. 1 8 FirebaseͷAuth(Twitterͷઃఆ) https://cr-vue.mio3io.com/tutorials/firebase.html Twitterͷ։ൃը໘ͰίʔϧόοΫ URLΛઃఆ͢Δ
19. 1 9 Vue.jsͰFirebaseΛ࢖͏ https://cr-vue.mio3io.com/tutorials/firebase.html $ npm install firebase import firebase from ‘firebase' Ͱ ಡΈࠐΉ
20. 2 0 Vue.jsͰFirebaseΛ࢖͏ https://cr-vue.mio3io.com/tutorials/firebase.html Firebase ͷʮAuthenticationʯϖʔδͰ࣍ͷΑ͏ͳίʔυ͕දࣔ͞ΕΔͷͰɺషΓ෇͚Δ JSΛίϐʔ͢Δ
21. 2 1 Vue.jsͰFirebaseΛ࢖͏ https://cr-vue.mio3io.com/tutorials/firebase.html
22. 2 2 Vue.jsͰFirebaseΛ࢖͏ https://cr-vue.mio3io.com/tutorials/firebase.html main.js
23. 2 3 Vue.jsͰFirebaseΛ࢖͏ https://cr-vue.mio3io.com/tutorials/firebase.html App.vue
24. 2 4 σϓϩΠ https://qiita.com/gupuru/items/25a6722f6f802d3a5250
25. 2 5 σϓϩΠ https://qiita.com/gupuru/items/25a6722f6f802d3a5250
26. 5 DEMO
27. 2 7 ߏ੒ ϩάΠϯ Firebase Hosting Firebase Auth ϩάΠϯ RealTimeDB ϝοηʔδΛૹ৴
28. 2 8 DEMO https://myfirstfirebase-21fa3.firebaseapp.com/