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

フルCDNアーキテクチャでサービス設計した話

Atsushi Takayama
September 22, 2018

 フルCDNアーキテクチャでサービス設計した話

FUKUOKA Engineers Day 2018 ~Autumn~ で話した内容です。

Atsushi Takayama

September 22, 2018
Tweet

More Decks by Atsushi Takayama

Other Decks in Technology

Transcript

  1. ϑϧCDNΞʔΩςΫνϟͰ

    αʔϏεઃܭͨ͠࿩


    Fukuoka Engineers Day

    pixiv.inc
    Atsushi Takayama

    View full-size slide



  2. • ߴࢁ / @edvakf
    • ϐΫγϒגࣜձࣾCTO ݉ ෱ԬΦϑΟεϚωʔδϟʔ
    • JavaScript, Ruby, Go, Scala

    View full-size slide

  3. ʮϑϧCDNΞʔΩςΫνϟʯ


    View full-size slide

  4. ʮϑϧCDNΞʔΩςΫνϟʯ


    View full-size slide



  5. ͜Ε͕2016೥຤

    View full-size slide



  6. ― 1೥ޙ ―

    View full-size slide

  7. dev.to͕࿩୊ʹ


    View full-size slide



  8. • Service Worker
    • CDN

    View full-size slide



  9. • Service Worker
    • CDN

    View full-size slide



  10. ࠓճͷߏ੒

    View full-size slide



  11. • iOS: Swift
    • Web (PWA): Ionic 3, TypeScript, Firebase
    • API: Rails, Heroku, CloudFront

    View full-size slide

  12. chatstory.pixiv.net


    View full-size slide



  13. • ϑϩϯτΤϯυ͸Firebaseʹϗετ͍ͯ͠ΔͷͰɺ
    FirebaseʹσϑΥϧτͰ͍͍ͭͯΔCDNΛ׆༻
    • firebase.jsonͰCache-Control΍LinkϔομʔΛઃఆ

    View full-size slide



  14. ΩϟογϡΛߟ͑Δ্Ͱେࣄͳ͜ͱ

    View full-size slide



  15. • ͦ΋ͦ΋Ωϟογϡ͢Δඞཁ͕͋Δͷ͔
    • Ωϟογϡͷ༗ޮظݶ
    • Ωϟογϡͷ࡟আ
    • Ωϟογϡͯ͠͸͍͚ͳ͍΋ͷΛΩϟογϡ͠ͳ͍

    View full-size slide



  16. • ͦ΋ͦ΋Ωϟογϡ͢Δඞཁ͕͋Δͷ͔
    • Ωϟογϡͷ༗ޮظݶ
    • Ωϟογϡͷ࡟আ
    • Ωϟογϡͯ͠͸͍͚ͳ͍΋ͷΛΩϟογϡ͠ͳ͍

    View full-size slide



  17. • Ωϟογϡ͸Ұ౓ೖΕͨΒ֎͢ͷ͸͔ͳΓ೉͍͠
    • Ωϟογϡ͢Δͱ͍͏͜ͱ͸ෳࡶ͞Λ૿΍͢͜ͱ
    • →ύϑΥʔϚϯε͕໰୊ʹͳΔՕॴ͚ͩΩϟογϡ

    View full-size slide



  18. HerokuΛCDNͰΩϟογϡ

    View full-size slide



  19. • Heroku͕ԕ͗͢Δ໰୊
    • ϥ΢ϯυτϦοϓ͚ͩͰ100ms
    • ϖʔδͷදࣔʹΫϦςΟΧϧͳϦΫΤετ͸

    CDNͰϢʔβʔͷۙ͘ʹΩϟογϡ͍ͨ͠

    View full-size slide



  20. • ͦ΋ͦ΋Ωϟογϡ͢Δඞཁ͕͋Δͷ͔
    • Ωϟογϡͷ༗ޮظݶ
    • Ωϟογϡͷ࡟আ
    • Ωϟογϡͯ͠͸͍͚ͳ͍΋ͷΛΩϟογϡ͠ͳ͍

    View full-size slide



  21. CDNΩϟογϡͷ༗ޮظݶ

    View full-size slide



  22. Cache-Control: public, max-age=0, s-maxage=3600
    public => CDNͰΩϟογϡͯ͠΋ྑ͍
    max-age => ΫϥΠΞϯτʢϒϥ΢βʣͰΩϟογϡͯ͠΋ྑ͍ظؒ
    s-maxage => ϓϩΩγʢCDNʣͰΩϟογϡͯ͠΋ྑ͍ظؒ
    Cache-Controlϔομʔ

    View full-size slide



  23. • ͦ΋ͦ΋Ωϟογϡ͢Δඞཁ͕͋Δͷ͔
    • Ωϟογϡͷ༗ޮظݶ
    • Ωϟογϡͷ࡟আ
    • Ωϟογϡͯ͠͸͍͚ͳ͍΋ͷΛΩϟογϡ͠ͳ͍

    View full-size slide



  24. CloudFrontͷΩϟογϡ࡟আ

    View full-size slide



  25. • API͕͋Δʢ΋ͪΖΜʣ
    • URLલํҰகͰࢦఆ
    • ैདྷ͸10ʙ15෼͔͔͍ͬͯͨͦ͏͕ͩɺ

    2017೥͔Β͸શମͷ90%ʹ͸5ඵɺ࠷େͰ΋1෼
    • Fastlyͩͱ150msʢʂʣ

    View full-size slide



  26. • ߋ৽ܥͷΞΫγϣϯͰΩϟογϡΛ࡟আ
    • ࠣࡉͳߋ৽͸׶͑ͯແࢹ

    View full-size slide



  27. • ͦ΋ͦ΋Ωϟογϡ͢Δඞཁ͕͋Δͷ͔
    • Ωϟογϡͷ༗ޮظݶ
    • Ωϟογϡͷ࡟আ
    • Ωϟογϡͯ͠͸͍͚ͳ͍΋ͷΛΩϟογϡ͠ͳ͍

    View full-size slide



  28. Ωϟογϡࣄނ๷ࢭ

    View full-size slide



  29. • Cookie΍User-Agent΍IPΞυϨε౳ɺݸผͷϦΫΤε
    τʹґଘ͢Δσʔλ͸Ωϟογϡ͠ͳ͍
    • ͜͜ΛޡΔࣄނ͸ҙ֎ͱଟ্͍ʹɺϓϥΠόγʔ໘
    Ͱେ໰୊ʹͳΔ͜ͱ͕͋Δ
    • ཧ૝తʹ͸Ωϟογϡ૚ΑΓޙΖͰ͸requestΦϒ
    δΣΫτʹ৮Εͳ͘͢Δ

    ʢݱ࣮తʹ͸͜ΕͰ͸μϝͳέʔε΋͋Δʣ

    View full-size slide



  30. • ࠓճ͸ɺcurrent_userΛ࢖͑ΔΞΫγϣϯΛ੍ݶͨ͠
    • Ωϟογϡ͢ΔͳΒcurrent_userΛ࢖͏ͳ
    • current_userΛ࢖͏ͳΒΩϟογϡ͢Δͳ
    • →ϔϧύʔϝιουԽͯ͠ɺকདྷʹ౉Δࣄނ๷ࢭʹ

    View full-size slide



  31. • Ωϟογϡͯ͠ྑ͍APIͱΩϟογϡͯ͠͸͍͚ͳ͍
    APIΛઃܭஈ֊͔Β׬શʹ෼཭
    • ྫɿϢʔβʔAPI͸Ωϟογϡ͍ͨ͠ͷͰɺʮࣗ෼͕
    ͜ͷϢʔβʔΛϑΥϩʔ͍ͯ͠Δ͔ʯ͸ผAPIʹ͢Δ
    • ͜ΕʹΑͬͯϦΫΤετ਺͕૿͑Δͷ͸ڐ༰͢Δ

    View full-size slide



  32. Ͳ͏ͯ͠΋෼ذ͍ͨ͠৔߹͸

    View full-size slide



  33. Vary: Accept, Origin
    AcceptϔομʔͱOriginϔομʔʢϦΫΤετϔομʔʣ͝ͱʹผͷ
    Ωϟογϡʹ͢Δ
    ʢUser-AgentͳͲͱॻ͍ͯ͠·͏ͱΩϟογϡώοτ཰͕Լ͕Γ͗͢Δ
    ͷͰ஫ҙʣ
    Varyϔομʔ

    View full-size slide



  34. ͕ɺCloudFront͸VaryΛແࢹ͢Δ

    View full-size slide



  35. ࠓճͷ೉ॴ

    View full-size slide



  36. PreflightϦΫΤετ

    View full-size slide



  37. Cross Origin Resource Sharing
    (CORS) ʹ͓͍ͯɺ ΧελϜϔο
    μʔ͚ͭͯϦΫΤετ͍ͨ͠৔߹
    ͸ ϒϥ΢β͕PreflightϦΫΤε
    τΛૹΓɺαʔόʔ͕Ԡ౴͢Ε͹
    ຊ౰ͷϦΫΤετΛૹΔ
    ʢࡉ͔͍࢓༷͸ׂѪʣ

    View full-size slide

  38. PreflightΩϟογϡ༻CloudFrontઃఆ


    View full-size slide



  39. ͜ΕͰര଎ʂʂ

    View full-size slide



  40. • HerokuͰ΋CDNͰΩϟογϡ͢Ε͹dev.toฒͷεϐʔ
    υʹͳΔ
    • ؆୯ʹݟ͑Δ͕ɺҰͭҰͭ৻ॏʹ΍Βͳ͍ͱࣄނΔ

    View full-size slide



  41. Ωϟογϯάͷ͝ར༻͸ܭըతʹ̇

    View full-size slide