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
フロントエンドエンジニアのためのServer Push入門 / Server Push for...
Search
Masashi Hirano
June 07, 2018
Programming
0
380
フロントエンドエンジニアのためのServer Push入門 / Server Push for Frontend Engineer
JAM plus #1 でNetlifyでHTTP/2サーバプッシュするLTしました
https://kfug.connpass.com/event/87799/
Masashi Hirano
June 07, 2018
Tweet
Share
More Decks by Masashi Hirano
See All by Masashi Hirano
You may not need XXX in Node.js
masashi
5
1.3k
OSSとコミュニティを支える
masashi
1
1.1k
英語ができなかった自分達が、グローバルチーム立ち上げに挑戦!?
masashi
1
3.2k
フロントエンド開発のためのセキュリティ入門について
masashi
1
470
フロントエンド開発のためのセキュリティ入門
masashi
49
17k
Node.jsの2022年と未来 / Node.js in 2022 and Future
masashi
1
1.1k
Corepack ~Node.jsに追加されたパッケージマネージャーマネージャー~ / #tng37
masashi
3
12k
Node.js + Web Compatibility
masashi
2
620
サイボウズが行うフロントエンドの品質保証 / Frontend Quality Assurance at Cybozu
masashi
10
2.9k
Other Decks in Programming
See All in Programming
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
810
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
180
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
110
Code smarter, not harder - How AI Coding Tools Boost Your Productivity | Angular Meetup Berlin
danielsogl
0
100
Software Architecture
hschwentner
6
2.1k
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
40
15k
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
Pulsar2 を雰囲気で使ってみよう
anoken
0
240
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
580
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
WebDriver BiDiとは何なのか
yotahada3
1
150
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.2k
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
350
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Optimizing for Happiness
mojombo
376
70k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
A Philosophy of Restraint
colly
203
16k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
We Have a Design System, Now What?
morganepeng
51
7.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Transcript
ϑϩϯτΤϯυ ΤϯδχΞͷͨΊͷ Server Pushೖ JAM plus #1 Masashi Hirano
(@shisama)
{ "about": { "name": "Masashi Hirano", "works": "Weblio, Inc.", "twitter":
"@shisama_", "github": "shisama" } }
λʔήοτ • ૣ͍WebΛఏڙ͍ͨ͠ਓ • αʔόઃఆͨ͘͠ͳ͍ ָ͍ͨ͠ϑϩϯτΤϯ υΤϯδχΞͷօ༷
ࠓ͞ͳ͍͜ͱ • HTTP/1.1HTTP/2ͷৄࡉ • αʔόͷ
HTTP/1.1ͷ • 1ͭͷϦΫΤετ͕ྃ͢Δ·Ͱ࣍ͷϦΫΤετߦ͑ͳ͍ • ଟॏԽ͢Δ͜ͱͰ1υϝΠϯͷෳଓՄೳ • ಉ࣌ଓݶΒΕ͍ͯΔ • Chromeͷ߹6ͭ·Ͱ͔͠ಉ࣌ଓͰ͖ͳ͍ https://codezine.jp/article/detail/8663
HTTP/1.1ͷ • HTTPύΠϓϥΠϯ • લճͷϦΫΤετΛͨͣʹ࣍ͷϦΫΤετΛૹ৴Մೳ • αʔόʔϦΫΤετͷॱ൪௨ΓʹϨεϙϯεΛฦ͞ͳ͚ΕͳΒͳ͍ • ઌ಄ͷϦΫΤετʹ͕͔͔࣌ؒͬͨ߹ɺޙଓͷϨεϙϯεϒϩοΫ ͞ΕΔ
https://codezine.jp/article/detail/8663
HTTP/1.1ͷ • ߴͳWeb͕ٻΊΒΕΔݱ • ϦΫΤετΛݮΒ͍ͨ͠ • CSSεϓϥΠτɺJSϑΝΠϧͷόϯυϧͳͲͰ ରԠ͍ͯ͠Δ͕ਏ͍ • όϯυϧͨ͠ϑΝΠϧͷେ͖͕͞ʹͳΔ͜
ͱ
HTTP/2
HTTP/2ͱ • HTTP/1.1ͷϨΠςϯγΛղܾ͢ΔͨΊͷ৽͠ ͍ϓϩτίϧ • HTTP/1.1͔Β16ͿΓͷΞοϓσʔτ • 2015ʹRFCԽࡁΈ(RFC7540) • ΄΅ͯ͢ͷϒϥβ͕ରԠ(IE11!)
HTTP/2ͷओͳػೳ • ετϦʔϜͷଟॏԽ • ετϦʔϜͷ༏ઌ • ϑϩʔ੍ޚ • ϔομѹॖ(HPACK) •
αʔόϓογϡ
HTTP/2ͷओͳػೳ • ετϦʔϜͷଟॏԽ • ετϦʔϜͷ༏ઌ • ϑϩʔ੍ޚ • ϔομѹॖ(HPACK) •
αʔόϓογϡ
αʔόϓογϡͱ • Ϧιʔεऔಘʹ1RTT(ϦΫΤετ+Ϩεϙϯε)Λඞཁͱ͠ͳ͍ • ࠷ॳͷϦΫΤετΛड͚औͬͨαʔό͕࣍ͷϦΫΤετΛ༧ ଌͯ͠ΫϥΠΞϯτʹpush͢Δ )5.-ͷϦΫΤετʹର ͯ͠$44ͱը૾Λಉ࣌ʹ ৴͍ͯ͠Δ https://giuseppeciotta.net/getting-to-know-http20-with-the-mosaic-demo.html
αʔόΛ৮Βͳ͚Ε͍͚ͳ͍ͷͰ͠ΐɾɾɾ
ϑϩϯτΤϯυ ΤϯδχΞͷͨΊͷ Server Pushೖ Masashi Hirano (@shisama)
ϑϩϯτΤϯυ ΤϯδχΞͷͨΊͷ Server Pushೖ Masashi Hirano (@shisama) αʔόͷ͠·ͤΜʂʂ
Netlify
Netlifyͱ • ߴػೳϗεςΟϯάαʔϏε • ϏϧυɾσϓϩΠɾϗεςΟϯάΛͯ͢ߦ͑Δ • GitHubʹ͋ΔϦϙδτϦΛͦͷ··ϗεςΟϯ άͰ͖Δɻpush͢ΔͨͼʹࣗಈσϓϩΠ • HTTPSɺHTTP/2͕ແྉͰ؆୯ʹ͑Δ
https://www.netlify.com/blog/2017/07/18/http/2-server-push-on-netlify/
NetlifyͰαʔόϓογϡ • σϓϩΠ͢ΔσΟϨΫτϦʹ_headersͱ͍͏ ϑΝΠϧΛஔ͚ͩ͘ • _headersʹͲͷϦιʔεΛpush͢Δͷ͔ॻ͘
NetlifyͰαʔόϓογϡ . !"" public # !"" _headers # !"" my-app.js
# !"" index.html # %"" style.css %"" src !"" my-app.js !"" index.html %"" style.css QVCMJDΛσϓϩΠ͢Δ߹ɺ QVCMJDԼʹ@IFBEFSTΛஔ͘
_headersϑΝΠϧ /server-push-path Link: </my-app.js>; rel=preload; as=script Link: </style.css>; rel=preload; as=style
ϦΫΤετͷύε -JOLQVTI͍ͨ͠ϦιʔεͷύεSFMQSFMPBEBTϦιʔεͷछྨ
Ϩεϙϯεϔομʔ ϦΫΤετͨ͠IUNMͷϨεϙϯεϔομʔ ʹMJOL͕Ճ͞ΕΔ
HTTP1.1ͱHTTP/2 ൺֱ $ISPNFͷ߹ɺ)551ͩͱ 1SPUPDPM͕IʹͳΔ
HTTP1.1ͱHTTP/2 ൺֱ *OJUJBUPS͕1VTI0UIFSʹͳ͍ͬͯͯαʔ όϓογϡ͞Ε͍ͯΔ͜ͱ͕Θ͔Δ
αʔόϓογϡ͕ෆཁʹͳͬͨΒ /server-push-path Link: </my-app.js>; rel=preload; as=script nopush Link: </style.css>; rel=preload;
as=style OPQVTIΛ͚Δ
None
firebaseͱ • GoogleͷϞόΠϧϓϥοτϑΥʔϜ • Realtime DatabaseɺCloud Functionɺ Crashlytics etc •
ϗεςΟϯάαʔϏε͋Δ • ແྉͰHTTPSHTTP/2͕͑Δ
firebaseͰαʔόϓογϡ . !"" firebase.json !"" public # !"" img1.png #
!"" index.html # %"" style.css %"" src !"" img1.png !"" index.html %"" style.css pSFCBTFKTPOΛஔ͘
firebase.json { "hosting": { "public": "public", "headers": [ { "source":
"/", "headers": [{ "key": "Link", "value": "</elements/my-app.js>;rel=preload;as=script,</ style.css>;rel=preload;as=style" }] } ] } }
·ͱΊ • HTTP/2αʔόϓογϡͰϦΫΤετΛݮΒ ͠ϖʔδϩʔυΛߴԽ • ߴػೳϗεςΟϯάαʔϏεΛ͏͜ͱͰ HTTP/2αʔόϓογϡ؆୯ʹ͑Δ
એ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠