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
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
470
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
360
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
810
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
300
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2k
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
10
6.6k
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.9k
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
610
Go言語はstack overflowの夢を見るか?
logica0419
0
120
What's new in Spring Modulith?
olivergierke
1
140
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.9k
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
180
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
697
190k
For a Future-Friendly Web
brad_frost
180
9.9k
Site-Speed That Sticks
csswizardry
11
890
Optimizing for Happiness
mojombo
379
70k
GitHub's CSS Performance
jonrohan
1032
470k
We Have a Design System, Now What?
morganepeng
53
7.8k
How to Think Like a Performance Engineer
csswizardry
27
2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
GraphQLとの向き合い方2022年版
quramy
49
14k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
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 खଟ͍ • ۚͰԥͬͯΔײ൱Ίͳ͍