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 pSFCBTFJOJUͰੜ੒͞ΕͨઃఆϑΝΠϧ

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ʹσϓϩΠ pSFCBTFEFQMPZΛ࣮ߦ

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

Network 'JSFCBTFIPTUJOH͸ )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, runtime.js>;rel=preload;as=script, polyfills.js>;rel=preload;as=script, styles.css>;rel=preload;as=style" }] } ] } } IFBEFSTΛ௥Ճ

Network )5.-Ҏ֎͸Ϩεϙϯε࣌ؒ˙͕ແ͍ ˙͸3FBEJOH1VTI࣌ؒ $44ɺ+4ͷ*OJUJBUPS͕ 1VTI0UIFSʹมΘͬͨ

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