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

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