Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Firebase+Vue.jsで作った チャットをデプロイ
Search
Takayuki
May 21, 2019
Programming
1
670
Firebase+Vue.jsで作った チャットをデプロイ
Firebase+Vue.jsで作った
チャットをデプロイ
Takayuki
May 21, 2019
Tweet
Share
More Decks by Takayuki
See All by Takayuki
エンジニアのキャリア論
bumptakayuki
0
140
地方カンファレンス主催のススメ
bumptakayuki
1
170
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
1
900
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
580
沖縄観光、名物を一挙紹介!
bumptakayuki
2
580
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
2.1k
flutterでイベントアプリを作ってみた
bumptakayuki
0
130
オフショア開発の辛みと学んだ事
bumptakayuki
0
360
ChatGPTにStripeのサンプルコードを書かせてみた
bumptakayuki
1
190
Other Decks in Programming
See All in Programming
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
Formの複雑さに立ち向かう
bmthd
1
720
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Honoをフロントエンドで使う 3つのやり方
yusukebe
5
2.2k
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
Introduction to kotlinx.rpc
arawn
0
630
CI改善もDatadogとともに
taumu
0
110
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Why Our Code Smells
bkeepers
PRO
335
57k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
How STYLIGHT went responsive
nonsquared
98
5.3k
It's Worth the Effort
3n
184
28k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Transcript
Firebase+Vue.jsで࡞ͬͨ νϟοτΛデプϩΠ
1 ձࣾհɾࣗݾհ Agenda 2 Firebase Realtime Databaseͱ 3 νϟοτͷ࡞Γํ 4
࣮ɾσϓϩΠํ๏ 5 DEMO
1 ձࣾհɾࣗݾհ
4 ࣗݾհ ◆໊લ ླ ೭(Suzuki Takayuki) ◆ࣗݾհ ɾ1990ɺਆಸݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015ʹϑϧεϐʔυʹೖࣾ͠ɺ2017ʹϑϦʔϥ
ϯεΛͬͨޙʹ201711݄ʹԭೄͰىۀɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺٿ؍ ઓ ◆Twitter @kanbo0605
Copyright Re:Build.inc All Rights Reserved. 1.ձࣾհ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ̍̒−̕
◆ࣄۀ༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 5໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪͯ͠·͢ʂ
6 ࣗࣾWebαʔϏεͷ։ൃ ɾαʔϏε໊ Tadoru ɾγεςϜ֓ཁ Ϋϥυιʔγϯά ΫϨδοτܾࡁ ͳͲ ɾ͍ͬͯΔٕज़ ݴޠ
: PHP,JavaScript ϑϨʔϜϫʔΫ: laravel5,Nuxt.jsͳͲ
2 Firebase Realtime Databaseͱ
8 Firebase Realtime Databaseͱ https://firebase.google.com/docs/database/?hl=ja NoSQL Ϋϥυ σʔλϕʔεͰσʔλͷอͱಉظΛߦ͏͜ͱ͕Ͱ ͖·͢ɻσʔλͯ͢ͷΫϥΠΞϯτʹΘͨͬͯϦΞϧλΠϜͰಉ ظ͞ΕɺΞϓϦ͕ΦϑϥΠϯʹͳͬͯҾ͖ଓ͖༻Ͱ͖·͢ɻ
ΫϥυϗετܕσʔλϕʔεͰ͢ɻσʔλ JSON ͱͯ͠อଘ͞ Εɺଓ͞Ε͍ͯΔͯ͢ͷΫϥΠΞϯτͱϦΞϧλΠϜͰಉظ͞Ε ·͢ɻiOSɺAndroidɺJavaScript SDK Λ༻ͯ͠Ϋϩεϓϥοτ ϑΥʔϜ ΞϓϦΛߏஙͨ͠߹ɺͯ͢ͷΫϥΠΞϯτ͕ɺ1ͭͷ Realtime Database ΠϯελϯεΛڞ༗ͯ͠ɺ࠷৽ͷσʔλʹΑΔߋ ৽Λࣗಈతʹड৴͠·͢ɻ
9 Firebase Realtime Databaseͱ ֊ߏͰݟΕΔ
1 0 Firebase Realtime Databaseͱ
3 Firebase Hostingͱ
1 2 Firebase Hostingͱ https://firebase.google.com/docs/hosting/ Firebase Hosting ɺΣϒΞϓϦɺ੩తίϯςϯπɺಈతίϯςϯ π͚ͷߴͰ҆શੑͷߴ͍ϗεςΟϯάΛఏڙ͠·͢ɻ Firebase
Hosting σϕϩούʔ͚ͷɺຊ൪ڥϨϕϧͷΣϒ ί ϯςϯπ ϗεςΟϯάͰ͢ɻ
1 3 Firebase Hostingͱ https://firebase.google.com/docs/hosting/
4 ࣮ɾσϓϩΠํ๏
1 5 FirebaseͷηοτΞοϓ https://cr-vue.mio3io.com/tutorials/firebase.html ϓϩδΣΫτΛ࡞͢Δ ϓϩδΣΫτ໊Λೖྗͯ͠ɺ ຊϦʔδϣϯΛબ͢Δ
1 6 FirebaseͷAuth(Twitterͷઃఆ) https://cr-vue.mio3io.com/tutorials/firebase.html ࠓճTwiterೝূΛબ
1 7 FirebaseͷAuth(Twitterͷઃఆ) https://cr-vue.mio3io.com/tutorials/firebase.html ίʔϧόοΫURLΛίϐʔ ͢Δ
1 8 FirebaseͷAuth(Twitterͷઃఆ) https://cr-vue.mio3io.com/tutorials/firebase.html Twitterͷ։ൃը໘ͰίʔϧόοΫ URLΛઃఆ͢Δ
1 9 Vue.jsͰFirebaseΛ͏ https://cr-vue.mio3io.com/tutorials/firebase.html $ npm install firebase import firebase
from ‘firebase' Ͱ ಡΈࠐΉ
2 0 Vue.jsͰFirebaseΛ͏ https://cr-vue.mio3io.com/tutorials/firebase.html Firebase ͷʮAuthenticationʯϖʔδͰ࣍ͷΑ͏ͳίʔυ͕දࣔ͞ΕΔͷͰɺషΓ͚Δ JSΛίϐʔ͢Δ
2 1 Vue.jsͰFirebaseΛ͏ https://cr-vue.mio3io.com/tutorials/firebase.html
2 2 Vue.jsͰFirebaseΛ͏ https://cr-vue.mio3io.com/tutorials/firebase.html main.js
2 3 Vue.jsͰFirebaseΛ͏ https://cr-vue.mio3io.com/tutorials/firebase.html App.vue
2 4 σϓϩΠ https://qiita.com/gupuru/items/25a6722f6f802d3a5250
2 5 σϓϩΠ https://qiita.com/gupuru/items/25a6722f6f802d3a5250
5 DEMO
2 7 ߏ ϩάΠϯ Firebase Hosting Firebase Auth ϩάΠϯ RealTimeDB
ϝοηʔδΛૹ৴
2 8 DEMO https://myfirstfirebase-21fa3.firebaseapp.com/