Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Node/SPA on Firebase Hosting

Node/SPA on Firebase Hosting

mizchi @ Firebase.yebisu
2017/11/21 LT

Koutarou Chikuba

November 21, 2017
Tweet

More Decks by Koutarou Chikuba

Other Decks in Programming

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