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

5cf7e9533a457726cd51232e06c1da9a?s=128

Masashi Hirano

June 07, 2018
Tweet

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

    ϦΫΤετͷύε -JOLQVTI͍ͨ͠ϦιʔεͷύεSFMQSFMPBEBTϦιʔεͷछྨ
  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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠