Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

02886e95c50822b9aa2552da1e518491?s=47 Takayuki
May 21, 2019
Programming
1
500

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

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

02886e95c50822b9aa2552da1e518491?s=128

Takayuki

May 21, 2019
Tweet

More Decks by Takayuki

See All by Takayuki
02886e95c50822b9aa2552da1e518491?s=48 bumptakayuki
0
6
02886e95c50822b9aa2552da1e518491?s=48 bumptakayuki
1
130
02886e95c50822b9aa2552da1e518491?s=48 bumptakayuki
1
110
02886e95c50822b9aa2552da1e518491?s=48 bumptakayuki
0
81
02886e95c50822b9aa2552da1e518491?s=48 bumptakayuki
1
610
02886e95c50822b9aa2552da1e518491?s=48 bumptakayuki
0
250
02886e95c50822b9aa2552da1e518491?s=48 bumptakayuki
0
510
02886e95c50822b9aa2552da1e518491?s=48 bumptakayuki
1
720
02886e95c50822b9aa2552da1e518491?s=48 bumptakayuki
0
82

Other Decks in Programming

See All in Programming
Ebaf5fd2c63aa33c66b0894034ae87af?s=48 yuichi110
1
130
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
13
15k
404a34d5e0d3d7b38237a8cbecf4c18a?s=48 seiseikai123
0
210
Af9db90220551fb78d294987b6296fbf?s=48 chmikata
0
450
640727b1a8120669de9b6d7f1d469893?s=48 ch6noota
0
260
646a01801bac1886ddf86aee2de913ed?s=48 miyukki
0
130
D1c03114361714e1175dae60d115d19c?s=48 ryotori1024
0
220
0b26590a0a8b0f1da140ed5de9b68379?s=48 usamik26
0
210
52dd8c5774366205f72a1644172b7423?s=48 shohata
0
120
F247cc71d9e0bba9f60709c3ae48dd80?s=48 decoch
1
110
6afbe110d33ef7e859fb8649b86bae55?s=48 mashabow
0
370
18c5d6e2413dc02665fd4210bf5d094b?s=48 roothybrid7
0
350

Featured

See All Featured
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
196
16k
245cee81a9c424266e5e401d844ea881?s=48 lara
596
62k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
261
25k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
337
30k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
262
37k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
21
5.2k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
167
20k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
259
17k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
688
180k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
33
3.2k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
415
59k
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
56
4.1k

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/