#ng_kyoto Angular Meetup #8(https://ng-kyoto.connpass.com/event/100685/) でFirebase HostingでHTTP/2 Server Pushができることを紹介しました
HostingͰHTTP/2 Server Push#ng_kyoto Angular Meetup #8 Masashi Hirano (@shisama)
View Slide
About:Name: ฏণ࢜ʗMasashi HiranoWorks: Weblio,IncTwitter: @shisama_GitHub: shisamaAngular: 1.5Ҏ֎Βͳ͍ɾɾɾmore info: npx shisama
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
Firebaseͱ• Google͕ఏڙ͢ΔBaaS• Realtime DatabaseɺCloud FunctionɺCrashlytics ͳͲ
FirebaseͷαʔϏε
Firebase Hostingͱ• HTMLɺCSSɺJavaScriptͳͲ੩తίϯςϯπͷϗεςΟϯάαʔϏε• ίϚϯυ͚ͩͰ੩తͳαΠτΛdeployͰ͖Δ• ಉ͡Α͏ͳͷʹNetlifyͳͲ͕͋Δ
DeployRequestServer Push
@angular/cli + firebase-toolsforServer 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.jsonpSFCBTFJOJUͰੜ͞ΕͨઃఆϑΝΠϧ
firebase.json{"hosting": {"public": “dist/my-angular-app“,"ignore": ["firebase.json",“**/.*","**/node_modules/**"]}}σϓϩΠ͢ΔσΟϨΫτϦΛࢦఆσϓϩΠ࣌ʹແࢹ͢ΔϑΝΠϧΛࢦఆ
$ firebase deploy=== Deploying to 'my-angular-app-d2e19'...i deploying hostingi 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 completei hosting[my-angular-app-d2e19]: finalizing version...✔ hosting[my-angular-app-d2e19]: version finalizedi 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/overviewHosting URL: https://my-angular-app-d2e19.firebaseapp.comFirebaseʹσϓϩΠpSFCBTFEFQMPZΛ࣮ߦ
https://my-angular-app-d2e19.firebaseapp.com/
Network'JSFCBTFIPTUJOH)551ଓ)5.- Ұ൪্ͷϨεϙϯε͕ฦ͔ͬͯΒଞͷϑΝΠϧ $44ɺ+4ΛϦΫΤετ˙Ϩεϙϯεͪ࣌ؒΛද͍ͯ͠Δ
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 NetworkServer 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/2Server PushͰ͖Δ
Thanks