Firebase Hosting & HTTP2 Server Push

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

HTTP/2

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

FirebaseͷαʔϏε

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Deploy Request Server Push

Slide 15

Slide 15 text

@angular/cli + ﬁrebase-tools for Server Push

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

$ ﬁrebase init

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

$ 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Λ࣮ߦ

Slide 22

Slide 22 text

https://my-angular-app-d2e19.ﬁrebaseapp.com/

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Deploy Request Server Push

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

ﬁrebase.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Λ௥Ճ

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

devTools Network Server Pushͳ͠ Server Push͋Γ

Slide 30

Slide 30 text

࣮͸ Ͱ΋Ͱ͖·͢ʂ

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Thanks