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)
   

   View Slide

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

   View Slide

3. View Slide

4. View Slide

5. Agenda
   • HTTP/2 Server Push
   • Firebase Hosting
   • @angular/cli + firebase-tools for Server Push
   

   View Slide

6. HTTP/2
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. View Slide

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

    View Slide

12. FirebaseͷαʔϏε
    

    View Slide

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

    View Slide

14. Deploy
    Request
    Server Push
    

    View Slide

15. @angular/cli + firebase-tools
    for
    Server Push
    

    View Slide

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

    View Slide

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ͷઃఆॳظԽ
    

    View Slide

18. $ firebase init
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. Deploy
    Request
    Server Push
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

28. Network
    Ϩεϙϯεϔομʔʹ௥Ճ͞ΕΔ
    

    View Slide

29. devTools Network
    Server Pushͳ͠
    Server Push͋Γ
    

    View Slide

30. ࣮͸ Ͱ΋Ͱ͖·͢ʂ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

34. Thanks
    

    View Slide