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

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Λ෇͚Δ
26. None

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠