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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

1 ʮՈ଒ΞϧόϜ ΈͯͶʯʹ͍ͭͯ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

՝୊ͱ͸ʁ 2

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

՝୊ͷ෼ੳ 3

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

ೝূΛ࣮ߦ

Slide 23

Slide 23 text

302 Redirect

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

ΞϓϦ࣮૷ 5

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Realm ΞϓϦ࣮૷ 5

Slide 38

Slide 38 text

ΞϓϦ࣮૷ 5

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Repository ΞϓϦ࣮૷ 5

Slide 41

Slide 41 text

ΞϓϦ࣮૷ 5

Slide 42

Slide 42 text

ΞϓϦ࣮૷ 5

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

ΞϓϦ࣮૷ 5

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

੒Ռ 6

Slide 54

Slide 54 text

੒Ռ 6 Before After

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

͞ΒͳΔ՝୊ 7

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

·ͱΊ 8

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

THANK YOU!!