Node/SPA on Firebase Hosting

by Koutarou Chikuba

Slide 1

Slide 1 text

Node/SPA ΤϯδχΞʹͱͬͯͷ ෋߽త Firebase Hos1ng mizchi @ Firebase.yebisu 2017/11/21 LT

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

2017/03

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Google ͸Զ͕޷͖ͳͷͰ͸ʁ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

αʔόαΠυ Node.js ͷ࿩

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

σϞ

Slide 22

Slide 22 text

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