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

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

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