フロントエンドエンジニアのためのServer Push入門 / Server Push for Frontend Engineer

JAM plus #1 でNetlifyでHTTP/2サーバプッシュするLTしました
https://kfug.connpass.com/event/87799/

Transcript

1. ϑϩϯτΤϯυ ΤϯδχΞͷͨΊͷ Server Pushೖ໳ JAM plus #1 
 Masashi Hirano (@shisama)
2. { "about": { "name": "Masashi Hirano", "works": "Weblio, Inc.", "twitter": "@shisama_", "github": "shisama" } }
3. λʔήοτ • ૣ͍WebΛఏڙ͍ͨ͠ਓ • αʔόઃఆͨ͘͠ͳ͍ ָ͍ͨ͠ϑϩϯτΤϯ υΤϯδχΞͷօ༷
4. ࠓ೔࿩͞ͳ͍͜ͱ • HTTP/1.1΍HTTP/2ͷৄࡉ • αʔόͷ࿩
5. HTTP/1.1ͷ໰୊఺ • 1ͭͷϦΫΤετ͕׬ྃ͢Δ·Ͱ࣍ͷϦΫΤετ͸ߦ͑ͳ͍ • ଟॏԽ͢Δ͜ͱͰ1υϝΠϯ΁ͷෳ਺઀ଓՄೳ • ಉ࣌઀ଓ਺͸ݶΒΕ͍ͯΔ • Chromeͷ৔߹6ͭ·Ͱ͔͠ಉ࣌઀ଓͰ͖ͳ͍ https://codezine.jp/article/detail/8663
6. HTTP/1.1ͷ໰୊఺ • HTTPύΠϓϥΠϯ • લճͷϦΫΤετΛ଴ͨͣʹ࣍ͷϦΫΤετΛૹ৴Մೳ • αʔόʔ͸ϦΫΤετͷॱ൪௨ΓʹϨεϙϯεΛฦ͞ͳ͚Ε͹ͳΒͳ͍ • ઌ಄ͷϦΫΤετʹ͕͔͔࣌ؒͬͨ৔߹ɺޙଓͷϨεϙϯε͸ϒϩοΫ ͞ΕΔ https://codezine.jp/article/detail/8663
7. HTTP/1.1ͷ໰୊఺ • ߴ଎ͳWeb͕ٻΊΒΕΔݱ୅ • ϦΫΤετ਺ΛݮΒ͍ͨ͠ • CSSεϓϥΠτɺJSϑΝΠϧͷόϯυϧͳͲͰ ରԠ͍ͯ͠Δ͕ਏ͍ • όϯυϧͨ͠ϑΝΠϧͷେ͖͕͞໰୊ʹͳΔ͜ ͱ΋
8. HTTP/2
9. HTTP/2ͱ͸ • HTTP/1.1ͷϨΠςϯγΛղܾ͢ΔͨΊͷ৽͠ ͍ϓϩτίϧ • HTTP/1.1͔Β16೥ͿΓͷΞοϓσʔτ • 2015೥ʹ͸RFCԽࡁΈ(RFC7540) • ΄΅͢΂ͯͷϒϥ΢β͕ରԠ(IE11΋!)
10. HTTP/2ͷओͳػೳ • ετϦʔϜͷଟॏԽ • ετϦʔϜͷ༏ઌ౓ • ϑϩʔ੍ޚ • ϔομѹॖ(HPACK) • αʔόϓογϡ
11. HTTP/2ͷओͳػೳ • ετϦʔϜͷଟॏԽ • ετϦʔϜͷ༏ઌ౓ • ϑϩʔ੍ޚ • ϔομѹॖ(HPACK) • αʔόϓογϡ
12. αʔόϓογϡͱ͸ • Ϧιʔεऔಘʹ1RTT(ϦΫΤετ+Ϩεϙϯε)Λඞཁͱ͠ͳ͍ • ࠷ॳͷϦΫΤετΛड͚औͬͨαʔό͕࣍ͷϦΫΤετΛ༧ ଌͯ͠ΫϥΠΞϯτʹpush͢Δ )5.-ͷϦΫΤετʹର ͯ͠$44ͱը૾Λಉ࣌ʹ ഑৴͍ͯ͠Δ https://giuseppeciotta.net/getting-to-know-http20-with-the-mosaic-demo.html
13. αʔόΛ৮Βͳ͚Ε͹͍͚ͳ͍ͷͰ͠ΐɾɾɾ
14. ϑϩϯτΤϯυ ΤϯδχΞͷͨΊͷ Server Pushೖ໳ Masashi Hirano (@shisama)
15. ϑϩϯτΤϯυ ΤϯδχΞͷͨΊͷ Server Pushೖ໳ Masashi Hirano (@shisama) αʔόͷ࿩͸͠·ͤΜʂʂ
16. Netlify
17. Netlifyͱ͸ • ߴػೳϗεςΟϯάαʔϏε • ϏϧυɾσϓϩΠɾϗεςΟϯάΛ͢΂ͯߦ͑Δ • GitHubʹ͋ΔϦϙδτϦΛͦͷ··ϗεςΟϯ άͰ͖Δɻpush͢ΔͨͼʹࣗಈσϓϩΠ • HTTPSɺHTTP/2͕ແྉͰ؆୯ʹ࢖͑Δ
18. https://www.netlify.com/blog/2017/07/18/http/2-server-push-on-netlify/
19. NetlifyͰαʔόϓογϡ • σϓϩΠ͢ΔσΟϨΫτϦʹ_headersͱ͍͏ ϑΝΠϧΛஔ͚ͩ͘ • _headersʹͲͷϦιʔεΛpush͢Δͷ͔ॻ͘
20. NetlifyͰαʔόϓογϡ . !"" public # !"" _headers # !"" my-app.js # !"" index.html # %"" style.css %"" src !"" my-app.js !"" index.html %"" style.css QVCMJDΛσϓϩΠ͢Δ৔߹ɺ
    QVCMJD௚Լʹ@IFBEFSTΛஔ͘
21. _headersϑΝΠϧ /server-push-path Link: </my-app.js>; rel=preload; as=script Link: </style.css>; rel=preload; as=style ϦΫΤετͷύε
    
    
    -JOL
    QVTI͍ͨ͠Ϧιʔεͷύε
    SFMQSFMPBE
    BTϦιʔεͷछྨ
22. Ϩεϙϯεϔομʔ ϦΫΤετͨ͠IUNMͷϨεϙϯεϔομʔ ʹMJOL͕௥Ճ͞ΕΔ
23. HTTP1.1ͱHTTP/2 ൺֱ $ISPNFͷ৔߹ɺ)551ͩͱ
    1SPUPDPM͕IʹͳΔ
24. HTTP1.1ͱHTTP/2 ൺֱ *OJUJBUPS͕1VTI0UIFSʹͳ͍ͬͯͯαʔ όϓογϡ͞Ε͍ͯΔ͜ͱ͕Θ͔Δ
25. αʔόϓογϡ͕ෆཁʹͳͬͨΒ /server-push-path Link: </my-app.js>; rel=preload; as=script nopush Link: </style.css>; rel=preload; as=style OPQVTIΛ෇͚Δ
27. firebaseͱ͸ • GoogleͷϞόΠϧϓϥοτϑΥʔϜ • Realtime DatabaseɺCloud Functionɺ Crashlytics etc • ϗεςΟϯάαʔϏε΋͋Δ • ແྉͰHTTPS΍HTTP/2͕࢖͑Δ
28. firebaseͰαʔόϓογϡ . !"" firebase.json !"" public # !"" img1.png # !"" index.html # %"" style.css %"" src !"" img1.png !"" index.html %"" style.css pSFCBTFKTPOΛஔ͘
29. 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" }] } ] } }
30. ·ͱΊ • HTTP/2αʔόϓογϡͰϦΫΤετ਺ΛݮΒ ͠ϖʔδϩʔυΛߴ଎Խ • ߴػೳϗεςΟϯάαʔϏεΛ࢖͏͜ͱͰ HTTP/2΍αʔόϓογϡ͸؆୯ʹ࢖͑Δ
31. એ఻
32. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠