Vue.js + Firebase で作った個人サービスの話。 https://nyan3.tacck.net/
ΏΔ8FCษڧձ!ࡳຈ@tacckʮʹΌʔΜʯͱͳ͘ 8FCΞϓϦΛ࡞ͬͨ2019/05/117VFKT'JSFCBTF
View Slide
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL୭• ໊લtacck• ࣄVue.jsΛʮͬͯͶʯͱ ؙ͛͢Δਓ• ͖ͳϑΟΪϡΞεέʔτͷٕεϓϨουɾΠʔάϧ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL/ZBO/ZBO/ZBO
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL/ZBO/ZBO/ZBO• ࡞ͬͨͷͷհ• Firebaseͷͬ͘͟Γ֓ཁ• ίʔυͷհ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL/ZBO/ZBO/ZBOը໘
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL'JSFCBTFͱ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDLͦͦ• FirebaseΛฉ͍ͨ͜ͱ͋Δਓ?✋
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDLͦͦ• FirebaseΛͬͨ͜ͱ͋Δਓ?
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL'JSFCBTFͱ• mBaaSͱݺΕΔαʔϏε• ϞόΠϧ͚ͷόοΫΤϯυػೳΛఏڙͯ͘͠ΕΔͷɻ ( Mobile Backend as a Service )• ϞόΠϧ͚ͱ͋Δ͕ɺJavaScriptͰར༻Ͱ͖Δػೳ͍͔ͭ͋͘Δɻ• ແྉར༻ͦͦ͑͜͜Δɻ (ࠓճઆ໌͢ΔϑϩϯτΤϯυ͚ͷػೳɺແྉར༻͕͋Δɻ)
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDLN#BB4ͷΧόʔൣғΠϯϑϥόοΫΤϯυϑϩϯτΤϯυ ϞόΠϧΞϓϦ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDLΠϯϑϥόοΫΤϯυN#BB4ͷΧόʔൣғϑϩϯτΤϯυ ϞόΠϧΞϓϦ͜ͷ͘Β͍໘Λݟͯ͘ΕΔ(όοΫΤϯυͷҰ෦ ࣗͰ࣮Մೳ)
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL'JSFCBTFͰͰ͖Δ͜ͱओʹϑϩϯτΤϯυͰ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDLओͳ'JSFCBTFͷػೳ• Πϯϑϥ• Hosting / WebαʔόͱσΟεΫྖҬ• HTMLɺCSSɺJSͳͲͷ੩తϑΝΠϧΛ͙͢ʹσϓϩΠՄೳɻ• Functions / όοΫΤϯυػೳ• Node.jsͰόοΫΤϯυػೳΛ࣮Մೳɻ• ࣗͰ࣮͢ΔͷͰΠϯϑϥଆͷػೳͱͳΔɻ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDLओͳ'JSFCBTFͷػೳ• όοΫΤϯυ• Authentication / ೝূ• EmailɺTwitterɺGoogle AccountɺͳͲ͑Δೝূػೳɻ• Cloud Firestore / σʔλϕʔε• NoSQLܕͷσʔλϕʔεͱͯ͠ར༻Մೳɻ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDLHostingFunctionsFirebaseLocalHostingFunctionsAuthenticationFirestore
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDLHostingFunctionsFirebaseLocalHostingFunctionsσϓϩΠAuthenticationFirestore
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDLHostingFunctionsFirebaseWebαΠτAPIAuthenticationFirestoreSDKͰར༻σϓϩΠྃͨ͠Β͙͢ʹར༻Մೳ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL/ZBO/ZBO/ZBOͷ߹• FirebaseػೳͰ͍ͬͯΔ͜ͱ• Hosting• Functions (GCPͷײੳͱͷΓͱΓ)• Cloud Firestore (ੳ݁ՌͷΈอ࣋)• ֎෦• GCP Cloud Natural Language API (Functionsܦ༝ͷײੳ) ※ແྉͷ߹FunctionsGoogleͷαʔϏεͱ͔͠௨৴Ͱ͖ͳ͍• Google Analytics• Google AdSense
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL/ZBO/ZBO/ZBO ɹͷத
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL/ZBO/ZBO/ZBOͷ߹• FirebaseػೳͰ͍ͬͯΔ͜ͱ• Hosting• Functions (GCPͷײੳͱͷΓͱΓ)• Cloud Firestore (ੳ݁ՌͷΈอ࣋)• ֎෦• GCP Cloud Natural Language API (Functionsܦ༝ͷײੳ)• Google Analytics• Google AdSense※ແྉͷ߹FunctionsGoogleͷαʔϏεͱ͔͠௨৴Ͱ͖ͳ͍͜ͷ͋ͨΓͷ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL)PTUJOH 7VFKT• ίʔυΛͬ͘͟Γ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL'VODUJPOT /PEFKT• ίʔυΛͬ͘͟Γ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDLڥ• ։ൃ൛ →खݩͰಈ͔͠ͳ͕Βਵ࣌֬ೝ• εςʔδϯά൛ →Firebase্Ͱఆ௨Γʹಈ͔͘ͷ֬ೝ• ϦϦʔε൛ →ϦϦʔε!
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL)PTUJOH 7VFKT• ڥΛຯʹ͍͚• “config/dev.env.js”, “build/webpack.dev.conf.js” / ։ൃ൛• “config/stg.env.js”, “build/webpack.stg.conf.js” / εςʔδϯά൛• “config/prod.env.js”, “build/webpack.prod.conf.js” / ϦϦʔε൛• ։ൃ൛Λ͏߹ →ϩʔΧϧͰ “yarn dev” ࣮ߦ• εςʔδϯά൛Λ͏߹ →ϩʔΧϧͰ “yarn build && yarn deploy” ࣮ߦ• ϦϦʔε൛Λ͏߹ →ϩʔΧϧͰ “yarn rel-build && yarn rel-deploy” ࣮ߦ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL'VODUJPOT /PEFKT• ڥมΛຯʹ͍͚ …͔͕ͨͬͨɺएׯ໘ɻ• ։ൃ൛Λ͏߹ →ϩʔΧϧͰ “npm run serve” ࣮ߦ• εςʔδϯά൛Λ͏߹ →Functionsͷ “config”ઃఆ && ϩʔΧϧͰ “yarn deploy” ࣮ߦ• ϦϦʔε൛Λ͏߹ →Functionsͷ “config”ઃఆ && ϩʔΧϧͰ “yarn rel-deploy” ࣮ߦ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL·ͱΊ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL·ͱΊ• Vue.js + Firebase Ͱ ʮʹΌʔΜʯͱͳ͘WebΞϓϦΛ࡞ͬͨɻ• Firebase Λ͏ͱɺ ؆୯ʹϑϩϯτΤϯυத৺ͷαʔϏεΛ࡞ΕΔɻ• ڥͷ͍͚ Vue.js + Firebase ͰͰ͖Δɻ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL·ͱΊ• Vue.js ͷίϯϙʔωϯτͳͲͷߏɺ ϦϑΝΫλͷ༨͋Γɻ• ͦͦɺVue CLI 3 Ͱ࡞Γ͍ͨ͠ɻ• ڥͷઃఆ͍͚ɺ ͪΌΜͱཧɾखॱԽ͓͖͍ͯͨ͠ɻ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL13
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDLΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDLΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP20195݄30 ()։࠵ܾఆ!!!
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDLΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSPMonaca ͱ?→ HTML/CSS/JavaScriptͰ ɹεϚϗΞϓϦΛ࡞ΕΔ ɹϓϥοτϑΥʔϜ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDLΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSPڵຯͷ͋Δํ ӈͷQRίʔυΛνΣοΫ!!
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDLΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSPٸื: ɹ͜ͷษڧձͰ ɹൃදͯ͘͠ΕΔਓ!20 1໊ / LT(5) 1໊
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDLFOE