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.4k
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
32
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
15
5.1k
Server Side JavaScript のためのバンドル最適化
mizchi
5
6.8k
V8 as a container on CDN Edge worker
mizchi
6
2.1k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
7
4.3k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.4k
「フロントエンド領域」を再定義する
mizchi
50
36k
Other Decks in Programming
See All in Programming
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
370
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
140
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
230
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.3k
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
210
技術を根付かせる / How to make technology take root
kubode
1
250
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
Open source software: how to live long and go far
gaelvaroquaux
0
630
Software Architecture
hschwentner
6
2.1k
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
160
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.4k
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
380
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Building Your Own Lightsaber
phodgson
104
6.2k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Code Reviewing Like a Champion
maltzj
521
39k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Facilitating Awesome Meetings
lara
52
6.2k
RailsConf 2023
tenderlove
29
1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
550
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 खଟ͍ • ۚͰԥͬͯΔײ൱Ίͳ͍