HostingͰ HTTP/2 Server Push #ng_kyoto Angular Meetup #8
 Masashi Hirano (@shisama) 

About: Name: ฏ໺ণ࢜ʗMasashi Hirano Works: Weblio,Inc Twitter: @shisama_ GitHub: shisama Angular: 1.5Ҏ֎͸஌Βͳ͍ɾɾɾ more info: npx shisama 

No content

No content

Agenda • HTTP/2 Server Push • Firebase Hosting • @angular/cli + firebase-tools for Server Push 

HTTP/2 

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

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

αʔόϓογϡͱ͸ ඞཁͳϑΝΠϧΛ̍ϦΫ ΤετͰऔಘ͠ɺϖʔδ ϩʔυ࣌ؒΛ୹͘ https://giuseppeciotta.net/getting-to-know-http20-with-the-mosaic-demo.html 

No content

Firebaseͱ͸ • Google͕ఏڙ͢ΔBaaS • Realtime DatabaseɺCloud Functionɺ Crashlytics ͳͲ 

FirebaseͷαʔϏε 

Firebase Hostingͱ͸ • HTMLɺCSSɺJavaScriptͳͲ੩తίϯςϯπ ͷϗεςΟϯάαʔϏε • ίϚϯυ͚ͩͰ੩తͳαΠτΛdeployͰ͖Δ • ಉ͡Α͏ͳ΋ͷʹNetlifyͳͲ͕͋Δ 

Deploy Request Server Push 

@angular/cli + firebase-tools for Server Push 

@angular/cliɺfirebase-tools • @angular/cli • AngularΞϓϦέʔγϣϯͷ਽ܗδΣωϨʔ λʔ • firebase-tools • firebaseΛCLIͰૢ࡞͢ΔͨΊͷπʔϧ 

Angularͱfirebaseͷ४උ $ npm install -g @angular/cli firebase-tools $ ng new my-angular-app $ cd my-angular-app $ ng build —prod $ firebase init πʔϧͷΠϯετʔϧ "OHVMBSΞϓϦ࡞੒Ϗϧυ pSFCBTFͷઃఆॳظԽ 

$ firebase init 

σΟϨΫτϦߏ੒ my-angular-app !"" README.md !"" angular.json !"" e2e !"" firebase.json !"" package-lock.json !"" package.json !"" src !"" tsconfig.json #"" tslint.json pSFCBTF
JOJUͰੜ੒͞ΕͨઃఆϑΝΠϧ 

firebase.json { "hosting": { "public": “dist/my-angular-app“, "ignore": [ "firebase.json", “**/.*", "**/node_modules/**" ] } } σϓϩΠ͢ΔσΟϨΫτϦ Λࢦఆ σϓϩΠ࣌ʹແࢹ͢ΔϑΝΠϧΛࢦఆ 

$ firebase deploy === Deploying to 'my-angular-app-d2e19'... i deploying hosting i hosting[my-angular-app-d2e19]: beginning deploy... i hosting[my-angular-app-d2e19]: found 8 files in dist/my- angular-app ✔ hosting[my-angular-app-d2e19]: file upload complete i hosting[my-angular-app-d2e19]: finalizing version... ✔ hosting[my-angular-app-d2e19]: version finalized i hosting[my-angular-app-d2e19]: releasing new version... ✔ hosting[my-angular-app-d2e19]: release complete ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/my- angular-app-d2e19/overview Hosting URL: https://my-angular-app-d2e19.firebaseapp.com FirebaseʹσϓϩΠ pSFCBTF
EFQMPZΛ࣮ߦ 

https://my-angular-app-d2e19.firebaseapp.com/ 

Network 'JSFCBTF
IPTUJOH͸
)551઀ଓ )5.- Ұ൪্ ͷϨεϙϯε͕ฦ͔ͬͯΒ
ଞͷϑΝΠϧ $44ɺ+4 ΛϦΫΤετ
˙͸Ϩεϙϯε଴ͪ࣌ؒΛද͍ͯ͠Δ 

Deploy Request Server Push 

Server Push͢ΔͨΊʹ • headersΛfirebase.jsonʹ௥Ճ • ೚ҙͷϨεϙϯεϔομʔΛ௥ՃͰ͖Δ • LinkϔομʔΛ௥Ճ • key: “Link” • value: ;rel=preload;as=script • e.g. ;rel=preload;as=script 

firebase.json { "hosting": { "headers": [ { "source": "/", "headers": [{ "key": “Link", "value": ";rel=preload;as=script,;rel=preload;as=script,;rel=preload;as=script,;rel=preload;as=style" }] } ] } } IFBEFSTΛ௥Ճ 

Network )5.-Ҏ֎͸Ϩεϙϯε࣌ؒ˙͕ແ͍
˙͸3FBEJOH
1VTI࣌ؒ $44ɺ+4ͷ*OJUJBUPS͕
1VTI

0UIFSʹมΘͬͨ 

Network Ϩεϙϯεϔομʔʹ௥Ճ͞ΕΔ 

devTools Network Server Pushͳ͠ Server Push͋Γ 

࣮͸ Ͱ΋Ͱ͖·͢ʂ 

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

/FUMJGZͷํ͸ଞͰ
ൃදͨ͠ͷͰͬͪ͜Λݟͯ ΄͍͠ʂ 

·ͱΊ • HTTP/2 Server PushͰϦΫΤετ਺ΛݮΒ͠ ϖʔδϩʔυΛߴ଎Խ • Firebase HostingΛ࢖͑͹؆୯ʹHTTP/2 Server PushͰ͖Δ 

Thanks