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

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

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

02886e95c50822b9aa2552da1e518491?s=128

Takayuki

May 21, 2019
Tweet

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/