フロントエンドエンジニアのための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)
   

   View Slide

2. {
   "about": {
   "name": "Masashi Hirano",
   "works": "Weblio, Inc.",
   "twitter": "@shisama_",
   "github": "shisama"
   }
   }
   

   View Slide

3. λʔήοτ
   • ૣ͍WebΛఏڙ͍ͨ͠ਓ
   • αʔόઃఆͨ͘͠ͳ͍ ָ͍ͨ͠ϑϩϯτΤϯ
   υΤϯδχΞͷօ༷
   

   View Slide

4. ࠓ೔࿩͞ͳ͍͜ͱ
   • HTTP/1.1΍HTTP/2ͷৄࡉ
   • αʔόͷ࿩
   

   View Slide

5. HTTP/1.1ͷ໰୊఺
   • 1ͭͷϦΫΤετ͕׬ྃ͢Δ·Ͱ࣍ͷϦΫΤετ͸ߦ͑ͳ͍
   • ଟॏԽ͢Δ͜ͱͰ1υϝΠϯ΁ͷෳ਺઀ଓՄೳ
   • ಉ࣌઀ଓ਺͸ݶΒΕ͍ͯΔ
   • Chromeͷ৔߹6ͭ·Ͱ͔͠ಉ࣌઀ଓͰ͖ͳ͍
   https://codezine.jp/article/detail/8663
   

   View Slide

6. HTTP/1.1ͷ໰୊఺
   • HTTPύΠϓϥΠϯ
   • લճͷϦΫΤετΛ଴ͨͣʹ࣍ͷϦΫΤετΛૹ৴Մೳ
   • αʔόʔ͸ϦΫΤετͷॱ൪௨ΓʹϨεϙϯεΛฦ͞ͳ͚Ε͹ͳΒͳ͍
   • ઌ಄ͷϦΫΤετʹ͕͔͔࣌ؒͬͨ৔߹ɺޙଓͷϨεϙϯε͸ϒϩοΫ
   ͞ΕΔ
   https://codezine.jp/article/detail/8663
   

   View Slide

7. HTTP/1.1ͷ໰୊఺
   • ߴ଎ͳWeb͕ٻΊΒΕΔݱ୅
   • ϦΫΤετ਺ΛݮΒ͍ͨ͠
   • CSSεϓϥΠτɺJSϑΝΠϧͷόϯυϧͳͲͰ
   ରԠ͍ͯ͠Δ͕ਏ͍
   • όϯυϧͨ͠ϑΝΠϧͷେ͖͕͞໰୊ʹͳΔ͜
   ͱ΋
   

   View Slide

8. HTTP/2
   

   View Slide

9. HTTP/2ͱ͸
   • HTTP/1.1ͷϨΠςϯγΛղܾ͢ΔͨΊͷ৽͠
   ͍ϓϩτίϧ
   • HTTP/1.1͔Β16೥ͿΓͷΞοϓσʔτ
   • 2015೥ʹ͸RFCԽࡁΈ(RFC7540)
   • ΄΅͢΂ͯͷϒϥ΢β͕ରԠ(IE11΋!)
   

   View Slide

10. HTTP/2ͷओͳػೳ
    • ετϦʔϜͷଟॏԽ
    • ετϦʔϜͷ༏ઌ౓
    • ϑϩʔ੍ޚ
    • ϔομѹॖ(HPACK)
    • αʔόϓογϡ
    

    View Slide

11. HTTP/2ͷओͳػೳ
    • ετϦʔϜͷଟॏԽ
    • ετϦʔϜͷ༏ઌ౓
    • ϑϩʔ੍ޚ
    • ϔομѹॖ(HPACK)
    • αʔόϓογϡ
    

    View Slide

12. αʔόϓογϡͱ͸
    • Ϧιʔεऔಘʹ1RTT(ϦΫΤετ+Ϩεϙϯε)Λඞཁͱ͠ͳ͍
    • ࠷ॳͷϦΫΤετΛड͚औͬͨαʔό͕࣍ͷϦΫΤετΛ༧
    ଌͯ͠ΫϥΠΞϯτʹpush͢Δ
    )5.-ͷϦΫΤετʹର
    ͯ͠$44ͱը૾Λಉ࣌ʹ
    ഑৴͍ͯ͠Δ
    https://giuseppeciotta.net/getting-to-know-http20-with-the-mosaic-demo.html
    

    View Slide

13. αʔόΛ৮Βͳ͚Ε͹͍͚ͳ͍ͷͰ͠ΐɾɾɾ
    

    View Slide

14. ϑϩϯτΤϯυ
    ΤϯδχΞͷͨΊͷ
    Server Pushೖ໳
    Masashi Hirano (@shisama)
    

    View Slide

15. ϑϩϯτΤϯυ
    ΤϯδχΞͷͨΊͷ
    Server Pushೖ໳
    Masashi Hirano (@shisama)
    αʔόͷ࿩͸͠·ͤΜʂʂ
    

    View Slide

16. Netlify
    

    View Slide

17. Netlifyͱ͸
    • ߴػೳϗεςΟϯάαʔϏε
    • ϏϧυɾσϓϩΠɾϗεςΟϯάΛ͢΂ͯߦ͑Δ
    • GitHubʹ͋ΔϦϙδτϦΛͦͷ··ϗεςΟϯ
    άͰ͖Δɻpush͢ΔͨͼʹࣗಈσϓϩΠ
    • HTTPSɺHTTP/2͕ແྉͰ؆୯ʹ࢖͑Δ
    

    View Slide

18. https://www.netlify.com/blog/2017/07/18/http/2-server-push-on-netlify/
    

    View Slide

19. NetlifyͰαʔόϓογϡ
    • σϓϩΠ͢ΔσΟϨΫτϦʹ_headersͱ͍͏
    ϑΝΠϧΛஔ͚ͩ͘
    • _headersʹͲͷϦιʔεΛpush͢Δͷ͔ॻ͘
    

    View Slide

20. NetlifyͰαʔόϓογϡ
    .
    !"" public
    # !"" _headers
    # !"" my-app.js
    # !"" index.html
    # %"" style.css
    %"" src
    !"" my-app.js
    !"" index.html
    %"" style.css
    QVCMJDΛσϓϩΠ͢Δ৔߹ɺ
    QVCMJD௚Լʹ@IFBEFSTΛஔ͘
    

    View Slide

21. _headersϑΝΠϧ
    /server-push-path
    Link: ; rel=preload; as=script
    Link: ; rel=preload; as=style
    ϦΫΤετͷύε
    -JOLQVTI͍ͨ͠ϦιʔεͷύεSFMQSFMPBEBTϦιʔεͷछྨ
    

    View Slide

22. Ϩεϙϯεϔομʔ
    ϦΫΤετͨ͠IUNMͷϨεϙϯεϔομʔ
    ʹMJOL͕௥Ճ͞ΕΔ
    

    View Slide

23. HTTP1.1ͱHTTP/2 ൺֱ
    $ISPNFͷ৔߹ɺ)551ͩͱ
    1SPUPDPM͕IʹͳΔ
    

    View Slide

24. HTTP1.1ͱHTTP/2 ൺֱ
    *OJUJBUPS͕1VTI0UIFSʹͳ͍ͬͯͯαʔ
    όϓογϡ͞Ε͍ͯΔ͜ͱ͕Θ͔Δ
    

    View Slide

25. αʔόϓογϡ͕ෆཁʹͳͬͨΒ
    /server-push-path
    Link: ; rel=preload; as=script nopush
    Link: ; rel=preload; as=style
    OPQVTIΛ෇͚Δ
    

    View Slide

26. View Slide

27. firebaseͱ͸
    • GoogleͷϞόΠϧϓϥοτϑΥʔϜ
    • Realtime DatabaseɺCloud Functionɺ
    Crashlytics etc
    • ϗεςΟϯάαʔϏε΋͋Δ
    • ແྉͰHTTPS΍HTTP/2͕࢖͑Δ
    

    View Slide

28. firebaseͰαʔόϓογϡ
    .
    !"" firebase.json
    !"" public
    # !"" img1.png
    # !"" index.html
    # %"" style.css
    %"" src
    !"" img1.png
    !"" index.html
    %"" style.css
    pSFCBTFKTPOΛஔ͘
    

    View Slide

29. firebase.json
    {
    "hosting": {
    "public": "public",
    "headers": [
    {
    "source": "/",
    "headers": [{
    "key": "Link",
    "value": ";rel=preload;as=script,
    style.css>;rel=preload;as=style"
    }]
    }
    ]
    }
    }
    

    View Slide

30. ·ͱΊ
    • HTTP/2αʔόϓογϡͰϦΫΤετ਺ΛݮΒ
    ͠ϖʔδϩʔυΛߴ଎Խ
    • ߴػೳϗεςΟϯάαʔϏεΛ࢖͏͜ͱͰ
    HTTP/2΍αʔόϓογϡ͸؆୯ʹ࢖͑Δ
    

    View Slide

31. એ఻
    

    View Slide

32. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide