Node/SPA on Firebase Hosting

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