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.5k
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
CI/CD 改善の勘所
mizchi
0
130
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
16
5.6k
Server Side JavaScript のためのバンドル最適化
mizchi
5
7.4k
V8 as a container on CDN Edge worker
mizchi
6
2.3k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
8
4.5k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
7
2.5k
「フロントエンド領域」を再定義する
mizchi
50
37k
Other Decks in Programming
See All in Programming
CSC509 Lecture 05
javiergs
PRO
0
300
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
640
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
210
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
150
Devoxx BE - Local Development in the AI Era
kdubois
0
120
Cursorハンズオン実践!
eltociear
2
660
私はどうやって技術力を上げたのか
yusukebe
43
18k
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
0
100
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
450
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.8k
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
1.8k
What's new in Spring Modulith?
olivergierke
1
130
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Into the Great Unknown - MozCon
thekraken
40
2.1k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Faster Mobile Websites
deanohume
310
31k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Optimizing for Happiness
mojombo
379
70k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
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 खଟ͍ • ۚͰԥͬͯΔײ൱Ίͳ͍