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

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

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

More Decks by Masashi Hirano

Other Decks in Programming

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