海外展開を目指すアプリで実装したセキュアで高速な画像配信の話 / Image distribution for overseas

iOSDC Japan 2018発表資料です。

Transcript

1. ւ֎ల։Λ໨ࢦ͢ΞϓϦͰ࣮૷ͨ͠
   ηΩϡΞͰߴ଎ͳը૾഑৴ͷ࿩
   ञҪ ಞ @_atsushisakai
   mixi, Inc.
   iOSDC Japan 2018 - 8/31 14:20~ Track D
   

   View Slide

2. ञҪ ಞ @_atsushisakai
   2011೥ ϛΫγΟೖࣾ
   ։ൃ։࢝౰ॳΑΓʮՈ଒ΞϧόϜ ΈͯͶʯͷiOS։ൃΛ୲౰
   2018೥Ҏ߱ɺΈͯͶࣄۀ෦։ൃάϧʔϓϚωʔδϟʔ ݉ SRE
   

   View Slide

3. 1 ʮՈ଒ΞϧόϜ ΈͯͶʯʹ͍ͭͯ
   

   View Slide

4. ʮՈ଒ΞϧόϜ ΈͯͶʯʹ͍ͭͯ
   ಛ௃
   ࢠڙͷࣸਅ΍ಈըΛڞ༗ɺ੔ཧ
   Ո଒͚ͩͰ҆৺ͯ͠࢖͑ΔΞϧόϜΞϓϦ
   1
   

   View Slide

5. ʮՈ଒ΞϧόϜ ΈͯͶʯʹ͍ͭͯ
   ͜Ε·Ͱ
   2015೥4݄ αʔϏε։࢝
   2018೥8݄ Ϣʔβʔ਺300ສਓ
   1
   

   View Slide

6. ʮՈ଒ΞϧόϜ ΈͯͶʯʹ͍ͭͯ
   2017೥6݄ ӳޠ൛ͷఏڙ։࢝
   1
   

   View Slide

7. 7݄ʹNY΁ग़ு༷ͨ͠ࢠͳͲ
   https://medium.com/mixi-developers/4526e24093ca
   ʮՈ଒ΞϧόϜ ΈͯͶʯʹ͍ͭͯ
   1
   

   View Slide

8. ʮՈ଒ΞϧόϜ ΈͯͶʯʹ͍ͭͯ
   ࠓ೔͸ӳޠ൛ͷΞϓϦʹ͓͚Δ՝୊ղܾͷࣄྫΛ͓࿩͠͠·͢ɻ
   1
   

   View Slide

9. ՝୊ͱ͸ʁ
   2
   

   View Slide

10. ՝୊ͱ͸ʁ
    Ϣʔβʔ͔Βͷใࠂ
    ʮը૾͕දࣔ͞ΕΔͷ͕ͱͯ΋஗͍ʯ
    2
    NYͰݟͨվળલͷΈͯͶ
    

    View Slide

11. ՝୊ͱ͸ʁ
    ւ֎ͰαʔϏεΛӡ༻͢Δ࠷ॳͷ՝୊
    ΞϧόϜΞϓϦͱͯ͠ࠃ಺ಉ༷ɺߴ଎ͳը૾ӾཡΛߦ͑Δ͜ͱ
    2
    

    View Slide

12. ՝୊ͷ෼ੳ
    3
    

    View Slide

13. ΈͯͶͷը૾഑৴ϑϩʔʢվળલʣ
    ՝୊ͷ෼ੳ
    3
    

    View Slide

14. ը૾഑৴ϑϩʔ
    1. ϦΫΤετ
    2. ೝূɾೝՄΛߦ͍CloudFront΁ϦμΠϨΫτ
    3. ॺ໊෇͖ɾ੍࣌ؒݶ෇͖URL΁ը૾ΛϦΫΤετ
    4. S3ͷΦϦδϯαʔόʔ΁ը૾ΛϦΫΤετ
    5. ը૾ΛCloudFront΁ฦ٫ɺCloudFrontͰΩϟογϡ
    6. ը૾ΛσόΠε΁Ϩεϙϯεʢ୺຤Ωϟογϡʣ
    Amazon
    EC2
    Amazon
    CloudFront
    Amazon
    S3
    1
    2 3
    4
    5
    6
    ՝୊ͷ෼ੳ
    3
    

    View Slide

15. ೔ຊࠃ֎͔Β͸Ͳ͏ݟ͑Δ͔ʁ
    Amazon
    EC2
    Amazon
    CloudFront
    Amazon
    S3
    1
    3
    4
    5
    6
    2
    ՝୊ͷ෼ੳ
    3
    

    View Slide

16. ೔ຊࠃ֎͔Β͸Ͳ͏ݟ͑Δ͔ʁ
    Amazon
    CloudFront
    1
    3
    4
    5
    6
    ೔ຊࠃ಺
    Amazon
    S3
    Amazon
    EC2
    2
    ՝୊ͷ෼ੳ
    3
    

    View Slide

17. 3
    ࠃ֎͔ΒͲ͏ݟ͑Δ͔ʁ
    Amazon
    EC2
    Amazon
    CloudFront
    Amazon
    S3
    1
    3
    4
    5
    6
    2
    ೔ຊࠃ಺
    ೔ຊࠃ֎͔Βͷը૾ද͕ࣔ஗͍ݪҼ
    • ೔ຊࠃ಺ʹଘࡏ͍ͯ͠ΔAPIαʔόʔ΁ͷڑ཭͕ԕ͗͢Δ
    • ೔ຊࠃ಺ʹଘࡏ͍ͯ͠ΔS3΁ͷڑ཭͕ԕ͗͢Δ
    ՝୊ͷ෼ੳ
    

    View Slide

18. Ͳͷ͙Β͍஗͍ͷʁ
    ՝୊ͷ෼ੳ
    3
    

    View Slide

19. NewRelic Synthetics
    • APIΤϯυϙΠϯτͷ֎ܗ؂ࢹαʔϏε
    • ϦΫΤετ։࢝৔ॴ͕ੈքதʹଘࡏ͍ͯ͠ΔͷͰࠃ֎͔ΒͷϦΫΤετΛγϛϡϨʔτՄೳ
    • ςετ಺༰͸JavaScriptͰهड़
    • ֤छnode.js modulesΛར༻Մೳ (https://docs.newrelic.com/docs/synthetics/new-relic-
    synthetics/scripting-monitors/import-nodejs-modules)
    ՝୊ͷ෼ੳ
    3
    

    View Slide

20. View Slide

21. 36.2KBͷసૹ
    " Washington, DC, ͔ΒͷΞΫηε
    

    View Slide

22. ೝূΛ࣮ߦ
    

    View Slide

23. 302 Redirect
    

    View Slide

24. CloudFrontʢ࣮ࡍͷը૾Ϧιʔεʣ΁ͷΞΫηε
    

    View Slide

25. ൃߦͨ͠ϦΫΤετ͕׬ྃ͢Δ·Ͱͷ࣌ؒ
    ͨͬͨ36.2KBΛసૹ͢ΔͨΊʹ1.35sec΋͔͔͍ͬͯΔ
    

    View Slide

26. ՝୊Λղܾ͢ΔγεςϜઃܭ
    4
    

    View Slide

27. ՝୊Λղܾ͢ΔγεςϜઃܭ
    4
    վળ͢΂͖ϙΠϯτ
    1. ೔ຊࠃ಺΁ͷAPIϦΫΤετͷൃੜ͸࠷খݶʹɻ
    2. CDN΁ͷΩϟογϡΛࣄલʹߦ͏Α͏ʹɻ
    1
    Amazon
    CloudFront
    1
    3
    4
    5
    6
    ೔ຊࠃ಺
    Amazon
    S3
    Amazon
    EC2
    2
    
    

    View Slide

28. վળ͢΂͖ϙΠϯτ
    1. ೔ຊࠃ಺΁ͷAPIϦΫΤετͷൃੜ͸࠷খݶʹɻ
    2. CDN΁ͷΩϟογϡΛࣄલʹߦ͏Α͏ʹɻ
    Amazon
    CloudFront
    1
    3
    4
    5
    6
    ೔ຊࠃ಺
    Amazon
    S3
    Amazon
    EC2
    2
    
    ՝୊Λղܾ͢ΔγεςϜઃܭ
    4
    

    View Slide

29. վળ͢΂͖ϙΠϯτ
    1. ೔ຊࠃ಺΁ͷAPIϦΫΤετͷൃੜ͸࠷খݶʹɻ
    2. CDN΁ͷΩϟογϡΛࣄલʹߦ͏Α͏ʹɻ
    AWSʹ͸Pre-Warmingػೳ͸ແ͍ Amazon
    CloudFront
    1
    3
    4
    5
    6
    ೔ຊࠃ಺
    Amazon
    S3
    Amazon
    EC2
    2
    
    ՝୊Λղܾ͢ΔγεςϜઃܭ
    4
    

    View Slide

30. ೔ຊࠃ಺΁ͷAPIϦΫΤετͷൃੜΛ࠷খݶʹ͢Δɻ
    ՝୊Λղܾ͢ΔγεςϜઃܭ
    4
    

    View Slide

31. ͲͷΑ͏ʹ࣮ݱ͔ͨ͠
    • ॺ໊෇͖URLΛUI͔ΒͷϦΫΤετ͕૸ΔલʹࣄલʹҰཡͰ෷͍ग़͢Α͏ʹมߋ
    • ༗ޮظݶ੾Εͷͱ͖͚ͩɺ೔ຊʹ໰͍߹Θͤͯ࠶औಘ
    • ॺ໊෇͖URLࣗମΛΩϟογϡ͢Δ
    • දࣔϦΫΤετ࣌ʹ͸ɺ͙͢ʹCloudFront΁ͷΞΫηεΛߦͳ͑ΔΑ͏ʹͨ͠
    ՝୊Λղܾ͢ΔγεςϜઃܭ
    4
    

    View Slide

32. γʔέϯε
    1. ҰཡऔಘͷϦΫΤετൃՐ͸ϝλσʔλߋ৽࣌ͷΈ
    2. ॺ໊෇͖URLࣗମΛΩϟογϡ͢Δ
    3. ॺ໊෇͖URL͑͋͞Ε͹͙͢ʹը૾ʹΞΫηεՄೳ
    ՝୊Λղܾ͢ΔγεςϜઃܭ
    4
    

    View Slide

33. ղઆ
    ߴ଎ͳίϯςϯπΞΫηε
    • ओʹCDNͷػೳͰ࣮ݱ
    • S3ͷίϯςϯπΛΩϟογϡ͠௿ϨΠςϯγʔͰ഑৴͢Δ
    • CDNʹΩϟογϡ͞Ε͍ͯΕ͹S3΁ͷϦΫΤετ͕লུͰ͖Δ
    ηΩϡϦςΟ
    • RailsͰೝূɾೝՄࡁΈͷϢʔβʔʹͷΈॺ໊෇͖URLΛൃߦ͍ͯ͠Δ
    • ৴པ͞Εͨॺ໊ऀʢαʔόʔʣͷΈ͕ॺ໊෇͖URLΛੜ੒Մೳ
    • CloudFrontͰURLʹ෇༩͞Εͨॺ໊Λݕূ͞ΕͯॳΊͯϦιʔε΁ͷΞΫηε͕Մೳ
    • ༗ޮظݶ෇͖ͰURLͷ࿙Ӯ͔ΒकΔ
    • S3ʹ͸௚઀ΞΫηεग़དྷͳ͍Α͏ʹઃఆ͍ͯ͠Δ
    ՝୊Λղܾ͢ΔγεςϜઃܭ
    4
    

    View Slide

34. TIPS: ϫΠϧυΧʔυΛ࢖༻ͨ͠CloudFrontॺ໊෇͖URLੜ੒
    • ϫΠϧυΧʔυࢦఆͰෳ਺ίϯςϯπΛର৅ʹͯ͠ॺ໊෇͖URLΛൃߦͰ͖Δ
    • ྫ͑͹ɺෳ਺ͷαΠζͷαϜωΠϧΛS3্ʹอ͍࣋ͯ͠Δ৔߹ͳͲ
    • https://cdn-hoge.cloudfront.net/images/*/id-001.jpeg Λॺ໊͢ΔͱҎԼ྆ํͱ΋ΞΫηε͕Մೳ
    • https://cdn-hoge.cloudfront.net/images/small/id-001.jpeg
    • https://cdn-hoge.cloudfront.net/images/large/id-001.jpeg
    • SDKΛ࢖ͬͨURLੜ੒͕ศར
    • AWS SDK for Ruby version 3
    • https://docs.aws.amazon.com/sdk-for-ruby/v3/api/Aws/CloudFront/UrlSigner.html
    ՝୊Λղܾ͢ΔγεςϜઃܭ
    4
    

    View Slide

35. ΞϓϦ࣮૷
    5
    

    View Slide

36. ࣮૷্ͷϙΠϯτ
    • ॺ໊෇͖URLΛRealmʹΩϟογϡ͢Δ
    • ༗ޮͳॺ໊෇͖URL͕ඞͣऔಘͰ͖ΔΑ͏ʹRxSwiftΛۦ࢖ͯ͠RepositoryΛ࣮૷͢Δ
    • ୺຤΁ͷը૾ͷDownload/Cache͸SDWebImageΛར༻͢Δ
    ΞϓϦ࣮૷
    5
    

    View Slide

37. Realm
    ΞϓϦ࣮૷
    5
    

    View Slide

38. ΞϓϦ࣮૷
    5
    

    View Slide

39. 5
    ॺ໊෇͖URLͷϑΥʔϚοτͱ༗ޮظݶΛอ࣋͢ΔϑΟʔϧυΛ༻ҙ
    ΞϓϦ࣮૷
    

    View Slide

40. Repository
    ΞϓϦ࣮૷
    5
    

    View Slide

41. ΞϓϦ࣮૷
    5
    

    View Slide

42. ΞϓϦ࣮૷
    5
    

    View Slide

43. ΞϓϦ࣮૷
    5
    Realm/Remote APIͷΠϯλʔϑΣʔεΛந৅Խ
    ➡ RemoteCacheStore (API޲͚)
    ➡ LocalCacheStore (Realm޲͚)
    

    View Slide

44. ΞϓϦ࣮૷
    5
    Realm΋͘͠͸API͔Βॺ໊෇͖URLΛऔಘ͢Δ
    

    View Slide

45. ΞϓϦ࣮૷
    5
    Realmʹॺ໊෇͖URLΛอଘ͢Δ
    

    View Slide

46. ΞϓϦ࣮૷
    5
    

    View Slide

47. ΞϓϦ࣮૷
    5
    RemoteStore ➡ SignedUrlDataStoreͷAPI࣮૷
    CacheStore ➡ SignedUrlDataStoreͷRealm࣮૷
    

    View Slide

48. ΞϓϦ࣮૷
    5
    RealmʹϨίʔυ͕ଘࡏ͠ͳ͍ͱ͖ʹAPI͔Βॺ໊෇͖URLΛऔಘ
    

    View Slide

49. ΞϓϦ࣮૷
    5
    ΩϟογϡࡁΈͷॺ໊෇͖URL͕༗ޮظݶ੾Εͷ৔߹
    ࠶౓APIܦ༝ͰԆ௕ͨ͠ॺ໊෇͖URLΛऔಘ͢Δ
    

    View Slide

50. ΞϓϦ࣮૷
    5
    ࠶औಘͨ͠৔߹͸ॺ໊෇͖URLΛΩϟογϡʹอଘͭͭ͠ฦ͢
    

    View Slide

51. ը૾ͷDownload/Cache
    ΞϓϦ࣮૷
    5
    

    View Slide

52. SDWebImage
    • ௕͗͢Δॺ໊෇͖URL͕ΩϟογϡΩʔͱͯ͠ѻ͑ͳ͔ͬͨ
    • ࣸਅɾಈըϝλσʔλͷ֤छ৘ใ͔Βੜ੒Ͱ͖ΔΩϟογϡΩʔΛࣗ෼Ͱੜ੒͢Δ͜ͱʹͨ͠
    • SDImageDownloader/SDImageCache Λݸผʹૢ࡞͢ΔίʔυΛॻ͍ͨ
    ΞϓϦ࣮૷
    5
    

    View Slide

53. ੒Ռ
    6
    

    View Slide

54. ੒Ռ
    6
    Before After
    

    View Slide

55. ※ͨͩ͠ɺॺ໊෇͖URL͕Expireͨ͠ͱ͖ʹ͸࠶औಘͷͨΊͷϦΫΤετ͕ඞཁ
    ඞཁͳͷ͸CloudFront΁ΞΫηε͢Δ͚࣌ؒͩ
    

    View Slide

56. 58.4ms͕ը૾දࣔϦΫΤετ࣌ؒ
    1.35sec͔͔͍ͬͯͨࠒ͔Βൺ΂Δͱ࣮ʹ 22 ഒߴ଎Խ
    

    View Slide

57. ͞ΒͳΔ՝୊
    7
    

    View Slide

58. վળ͢΂͖ϙΠϯτ
    1. ೔ຊࠃ಺΁ͷAPIϦΫΤετͷൃੜ͸࠷খݶʹɻ
    2. CDN΁ͷΩϟογϡΛࣄલʹߦ͏Α͏ʹɻ
    
    Amazon
    CloudFront
    1
    3
    4
    5
    6
    ೔ຊࠃ಺
    Amazon
    S3
    Amazon
    EC2
    2
    
    ͞ΒͳΔ՝୊
    7
    

    View Slide

59. ࠃࡍ݁ࠗͳͲͷՈ଒ʹ͸ඇޮ཰Ͱ͋Δ
    • CDNͷΩϟογϡΛ׆͔͖͠Εͳ͍ύλʔϯ
    • ྫʣ೔ຊͷ෉්ͱΞϝϦΧͷ૆෕฼ɻΤοδ΁ͷΩϟογϡΛෳ਺ճߦ͏ඞཁ͕͋Δɻ
    • Τοδαʔόʔ⁶S3ΦϦδϯͷ௨৴ʹڑ཭ʹىҼ͢ΔϨΠςϯγΛഉআ͖͠Εͳ͍ɻ
    • ٯʹɺಉ͡ࠃɾ஍Ҭʹ͓͍ͯ͸ΤοδΩϟογϡ͕ޮ͘ͷͰ࠷ॳͷ1ճҎ֎͸ߴ଎ɻ
    ͞ΒͳΔ՝୊
    7
    

    View Slide

60. CDNͷࣄલΩϟογϡػೳ͕ແ͍໰୊
    • ݁ہ͸ɺUIʹىҼ͢ΔϦΫΤετΑΓ΋ɺόοΫάϥ΢ϯυεϨουʗϓϩηεͰͷࣄલΩϟο
    γϡ͕Ұ൪༗ޮ
    • ͪ͜Β͸ݱࡏ։ൃதͰۙ೔தʹϦϦʔε͢Δ༧ఆ
    ͞ΒͳΔ՝୊
    7
    

    View Slide

61. ·ͱΊ
    8
    

    View Slide

62. ·ͱΊ
    • ը૾Λऔಘɾදࣔ͢Δ͚ͩͰ΋ւ֎޲͚ΞϓϦͰ͸େ͖ͳ՝୊ʹͳΔͷͰ஫ҙʂ
    • NewRelic SyntheticsͰ؆୯ʹࠃ֎͔ΒͷAPI࣮ߦΛγϛϡϨʔτͰ͖ΔͷͰΦεεϝ
    • ηΩϡϦςΟΛ୲อͭͭ͠ߴ଎ʹදࣔ͢Δઃܭͱ࣮૷ࣄྫ
    ·ͱΊ
    8
    

    View Slide

63. ւ֎ͰࣗࣾͷαʔϏεΛ੒ޭ͍ͤͨ͞։ൃऀͷօ͞Μ
    ઈରʹ੒ޭͤ͞ΔͨΊͷ৘ใަ׵Λ͠·͠ΐ͏
    

    View Slide

64. THANK YOU!!
    

    View Slide