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 Slide



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

    View Slide

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


    View Slide

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


    View Slide



  5. ͜Ε͕2016೥຤

    View Slide



  6. ― 1೥ޙ ―

    View Slide

  7. dev.to͕࿩୊ʹ


    View Slide



  8. • Service Worker
    • CDN

    View Slide



  9. • Service Worker
    • CDN

    View Slide



  10. ࠓճͷߏ੒

    View Slide



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

    View Slide

  12. chatstory.pixiv.net


    View Slide



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

    View Slide



  14. ͯͯ͞͞

    View Slide



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

    View Slide



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

    View Slide



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

    View Slide



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

    View Slide



  19. HerokuΛCDNͰΩϟογϡ

    View Slide



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

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

    View Slide



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

    View Slide



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

    View Slide



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

    View Slide



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

    View Slide



  25. CloudFrontͷΩϟογϡ࡟আ

    View Slide



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

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

    View Slide



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

    View Slide



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

    View Slide



  29. Ωϟογϡࣄނ๷ࢭ

    View Slide



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

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

    View Slide



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

    View Slide



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

    View Slide



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

    View Slide



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

    View Slide



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

    View Slide



  36. ࠓճͷ೉ॴ

    View Slide



  37. PreflightϦΫΤετ

    View Slide



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

    View Slide

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


    View Slide



  40. ͜ΕͰര଎ʂʂ

    View Slide



  41. ·ͱΊ

    View Slide



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

    View Slide



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

    View Slide