$30 off During Our Annual Pro Sale. View Details »

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

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

iOSDC Japan 2018発表資料です。

atsushisakai

August 30, 2018
Tweet

More Decks by atsushisakai

Other Decks in Programming

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