JAM plus #1 でNetlifyでHTTP/2サーバプッシュするLTしました https://kfug.connpass.com/event/87799/
ϑϩϯτΤϯυΤϯδχΞͷͨΊͷServer PushೖJAM plus #1 Masashi Hirano (@shisama)
View Slide
{"about": {"name": "Masashi Hirano","works": "Weblio, Inc.","twitter": "@shisama_","github": "shisama"}}
λʔήοτ• ૣ͍WebΛఏڙ͍ͨ͠ਓ• αʔόઃఆͨ͘͠ͳ͍ ָ͍ͨ͠ϑϩϯτΤϯυΤϯδχΞͷօ༷
ࠓ͞ͳ͍͜ͱ• HTTP/1.1HTTP/2ͷৄࡉ• αʔόͷ
HTTP/1.1ͷ• 1ͭͷϦΫΤετ͕ྃ͢Δ·Ͱ࣍ͷϦΫΤετߦ͑ͳ͍• ଟॏԽ͢Δ͜ͱͰ1υϝΠϯͷෳଓՄೳ• ಉ࣌ଓݶΒΕ͍ͯΔ• Chromeͷ߹6ͭ·Ͱ͔͠ಉ࣌ଓͰ͖ͳ͍https://codezine.jp/article/detail/8663
HTTP/1.1ͷ• HTTPύΠϓϥΠϯ• લճͷϦΫΤετΛͨͣʹ࣍ͷϦΫΤετΛૹ৴Մೳ• αʔόʔϦΫΤετͷॱ൪௨ΓʹϨεϙϯεΛฦ͞ͳ͚ΕͳΒͳ͍• ઌ಄ͷϦΫΤετʹ͕͔͔࣌ؒͬͨ߹ɺޙଓͷϨεϙϯεϒϩοΫ͞ΕΔhttps://codezine.jp/article/detail/8663
HTTP/1.1ͷ• ߴͳWeb͕ٻΊΒΕΔݱ• ϦΫΤετΛݮΒ͍ͨ͠• CSSεϓϥΠτɺJSϑΝΠϧͷόϯυϧͳͲͰରԠ͍ͯ͠Δ͕ਏ͍• όϯυϧͨ͠ϑΝΠϧͷେ͖͕͞ʹͳΔ͜ͱ
HTTP/2
HTTP/2ͱ• HTTP/1.1ͷϨΠςϯγΛղܾ͢ΔͨΊͷ৽͍͠ϓϩτίϧ• HTTP/1.1͔Β16ͿΓͷΞοϓσʔτ• 2015ʹRFCԽࡁΈ(RFC7540)• ΄΅ͯ͢ͷϒϥβ͕ରԠ(IE11!)
HTTP/2ͷओͳػೳ• ετϦʔϜͷଟॏԽ• ετϦʔϜͷ༏ઌ• ϑϩʔ੍ޚ• ϔομѹॖ(HPACK)• αʔόϓογϡ
αʔόϓογϡͱ• Ϧιʔεऔಘʹ1RTT(ϦΫΤετ+Ϩεϙϯε)Λඞཁͱ͠ͳ͍• ࠷ॳͷϦΫΤετΛड͚औͬͨαʔό͕࣍ͷϦΫΤετΛ༧ଌͯ͠ΫϥΠΞϯτʹpush͢Δ)5.-ͷϦΫΤετʹରͯ͠$44ͱը૾Λಉ࣌ʹ৴͍ͯ͠Δhttps://giuseppeciotta.net/getting-to-know-http20-with-the-mosaic-demo.html
αʔόΛ৮Βͳ͚Ε͍͚ͳ͍ͷͰ͠ΐɾɾɾ
ϑϩϯτΤϯυΤϯδχΞͷͨΊͷServer PushೖMasashi Hirano (@shisama)
ϑϩϯτΤϯυΤϯδχΞͷͨΊͷServer PushೖMasashi Hirano (@shisama)αʔόͷ͠·ͤΜʂʂ
Netlify
Netlifyͱ• ߴػೳϗεςΟϯάαʔϏε• ϏϧυɾσϓϩΠɾϗεςΟϯάΛͯ͢ߦ͑Δ• GitHubʹ͋ΔϦϙδτϦΛͦͷ··ϗεςΟϯάͰ͖Δɻpush͢ΔͨͼʹࣗಈσϓϩΠ• HTTPSɺHTTP/2͕ແྉͰ؆୯ʹ͑Δ
https://www.netlify.com/blog/2017/07/18/http/2-server-push-on-netlify/
NetlifyͰαʔόϓογϡ• σϓϩΠ͢ΔσΟϨΫτϦʹ_headersͱ͍͏ϑΝΠϧΛஔ͚ͩ͘• _headersʹͲͷϦιʔεΛpush͢Δͷ͔ॻ͘
NetlifyͰαʔόϓογϡ.!"" public# !"" _headers# !"" my-app.js# !"" index.html# %"" style.css%"" src!"" my-app.js!"" index.html%"" style.cssQVCMJDΛσϓϩΠ͢Δ߹ɺQVCMJDԼʹ@IFBEFSTΛஔ͘
_headersϑΝΠϧ/server-push-pathLink: ; rel=preload; as=scriptLink: ; rel=preload; as=styleϦΫΤετͷύε-JOLQVTI͍ͨ͠ϦιʔεͷύεSFMQSFMPBEBTϦιʔεͷछྨ
ϨεϙϯεϔομʔϦΫΤετͨ͠IUNMͷϨεϙϯεϔομʔʹMJOL͕Ճ͞ΕΔ
HTTP1.1ͱHTTP/2 ൺֱ$ISPNFͷ߹ɺ)551ͩͱ1SPUPDPM͕IʹͳΔ
HTTP1.1ͱHTTP/2 ൺֱ*OJUJBUPS͕1VTI0UIFSʹͳ͍ͬͯͯαʔόϓογϡ͞Ε͍ͯΔ͜ͱ͕Θ͔Δ
αʔόϓογϡ͕ෆཁʹͳͬͨΒ/server-push-pathLink: ; rel=preload; as=script nopushLink: ; rel=preload; as=styleOPQVTIΛ͚Δ
firebaseͱ• GoogleͷϞόΠϧϓϥοτϑΥʔϜ• Realtime DatabaseɺCloud FunctionɺCrashlytics etc• ϗεςΟϯάαʔϏε͋Δ• ແྉͰHTTPSHTTP/2͕͑Δ
firebaseͰαʔόϓογϡ.!"" firebase.json!"" public# !"" img1.png# !"" index.html# %"" style.css%"" src!"" img1.png!"" index.html%"" style.csspSFCBTFKTPOΛஔ͘
firebase.json{"hosting": {"public": "public","headers": [{"source": "/","headers": [{"key": "Link","value": ";rel=preload;as=script,style.css>;rel=preload;as=style"}]}]}}
·ͱΊ• HTTP/2αʔόϓογϡͰϦΫΤετΛݮΒ͠ϖʔδϩʔυΛߴԽ• ߴػೳϗεςΟϯάαʔϏεΛ͏͜ͱͰHTTP/2αʔόϓογϡ؆୯ʹ͑Δ
એ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠