Firebase Hosting & HTTP2 Server Push

Firebase Hosting & HTTP2 Server Push

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

5cf7e9533a457726cd51232e06c1da9a?s=128

Masashi Hirano

October 06, 2018
Tweet

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
  3. None
  4. None
  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

  10. None
  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 pSFCBTFJOJUͰੜ੒͞ΕͨઃఆϑΝΠϧ
  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ʹσϓϩΠ pSFCBTFEFQMPZΛ࣮ߦ
  22. https://my-angular-app-d2e19.firebaseapp.com/

  23. Network 'JSFCBTFIPTUJOH͸ )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.-Ҏ֎͸Ϩεϙϯε࣌ؒ˙͕ແ͍ ˙͸3FBEJOH1VTI࣌ؒ $44ɺ+4ͷ*OJUJBUPS͕ 1VTI0UIFSʹมΘͬͨ

  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