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
CSC305 Lecture 03
javiergs
PRO
0
230
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.1k
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
850
ソフトウェア設計の実践的な考え方
masuda220
PRO
3
470
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
380
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.3k
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
670
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
180
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
520
CSC509 Lecture 02
javiergs
PRO
0
400
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
66k
Why Our Code Smells
bkeepers
PRO
339
57k
The Cult of Friendly URLs
andyhume
79
6.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
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 खଟ͍ • ۚͰԥͬͯΔײ൱Ίͳ͍