Node/SPA on Firebase Hosting

mizchi @ Firebase.yebisu
2017/11/21 LT

Transcript

1. Node/SPA ΤϯδχΞʹͱͬͯͷ ෋߽త Firebase Hos1ng mizchi @ Firebase.yebisu 2017/11/21 LT
2. ࣗ෼ͷελοΫ • Node.js • ϑϩϯτΤϯυ/React/PWA • ReactNa1ve/Expo
3. Firebase ΁ͷڵຯ • SPA ʹεΩϧ͕ภ͍ͬͯͨͷͰɺิॿతͳ PaaS ͕΄͔ͬͨ͠ • => Firebase • => AWS • => serverless
4. 2017/03
6. ཁ໿ • ϓϩτλΠϐϯάΛͱʹ͔͘αϘΓ͍ͨ • ੩తαΠτϗεςΟϯά + Func(ons • Ұ൪ͩΔ͍ೝূܥΛ࣋ͬͯ΄͍͠ • ۚͰεέʔϧ͢Δྻࢦ޲DB΄͍͠
7. on Firebase • ੩తαΠτϗεςΟϯά + Func(ons • => Firebase hos+ng / Func+ons for Firebase • Ұ൪ͩΔ͍ೝূܥΛ࣋ͬͯ΄͍͠ • => Firebase Auth • ۚͰεέʔϧ͢Δྻࢦ޲DB΄͍͠ • => Firestore
8. ؾ͚ͮ͹ Firebase ʹશ෦͋ͬͨ • 2017/03 ࣌఺Ͱ͸଍Γͳ͔ͬͨ • Func-ons for Firebase ͕ private alpha • Firestore • datastore ͷΞΫηείϯτϩʔϧ͸ශऑ͗ͨ͢
9. Google ͸Զ͕޷͖ͳͷͰ͸ʁ
10. vs AWS • S3/Coginito/API Gateway/DynamoDB • Coginito ͕৘ใগͳ͗ͯ͢ਏ͍ • DynamoDB ͷνϡʔχϯά͕Ϝζ͍ • ཁ: terraform
11. 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! ͋Μ·Γߟ͑Δ͜ͱͳָͯ͘
12. αʔόαΠυ Node.js ͷ࿩
13. ೔ຊͰαʔόαΠυ Node.js ͸࢖ΘΕ͍ͯͳ͍ • ࠃ಺Ͱ΄ͱΜͲ࢖ΘΕͳ͍ͷͰϊ΢ϋ΢͕ͨ·Βͳ͍ • ܲͱཛ໰୊ • γϯάϧεϨουϞσϧͰͷྫ֎ճ෮/ো֐ௐ͕ࠪ೉͍͠ • ΠϯϑϥʹݏΘΕ͕ͪ
14. Nodeӡ༻ͷղܾࡦ: func+ons ʹ؅ཧͤ͞Δ // firebase.json { "hosting": { "rewrites": [ { "source": "**/**", "function": "server" } ] } }
15. 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)) })
16. How & Why • Express ͳΓΛىಈͯ͠ text/html Ͱฦ͢ • SPAͰधཁ͕ߴ͍SSR͸ಈతͰ͋Δඞཁ͕͋Δ • Func6ons ʹશ෦؅ཧͤͯ͞αϘΔ
17. ࣮૷ྫ • Next.js Λ Firebase hos1ng Ͱಈ͔ͯ͠SSR͢Δ • ͳͥ dev.to ͕͜Μͳʹ΋଎͘ɺ͜Μͳʹ΋ࣗ෼ʹͱͬͯײಈత ͳͷ͔ Ͱͷ preact-cli
18. Pros/Cons • Pros • ೝূεςʔλεΛ func+ons ͷϝλσʔλ͔ΒऔΕָͯ • ӡ༻ෆཁ • Cons • Pricing ͷ͜ͱ͸Ұ੾ߟ͑ͯͳ͍ • Spin up ͕஗͍
19. ࢼࢉ͢Δ h"ps:/ /firebase.google.com/pricing/ ͕ศར
20. Firebase ΁ͷ ෆຬ • ଞͷ Func'on ΁ͷΞΫηε͕ outbound network • Cloud Func'ons Local Emulator ͕શવಈ͔ͳ͍ • Node 6.11 ΋͏ݹ͍ • ReactNa've/Expo Ͱ΋ Auth ͕ SDKඞཁ • ϓϩδΣΫτ 5ݸ
21. σϞ
22. ݁࿦ • SPA͔ΒͷൃలͳΒ Firebase ͕࠷଎ • AWS ͸ख਺ଟ͍ • ۚͰԥͬͯΔײ͸൱Ίͳ͍