Firebase Hosting & HTTP2 Server Push

#ng_kyoto Angular Meetup #8(https://ng-kyoto.connpass.com/event/100685/) でFirebase HostingでHTTP/2 Server Pushができることを紹介しました

Transcript

1. HostingͰ HTTP/2 Server Push #ng_kyoto Angular Meetup #8
 Masashi Hirano (@shisama)
2. About: Name: ฏ໺ণ࢜ʗMasashi Hirano Works: Weblio,Inc Twitter: @shisama_ GitHub: shisama Angular: 1.5Ҏ֎͸஌Βͳ͍ɾɾɾ more info: npx shisama
5. Agenda • HTTP/2 Server Push • Firebase Hosting • @angular/cli + firebase-tools for Server Push
6. HTTP/2
7. HTTP/2ͱ͸ • HTTP/1.1ͷϨΠςϯγΛղܾ͢ΔͨΊͷ৽͠ ͍ϓϩτίϧ • HTTP/1.1͔Β16೥ͿΓͷΞοϓσʔτ • 2015೥ʹ͸RFCԽࡁΈ(RFC7540) • ΄΅͢΂ͯͷϒϥ΢β͕ରԠ(IE11΋!)
8. HTTP/2ͷओͳػೳ • ετϦʔϜͷଟॏԽ • ετϦʔϜͷ༏ઌ౓ • ϑϩʔ੍ޚ • ϔομѹॖ(HPACK) • αʔόϓογϡ
9. αʔόϓογϡͱ͸ ඞཁͳϑΝΠϧΛ̍ϦΫ ΤετͰऔಘ͠ɺϖʔδ ϩʔυ࣌ؒΛ୹͘ https://giuseppeciotta.net/getting-to-know-http20-with-the-mosaic-demo.html
11. Firebaseͱ͸ • Google͕ఏڙ͢ΔBaaS • Realtime DatabaseɺCloud Functionɺ Crashlytics ͳͲ
12. FirebaseͷαʔϏε
13. Firebase Hostingͱ͸ • HTMLɺCSSɺJavaScriptͳͲ੩తίϯςϯπ ͷϗεςΟϯάαʔϏε • ίϚϯυ͚ͩͰ੩తͳαΠτΛdeployͰ͖Δ • ಉ͡Α͏ͳ΋ͷʹNetlifyͳͲ͕͋Δ
14. Deploy Request Server Push
15. @angular/cli + firebase-tools for Server Push
16. @angular/cliɺfirebase-tools • @angular/cli • AngularΞϓϦέʔγϣϯͷ਽ܗδΣωϨʔ λʔ • firebase-tools • firebaseΛCLIͰૢ࡞͢ΔͨΊͷπʔϧ
17. 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ͷઃఆॳظԽ
18. $ firebase init
19. σΟϨΫτϦߏ੒ my-angular-app !"" README.md !"" angular.json !"" e2e !"" firebase.json !"" package-lock.json !"" package.json !"" src !"" tsconfig.json #"" tslint.json pSFCBTF
    JOJUͰੜ੒͞ΕͨઃఆϑΝΠϧ
20. firebase.json { "hosting": { "public": “dist/my-angular-app“, "ignore": [ "firebase.json", “**/.*", "**/node_modules/**" ] } } σϓϩΠ͢ΔσΟϨΫτϦ Λࢦఆ σϓϩΠ࣌ʹແࢹ͢ΔϑΝΠϧΛࢦఆ
21. $ 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Λ࣮ߦ
22. https://my-angular-app-d2e19.firebaseapp.com/
23. Network 'JSFCBTF
    IPTUJOH͸
    )551઀ଓ )5.- Ұ൪্ ͷϨεϙϯε͕ฦ͔ͬͯΒ
    ଞͷϑΝΠϧ $44ɺ+4 ΛϦΫΤετ
    ˙͸Ϩεϙϯε଴ͪ࣌ؒΛද͍ͯ͠Δ
24. Deploy Request Server Push
25. Server Push͢ΔͨΊʹ • headersΛfirebase.jsonʹ௥Ճ • ೚ҙͷϨεϙϯεϔομʔΛ௥ՃͰ͖Δ • LinkϔομʔΛ௥Ճ • key: “Link” • value: <Push͍ͨ͠ϑΝΠϧͷύε>;rel=preload;as=script • e.g. </main.js>;rel=preload;as=script
26. firebase.json { "hosting": { "headers": [ { "source": "/", "headers": [{ "key": “Link", "value": "</main.js>;rel=preload;as=script,</ runtime.js>;rel=preload;as=script,</ polyfills.js>;rel=preload;as=script,</ styles.css>;rel=preload;as=style" }] } ] } } IFBEFSTΛ௥Ճ
27. Network )5.-Ҏ֎͸Ϩεϙϯε࣌ؒ˙͕ແ͍
    ˙͸3FBEJOH
    1VTI࣌ؒ $44ɺ+4ͷ*OJUJBUPS͕
    1VTI
    
    0UIFSʹมΘͬͨ
28. Network Ϩεϙϯεϔομʔʹ௥Ճ͞ΕΔ
29. devTools Network Server Pushͳ͠ Server Push͋Γ
30. ࣮͸ Ͱ΋Ͱ͖·͢ʂ
31. https://www.netlify.com/blog/2017/07/18/http/2-server-push-on-netlify/
32. /FUMJGZͷํ͸ଞͰ
    ൃදͨ͠ͷͰͬͪ͜Λݟͯ ΄͍͠ʂ
33. ·ͱΊ • HTTP/2 Server PushͰϦΫΤετ਺ΛݮΒ͠ ϖʔδϩʔυΛߴ଎Խ • Firebase HostingΛ࢖͑͹؆୯ʹHTTP/2 Server PushͰ͖Δ
34. Thanks