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

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

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. 
     Ωϟογϯάͷ͝ར༻͸ܭըతʹ̇