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

Transcript

1. 1.

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

   Takayama
2. 2.

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

   • JavaScript, Ruby, Go, Scala
3. 3.

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

4. 4.

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

5. 5.

   
    ͜Ε͕2016೥຤

6. 6.

   
    ― 1೥ޙ ―

7. 7.

   dev.to͕࿩୊ʹ
   

8. 8.

   
    • Service Worker • CDN

9. 9.

   
    • Service Worker • CDN

10. 10.

    
     ࠓճͷߏ੒

11. 11.

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

    TypeScript, Firebase • API: Rails, Heroku, CloudFront
12. 12.

    chatstory.pixiv.net
    

13. 13.

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

14. 14.

    
     ͯͯ͞͞

15. 15.

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

16. 16.

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

17. 17.

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

18. 18.

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

19. 19.

    
     HerokuΛCDNͰΩϟογϡ

20. 20.

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

21. 21.

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

22. 22.

    
     CDNΩϟογϡͷ༗ޮظݶ

23. 23.

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

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

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

25. 25.

    
     CloudFrontͷΩϟογϡ࡟আ

26. 26.

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

    Fastlyͩͱ150msʢʂʣ
27. 27.

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

28. 28.

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

29. 29.

    
     Ωϟογϡࣄނ๷ࢭ

30. 30.

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

    δΣΫτʹ৮Εͳ͘͢Δ
 ʢݱ࣮తʹ͸͜ΕͰ͸μϝͳέʔε΋͋Δʣ
31. 31.

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

32. 32.

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

33. 33.

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

34. 34.

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

35. 35.

    
     ͕ɺCloudFront͸VaryΛແࢹ͢Δ

36. 36.

    
     ࠓճͷ೉ॴ

37. 37.

    
     PreflightϦΫΤετ

38. 38.

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

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

    PreflightΩϟογϡ༻CloudFrontઃఆ
    

40. 40.

    
     ͜ΕͰര଎ʂʂ

41. 41.

    
     ·ͱΊ

42. 42.

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

43. 43.

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