Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Node/SPA on Firebase Hosting

Avatar for Koutarou Chikuba Koutarou Chikuba
November 21, 2017
Programming
4
5.5k

Node/SPA on Firebase Hosting

mizchi @ Firebase.yebisu
2017/11/21 LT
Avatar for Koutarou Chikuba

Koutarou Chikuba

November 21, 2017
Tweet

More Decks by Koutarou Chikuba

See All by Koutarou Chikuba
CI/CD 改善の勘所
Avatar for Koutarou Chikuba mizchi
0
110
極限環境で最終ビルドを絞るためのフロントエンド設計
Avatar for Koutarou Chikuba mizchi
15
5.5k
Server Side JavaScript のためのバンドル最適化
Avatar for Koutarou Chikuba mizchi
5
7.2k
V8 as a container on CDN Edge worker
Avatar for Koutarou Chikuba mizchi
6
2.3k
Edge Side Frontend という新領域
Avatar for Koutarou Chikuba mizchi
35
14k
バンドル最適化マニアクス at tfconf
Avatar for Koutarou Chikuba mizchi
7
4.4k
「たかがJavaScript」のその先 #TECHPLAY
Avatar for Koutarou Chikuba mizchi
47
20k
Deno Node 両刀
Avatar for Koutarou Chikuba mizchi
6
2.5k
「フロントエンド領域」を再定義する
Avatar for Koutarou Chikuba mizchi
50
37k

Other Decks in Programming

See All in Programming
Goで作る、開発・CI環境
Avatar for Shinpei Mine sin392
0
270
AI時代のソフトウェア開発を考える（2025/07版） / Agentic Software Engineering Findy 2025-07 Edition
Avatar for Takuto Wada twada
PRO
99
37k
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
Avatar for Irina Nazarova irinanazarova
0
260
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
Avatar for Yutaro Muta yutailang0119
0
170
Agentic Coding: The Future of Software Development with Agents
Avatar for Armin Ronacher mitsuhiko
0
140
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @enterJS Advanced Angular Day 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
270
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
Avatar for Aki Nakahara akinko_0915
0
150
ソフトウェア設計とAI技術の活用
Avatar for 増田 亨 masuda220
PRO
22
5.6k
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ～継続的な取り組みを添えて～
Avatar for Takuya TAKAHASHI takutakahashi
4
1.3k
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
Avatar for Oikon s4yuba
16
13k
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
Avatar for panda_program panda_program
3
470
PHPカンファレンス関西2025　基調講演
Avatar for SUGIMOTO Kei sugimotokei
4
420

Featured

See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
48
2.9k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.9k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
86
4.8k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.7k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.7k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.9k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
25
1.7k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k

Transcript

  1. Node/SPA ΤϯδχΞʹͱͬͯͷ ෋߽త Firebase Hos1ng mizchi @ Firebase.yebisu 2017/11/21 LT

  2. ࣗ෼ͷελοΫ • Node.js • ϑϩϯτΤϯυ/React/PWA • ReactNa1ve/Expo

  3. Firebase ΁ͷڵຯ • SPA ʹεΩϧ͕ภ͍ͬͯͨͷͰɺิॿతͳ PaaS ͕΄͔ͬͨ͠ • => Firebase

    • => AWS • => serverless

  4. 2017/03

  5. None

  6. ཁ໿ • ϓϩτλΠϐϯάΛͱʹ͔͘αϘΓ͍ͨ • ੩తαΠτϗεςΟϯά + Func(ons • Ұ൪ͩΔ͍ೝূܥΛ࣋ͬͯ΄͍͠ •

    ۚͰεέʔϧ͢Δྻࢦ޲DB΄͍͠

  7. on Firebase • ੩తαΠτϗεςΟϯά + Func(ons • => Firebase hos+ng

    / Func+ons for Firebase • Ұ൪ͩΔ͍ೝূܥΛ࣋ͬͯ΄͍͠ • => Firebase Auth • ۚͰεέʔϧ͢Δྻࢦ޲DB΄͍͠ • => Firestore

  8. ؾ͚ͮ͹ Firebase ʹશ෦͋ͬͨ • 2017/03 ࣌఺Ͱ͸଍Γͳ͔ͬͨ • Func-ons for Firebase

    ͕ private alpha • Firestore • datastore ͷΞΫηείϯτϩʔϧ͸ශऑ͗ͨ͢

  9. Google ͸Զ͕޷͖ͳͷͰ͸ʁ

  10. vs AWS • S3/Coginito/API Gateway/DynamoDB • Coginito ͕৘ใগͳ͗ͯ͢ਏ͍ • DynamoDB

    ͷνϡʔχϯά͕Ϝζ͍ • ཁ: terraform

  11. 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! ͋Μ·Γߟ͑Δ͜ͱͳָͯ͘

  12. αʔόαΠυ Node.js ͷ࿩

  13. ೔ຊͰαʔόαΠυ Node.js ͸࢖ΘΕ͍ͯͳ͍ • ࠃ಺Ͱ΄ͱΜͲ࢖ΘΕͳ͍ͷͰϊ΢ϋ΢͕ͨ·Βͳ͍ • ܲͱཛ໰୊ • γϯάϧεϨουϞσϧͰͷྫ֎ճ෮/ো֐ௐ͕ࠪ೉͍͠ •

    ΠϯϑϥʹݏΘΕ͕ͪ

  14. Nodeӡ༻ͷղܾࡦ: func+ons ʹ؅ཧͤ͞Δ // firebase.json { "hosting": { "rewrites": [

    { "source": "**/**", "function": "server" } ] } }

  15. 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)) })

  16. How & Why • Express ͳΓΛىಈͯ͠ text/html Ͱฦ͢ • SPAͰधཁ͕ߴ͍SSR͸ಈతͰ͋Δඞཁ͕͋Δ

    • Func6ons ʹશ෦؅ཧͤͯ͞αϘΔ

  17. ࣮૷ྫ • Next.js Λ Firebase hos1ng Ͱಈ͔ͯ͠SSR͢Δ • ͳͥ dev.to

    ͕͜Μͳʹ΋଎͘ɺ͜Μͳʹ΋ࣗ෼ʹͱͬͯײಈత ͳͷ͔ Ͱͷ preact-cli

  18. Pros/Cons • Pros • ೝূεςʔλεΛ func+ons ͷϝλσʔλ͔ΒऔΕָͯ • ӡ༻ෆཁ •

    Cons • Pricing ͷ͜ͱ͸Ұ੾ߟ͑ͯͳ͍ • Spin up ͕஗͍

  19. ࢼࢉ͢Δ h"ps:/ /firebase.google.com/pricing/ ͕ศར

  20. Firebase ΁ͷ ෆຬ • ଞͷ Func'on ΁ͷΞΫηε͕ outbound network •

    Cloud Func'ons Local Emulator ͕શવಈ͔ͳ͍ • Node 6.11 ΋͏ݹ͍ • ReactNa've/Expo Ͱ΋ Auth ͕ SDKඞཁ • ϓϩδΣΫτ 5ݸ

  21. σϞ

  22. ݁࿦ • SPA͔ΒͷൃలͳΒ Firebase ͕࠷଎ • AWS ͸ख਺ଟ͍ • ۚͰԥͬͯΔײ͸൱Ίͳ͍