Node/SPA on Firebase Hosting

Node/SPA on Firebase Hosting

mizchi @ Firebase.yebisu
2017/11/21 LT

3aebd86547bfc5cdb451d5f2f95ed5d8?s=128

Koutarou Chikuba

November 21, 2017
Tweet

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

  5. None
  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 ͸ख਺ଟ͍ • ۚͰԥͬͯΔײ͸൱Ίͳ͍