mizchi @ Firebase.yebisu 2017/11/21 LT
Node/SPA ΤϯδχΞʹͱͬͯͷ ߽తFirebase Hos1ngmizchi @ Firebase.yebisu2017/11/21 LT
View Slide
ࣗͷελοΫ• Node.js• ϑϩϯτΤϯυ/React/PWA• ReactNa1ve/Expo
Firebase ͷڵຯ• SPA ʹεΩϧ͕ภ͍ͬͯͨͷͰɺิॿతͳ PaaS ͕΄͔ͬͨ͠• => Firebase• => AWS• => serverless
2017/03
ཁ• ϓϩτλΠϐϯάΛͱʹ͔͘αϘΓ͍ͨ• ੩తαΠτϗεςΟϯά + Func(ons• Ұ൪ͩΔ͍ೝূܥΛ࣋ͬͯ΄͍͠• ۚͰεέʔϧ͢ΔྻࢦDB΄͍͠
on Firebase• ੩తαΠτϗεςΟϯά + Func(ons• => Firebase hos+ng / Func+ons for Firebase• Ұ൪ͩΔ͍ೝূܥΛ࣋ͬͯ΄͍͠• => Firebase Auth• ۚͰεέʔϧ͢ΔྻࢦDB΄͍͠• => Firestore
ؾ͚ͮ Firebase ʹશ෦͋ͬͨ• 2017/03 ࣌ͰΓͳ͔ͬͨ• Func-ons for Firebase ͕ private alpha• Firestore• datastore ͷΞΫηείϯτϩʔϧශऑ͗ͨ͢
Google Զ͕͖ͳͷͰʁ
vs AWS• S3/Coginito/API Gateway/DynamoDB• Coginito ͕ใগͳ͗ͯ͢ਏ͍• DynamoDB ͷνϡʔχϯά͕Ϝζ͍• ཁ: terraform
Start Firebase hos-ng$ npm i -g firebase-tools$ mkdir myapp; cd myapp$ firebase init # Select hosting, functions and firestore$ firebase serve # open localhost:5000$ firebase deploy # yeah!͋Μ·Γߟ͑Δ͜ͱͳָͯ͘
αʔόαΠυ Node.js ͷ
ຊͰαʔόαΠυ Node.js ΘΕ͍ͯͳ͍• ࠃͰ΄ͱΜͲΘΕͳ͍ͷͰϊϋ͕ͨ·Βͳ͍• ܲͱཛ• γϯάϧεϨουϞσϧͰͷྫ֎ճ෮/োௐ͕͍ࠪ͠• ΠϯϑϥʹݏΘΕ͕ͪ
Nodeӡ༻ͷղܾࡦ: func+ons ʹཧͤ͞Δ// firebase.json{"hosting": {"rewrites": [{"source": "**/**","function": "server"}]}}
func%ons.h*ps.onRequest Ͱ ѲΔ// next.js ͷྫconst functions = require('firebase-functions')const next = require('next')const app = next({ dev: true, conf: { distDir: 'next' } })const handle = app.getRequestHandler()exports.server = functions.https.onRequest((req, res) => {return app.prepare().then(() => handle(req, res))})
How & Why• Express ͳΓΛىಈͯ͠ text/html Ͱฦ͢• SPAͰधཁ͕ߴ͍SSRಈతͰ͋Δඞཁ͕͋Δ• Func6ons ʹશ෦ཧͤͯ͞αϘΔ
࣮ྫ• Next.js Λ Firebase hos1ng Ͱಈ͔ͯ͠SSR͢Δ• ͳͥ dev.to ͕͜Μͳʹ͘ɺ͜Μͳʹࣗʹͱͬͯײಈతͳͷ͔ Ͱͷ preact-cli
Pros/Cons• Pros• ೝূεςʔλεΛ func+ons ͷϝλσʔλ͔ΒऔΕָͯ• ӡ༻ෆཁ• Cons• Pricing ͷ͜ͱҰߟ͑ͯͳ͍• Spin up ͕͍
ࢼࢉ͢Δh"ps://firebase.google.com/pricing/ ͕ศར
Firebase ͷ ෆຬ• ଞͷ Func'on ͷΞΫηε͕ outbound network• Cloud Func'ons Local Emulator ͕શવಈ͔ͳ͍• Node 6.11 ͏ݹ͍• ReactNa've/Expo Ͱ Auth ͕ SDKඞཁ• ϓϩδΣΫτ 5ݸ
σϞ
݁• SPA͔ΒͷൃలͳΒ Firebase ͕࠷• AWS खଟ͍• ۚͰԥͬͯΔײ൱Ίͳ͍