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

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

003f59d1b2e3b864c744f8eb21f68e82?s=47 Atsushi Takayama
September 22, 2018

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

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

003f59d1b2e3b864c744f8eb21f68e82?s=128

Atsushi Takayama

September 22, 2018
Tweet

Transcript

  1. ϑϧCDNΞʔΩςΫνϟͰ
 αʔϏεઃܭͨ͠࿩   Fukuoka Engineers Day  pixiv.inc Atsushi

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

    • JavaScript, Ruby, Go, Scala
  3. ʮϑϧCDNΞʔΩςΫνϟʯ  

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

  5.   ͜Ε͕2016೥຤

  6.   ― 1೥ޙ ―

  7. dev.to͕࿩୊ʹ  

  8.   • Service Worker • CDN

  9.   • Service Worker • CDN

  10.   ࠓճͷߏ੒

  11.   • iOS: Swift • Web (PWA): Ionic 3,

    TypeScript, Firebase • API: Rails, Heroku, CloudFront
  12. chatstory.pixiv.net  

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

  14.   ͯͯ͞͞

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

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

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

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

  19.   HerokuΛCDNͰΩϟογϡ

  20.   • Heroku͕ԕ͗͢Δ໰୊ • ϥ΢ϯυτϦοϓ͚ͩͰ100ms • ϖʔδͷදࣔʹΫϦςΟΧϧͳϦΫΤετ͸
 CDNͰϢʔβʔͷۙ͘ʹΩϟογϡ͍ͨ͠

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

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

  23.   Cache-Control: public, max-age=0, s-maxage=3600 public => CDNͰΩϟογϡͯ͠΋ྑ͍ max-age

    => ΫϥΠΞϯτʢϒϥ΢βʣͰΩϟογϡͯ͠΋ྑ͍ظؒ s-maxage => ϓϩΩγʢCDNʣͰΩϟογϡͯ͠΋ྑ͍ظؒ Cache-Controlϔομʔ
  24.   • ͦ΋ͦ΋Ωϟογϡ͢Δඞཁ͕͋Δͷ͔ • Ωϟογϡͷ༗ޮظݶ • Ωϟογϡͷ࡟আ • Ωϟογϡͯ͠͸͍͚ͳ͍΋ͷΛΩϟογϡ͠ͳ͍

  25.   CloudFrontͷΩϟογϡ࡟আ

  26.   • API͕͋Δʢ΋ͪΖΜʣ • URLલํҰகͰࢦఆ • ैདྷ͸10ʙ15෼͔͔͍ͬͯͨͦ͏͕ͩɺ
 2017೥͔Β͸શମͷ90%ʹ͸5ඵɺ࠷େͰ΋1෼ •

    Fastlyͩͱ150msʢʂʣ
  27.   • ߋ৽ܥͷΞΫγϣϯͰΩϟογϡΛ࡟আ • ࠣࡉͳߋ৽͸׶͑ͯແࢹ

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

  29.   Ωϟογϡࣄނ๷ࢭ

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

    δΣΫτʹ৮Εͳ͘͢Δ
 ʢݱ࣮తʹ͸͜ΕͰ͸μϝͳέʔε΋͋Δʣ
  31.   • ࠓճ͸ɺcurrent_userΛ࢖͑ΔΞΫγϣϯΛ੍ݶͨ͠ • Ωϟογϡ͢ΔͳΒcurrent_userΛ࢖͏ͳ • current_userΛ࢖͏ͳΒΩϟογϡ͢Δͳ • →ϔϧύʔϝιουԽͯ͠ɺকདྷʹ౉Δࣄނ๷ࢭʹ

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

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

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

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

  36.   ࠓճͷ೉ॴ

  37.   PreflightϦΫΤετ

  38.   Cross Origin Resource Sharing (CORS) ʹ͓͍ͯɺ ΧελϜϔο μʔ͚ͭͯϦΫΤετ͍ͨ͠৔߹

    ͸ ϒϥ΢β͕PreflightϦΫΤε τΛૹΓɺαʔόʔ͕Ԡ౴͢Ε͹ ຊ౰ͷϦΫΤετΛૹΔ ʢࡉ͔͍࢓༷͸ׂѪʣ
  39. PreflightΩϟογϡ༻CloudFrontઃఆ  

  40.   ͜ΕͰര଎ʂʂ

  41.   ·ͱΊ

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

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