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
   

   View Slide

2. ࣗ෼ͷελοΫ
   • Node.js
   • ϑϩϯτΤϯυ/React/PWA
   • ReactNa1ve/Expo
   

   View Slide

3. Firebase ΁ͷڵຯ
   • SPA ʹεΩϧ͕ภ͍ͬͯͨͷͰɺิॿతͳ PaaS ͕΄͔ͬͨ͠
   • => Firebase
   • => AWS
   • => serverless
   

   View Slide

4. 2017/03
   

   View Slide

5. View Slide

6. ཁ໿
   • ϓϩτλΠϐϯάΛͱʹ͔͘αϘΓ͍ͨ
   • ੩తαΠτϗεςΟϯά + Func(ons
   • Ұ൪ͩΔ͍ೝূܥΛ࣋ͬͯ΄͍͠
   • ۚͰεέʔϧ͢Δྻࢦ޲DB΄͍͠
   

   View Slide

7. on Firebase
   • ੩తαΠτϗεςΟϯά + Func(ons
   • => Firebase hos+ng / Func+ons for Firebase
   • Ұ൪ͩΔ͍ೝূܥΛ࣋ͬͯ΄͍͠
   • => Firebase Auth
   • ۚͰεέʔϧ͢Δྻࢦ޲DB΄͍͠
   • => Firestore
   

   View Slide

8. ؾ͚ͮ͹ Firebase ʹશ෦͋ͬͨ
   • 2017/03 ࣌఺Ͱ͸଍Γͳ͔ͬͨ
   • Func-ons for Firebase ͕ private alpha
   • Firestore
   • datastore ͷΞΫηείϯτϩʔϧ͸ශऑ͗ͨ͢
   

   View Slide

9. Google ͸Զ͕޷͖ͳͷͰ͸ʁ
   

   View Slide

10. vs AWS
    • S3/Coginito/API Gateway/DynamoDB
    • Coginito ͕৘ใগͳ͗ͯ͢ਏ͍
    • DynamoDB ͷνϡʔχϯά͕Ϝζ͍
    • ཁ: terraform
    

    View Slide

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!
    ͋Μ·Γߟ͑Δ͜ͱͳָͯ͘
    

    View Slide

12. αʔόαΠυ Node.js ͷ࿩
    

    View Slide

13. ೔ຊͰαʔόαΠυ Node.js ͸࢖ΘΕ͍ͯͳ͍
    • ࠃ಺Ͱ΄ͱΜͲ࢖ΘΕͳ͍ͷͰϊ΢ϋ΢͕ͨ·Βͳ͍
    • ܲͱཛ໰୊
    • γϯάϧεϨουϞσϧͰͷྫ֎ճ෮/ো֐ௐ͕ࠪ೉͍͠
    • ΠϯϑϥʹݏΘΕ͕ͪ
    

    View Slide

14. Nodeӡ༻ͷղܾࡦ: func+ons ʹ؅ཧͤ͞Δ
    // firebase.json
    {
    "hosting": {
    "rewrites": [
    {
    "source": "**/**",
    "function": "server"
    }
    ]
    }
    }
    

    View Slide

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))
    })
    

    View Slide

16. How & Why
    • Express ͳΓΛىಈͯ͠ text/html Ͱฦ͢
    • SPAͰधཁ͕ߴ͍SSR͸ಈతͰ͋Δඞཁ͕͋Δ
    • Func6ons ʹશ෦؅ཧͤͯ͞αϘΔ
    

    View Slide

17. ࣮૷ྫ
    • Next.js Λ Firebase hos1ng Ͱಈ͔ͯ͠SSR͢Δ
    • ͳͥ dev.to ͕͜Μͳʹ΋଎͘ɺ͜Μͳʹ΋ࣗ෼ʹͱͬͯײಈత
    ͳͷ͔ Ͱͷ preact-cli
    

    View Slide

18. Pros/Cons
    • Pros
    • ೝূεςʔλεΛ func+ons ͷϝλσʔλ͔ΒऔΕָͯ
    • ӡ༻ෆཁ
    • Cons
    • Pricing ͷ͜ͱ͸Ұ੾ߟ͑ͯͳ͍
    • Spin up ͕஗͍
    

    View Slide

19. ࢼࢉ͢Δ
    h"ps:/
    /firebase.google.com/pricing/ ͕ศར
    

    View Slide

20. Firebase ΁ͷ ෆຬ
    • ଞͷ Func'on ΁ͷΞΫηε͕ outbound network
    • Cloud Func'ons Local Emulator ͕શવಈ͔ͳ͍
    • Node 6.11 ΋͏ݹ͍
    • ReactNa've/Expo Ͱ΋ Auth ͕ SDKඞཁ
    • ϓϩδΣΫτ 5ݸ
    

    View Slide

21. σϞ
    

    View Slide

22. ݁࿦
    • SPA͔ΒͷൃలͳΒ Firebase ͕࠷଎
    • AWS ͸ख਺ଟ͍
    • ۚͰԥͬͯΔײ͸൱Ίͳ͍
    

    View Slide