Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Node/SPA on Firebase Hosting
Search
Koutarou Chikuba
November 21, 2017
Programming
4
5.3k
Node/SPA on Firebase Hosting
mizchi @ Firebase.yebisu
2017/11/21 LT
Koutarou Chikuba
November 21, 2017
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
14
4.6k
Server Side JavaScript のためのバンドル最適化
mizchi
5
6.3k
V8 as a container on CDN Edge worker
mizchi
6
1.8k
Edge Side Frontend という新領域
mizchi
34
14k
バンドル最適化マニアクス at tfconf
mizchi
7
4.1k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.3k
「フロントエンド領域」を再定義する
mizchi
50
35k
光を超えるためのフロントエンドアーキテクチャ
mizchi
84
21k
Other Decks in Programming
See All in Programming
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
610
Go Code Generation at newmo / 2024-08-27 #newmo_layerx_go
genkey6
0
510
ESLint Rule により事業, 技術ドメインに沿った制約と誓約を敷衍させるアプローチのすゝめ
shinyaigeek
1
2.7k
Using Livebook to build and deploy internal tools @ ElixirConf 2024
hugobarauna
0
210
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
220
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
180
Wallet API, Verifier APIで実現するIDカード on iPhoneの世界
shitamori1272
1
320
BasicBasic認証
sadnessojisan
5
2.5k
Some more adventure of Happy Eyeballs
coe401_
2
150
これからの時代の新標準!SwiftTestingへの移行とトラブルシューティング
uetyo
0
440
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
590
仮想ファイルシステムを導入して開発環境のストレージ課題を解消する
segadevtech
2
390
Featured
See All Featured
Visualization
eitanlees
142
15k
Debugging Ruby Performance
tmm1
72
12k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Web development in the modern age
philhawksworth
204
10k
Documentation Writing (for coders)
carmenintech
65
4.3k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.7k
Code Reviewing Like a Champion
maltzj
518
39k
Raft: Consensus for Rubyists
vanstee
135
6.5k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
Unsuck your backbone
ammeep
667
57k
Transcript
Node/SPA ΤϯδχΞʹͱͬͯͷ ߽త Firebase Hos1ng mizchi @ Firebase.yebisu 2017/11/21 LT
ࣗͷελοΫ • Node.js • ϑϩϯτΤϯυ/React/PWA • ReactNa1ve/Expo
Firebase ͷڵຯ • SPA ʹεΩϧ͕ภ͍ͬͯͨͷͰɺิॿతͳ PaaS ͕΄͔ͬͨ͠ • => Firebase
• => AWS • => serverless
2017/03
None
ཁ • ϓϩτλΠϐϯάΛͱʹ͔͘αϘΓ͍ͨ • ੩తαΠτϗεςΟϯά + Func(ons • Ұ൪ͩΔ͍ೝূܥΛ࣋ͬͯ΄͍͠ •
ۚͰεέʔϧ͢ΔྻࢦDB΄͍͠
on Firebase • ੩తαΠτϗεςΟϯά + Func(ons • => Firebase hos+ng
/ Func+ons for Firebase • Ұ൪ͩΔ͍ೝূܥΛ࣋ͬͯ΄͍͠ • => Firebase Auth • ۚͰεέʔϧ͢ΔྻࢦDB΄͍͠ • => Firestore
ؾ͚ͮ Firebase ʹશ෦͋ͬͨ • 2017/03 ࣌ͰΓͳ͔ͬͨ • Func-ons for Firebase
͕ private alpha • Firestore • datastore ͷΞΫηείϯτϩʔϧශऑ͗ͨ͢
Google Զ͕͖ͳͷͰʁ
vs AWS • S3/Coginito/API Gateway/DynamoDB • Coginito ͕ใগͳ͗ͯ͢ਏ͍ • DynamoDB
ͷνϡʔχϯά͕Ϝζ͍ • ཁ: terraform
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! ͋Μ·Γߟ͑Δ͜ͱͳָͯ͘
αʔόαΠυ Node.js ͷ
ຊͰαʔόαΠυ Node.js ΘΕ͍ͯͳ͍ • ࠃͰ΄ͱΜͲΘΕͳ͍ͷͰϊϋ͕ͨ·Βͳ͍ • ܲͱཛ • γϯάϧεϨουϞσϧͰͷྫ֎ճ෮/োௐ͕͍ࠪ͠ •
ΠϯϑϥʹݏΘΕ͕ͪ
Nodeӡ༻ͷղܾࡦ: func+ons ʹཧͤ͞Δ // firebase.json { "hosting": { "rewrites": [
{ "source": "**/**", "function": "server" } ] } }
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)) })
How & Why • Express ͳΓΛىಈͯ͠ text/html Ͱฦ͢ • SPAͰधཁ͕ߴ͍SSRಈతͰ͋Δඞཁ͕͋Δ
• Func6ons ʹશ෦ཧͤͯ͞αϘΔ
࣮ྫ • Next.js Λ Firebase hos1ng Ͱಈ͔ͯ͠SSR͢Δ • ͳͥ dev.to
͕͜Μͳʹ͘ɺ͜Μͳʹࣗʹͱͬͯײಈత ͳͷ͔ Ͱͷ preact-cli
Pros/Cons • Pros • ೝূεςʔλεΛ func+ons ͷϝλσʔλ͔ΒऔΕָͯ • ӡ༻ෆཁ •
Cons • Pricing ͷ͜ͱҰߟ͑ͯͳ͍ • Spin up ͕͍
ࢼࢉ͢Δ h"ps:/ /firebase.google.com/pricing/ ͕ศར
Firebase ͷ ෆຬ • ଞͷ Func'on ͷΞΫηε͕ outbound network •
Cloud Func'ons Local Emulator ͕શવಈ͔ͳ͍ • Node 6.11 ͏ݹ͍ • ReactNa've/Expo Ͱ Auth ͕ SDKඞཁ • ϓϩδΣΫτ 5ݸ
σϞ
݁ • SPA͔ΒͷൃలͳΒ Firebase ͕࠷ • AWS खଟ͍ • ۚͰԥͬͯΔײ൱Ίͳ͍