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
650
Firebase+Vue.jsで作った チャットをデプロイ
Firebase+Vue.jsで作った
チャットをデプロイ
Takayuki
May 21, 2019
Tweet
Share
More Decks by Takayuki
See All by Takayuki
地方カンファレンス主催のススメ
bumptakayuki
1
110
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
1
360
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
380
沖縄観光、名物を一挙紹介!
bumptakayuki
2
400
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
1k
flutterでイベントアプリを作ってみた
bumptakayuki
0
91
オフショア開発の辛みと学んだ事
bumptakayuki
0
310
ChatGPTにStripeのサンプルコードを書かせてみた
bumptakayuki
1
130
ChatGPTに記事を書かせてみた
bumptakayuki
1
200
Other Decks in Programming
See All in Programming
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
Git Lint
bkuhlmann
4
750
Java 22 Overview
kishida
1
180
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
300
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
180
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
Anthropic Cookbook のおすすめレシピ
schroneko
7
870
Hanami and htmx
bkuhlmann
0
210
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
130
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
360
SIMD Parallel Programming with the Vector API
josepaumard
0
120
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
Teambox: Starting and Learning
jrom
128
8.4k
The Invisible Customer
myddelton
114
12k
What the flash - Photography Introduction
edds
64
11k
The Pragmatic Product Professional
lauravandoore
25
5.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
Web Components: a chance to create the future
zenorocha
305
41k
Adopting Sorbet at Scale
ufuk
68
8.6k
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/