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/