Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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ができることを紹介しました

Masashi Hirano

October 06, 2018
Tweet

More Decks by Masashi Hirano

Other Decks in Technology

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