FUKUOKA Engineers Day 2018 ~Autumn~ で話した内容です。
ϑϧCDNΞʔΩςΫνϟͰ αʔϏεઃܭͨ͠Fukuoka Engineers Daypixiv.incAtsushi Takayama
View Slide
• ߴࢁ / @edvakf• ϐΫγϒגࣜձࣾCTO ݉ ԬΦϑΟεϚωʔδϟʔ• JavaScript, Ruby, Go, Scala
ʮϑϧCDNΞʔΩςΫνϟʯ
͜Ε͕2016
― 1ޙ ―
dev.to͕ʹ
• Service Worker• CDN
ࠓճͷߏ
• iOS: Swift• Web (PWA): Ionic 3, TypeScript, Firebase• API: Rails, Heroku, CloudFront
chatstory.pixiv.net
• ϑϩϯτΤϯυFirebaseʹϗετ͍ͯ͠ΔͷͰɺFirebaseʹσϑΥϧτͰ͍͍ͭͯΔCDNΛ׆༻• firebase.jsonͰCache-ControlLinkϔομʔΛઃఆ
ͯͯ͞͞
ΩϟογϡΛߟ͑Δ্Ͱେࣄͳ͜ͱ
• ͦͦΩϟογϡ͢Δඞཁ͕͋Δͷ͔• Ωϟογϡͷ༗ޮظݶ• Ωϟογϡͷআ• Ωϟογϡ͍͚ͯ͠ͳ͍ͷΛΩϟογϡ͠ͳ͍
• ΩϟογϡҰೖΕͨΒ֎͢ͷ͔ͳΓ͍͠• Ωϟογϡ͢Δͱ͍͏͜ͱෳࡶ͞Λ૿͢͜ͱ• →ύϑΥʔϚϯε͕ʹͳΔՕॴ͚ͩΩϟογϡ
HerokuΛCDNͰΩϟογϡ
• Heroku͕ԕ͗͢Δ• ϥϯυτϦοϓ͚ͩͰ100ms• ϖʔδͷදࣔʹΫϦςΟΧϧͳϦΫΤετ CDNͰϢʔβʔͷۙ͘ʹΩϟογϡ͍ͨ͠
CDNΩϟογϡͷ༗ޮظݶ
Cache-Control: public, max-age=0, s-maxage=3600public => CDNͰΩϟογϡͯ͠ྑ͍max-age => ΫϥΠΞϯτʢϒϥβʣͰΩϟογϡͯ͠ྑ͍ظؒs-maxage => ϓϩΩγʢCDNʣͰΩϟογϡͯ͠ྑ͍ظؒCache-Controlϔομʔ
CloudFrontͷΩϟογϡআ
• API͕͋ΔʢͪΖΜʣ• URLલํҰகͰࢦఆ• ैདྷ10ʙ15͔͔͍ͬͯͨͦ͏͕ͩɺ 2017͔Βશମͷ90%ʹ5ඵɺ࠷େͰ1• Fastlyͩͱ150msʢʂʣ
• ߋ৽ܥͷΞΫγϣϯͰΩϟογϡΛআ• ࠣࡉͳߋ৽͑ͯແࢹ
Ωϟογϡࣄނࢭ
• CookieUser-AgentIPΞυϨεɺݸผͷϦΫΤετʹґଘ͢ΔσʔλΩϟογϡ͠ͳ͍• ͜͜ΛޡΔࣄނҙ֎ͱଟ্͍ʹɺϓϥΠόγʔ໘ͰେʹͳΔ͜ͱ͕͋Δ• ཧతʹΩϟογϡΑΓޙΖͰrequestΦϒδΣΫτʹ৮Εͳ͘͢Δ ʢݱ࣮తʹ͜ΕͰμϝͳέʔε͋Δʣ
• ࠓճɺcurrent_userΛ͑ΔΞΫγϣϯΛ੍ݶͨ͠• Ωϟογϡ͢ΔͳΒcurrent_userΛ͏ͳ• current_userΛ͏ͳΒΩϟογϡ͢Δͳ• →ϔϧύʔϝιουԽͯ͠ɺকདྷʹΔࣄނࢭʹ
• Ωϟογϡͯ͠ྑ͍APIͱΩϟογϡ͍͚ͯ͠ͳ͍APIΛઃܭஈ֊͔Βશʹ• ྫɿϢʔβʔAPIΩϟογϡ͍ͨ͠ͷͰɺʮ͕ࣗ͜ͷϢʔβʔΛϑΥϩʔ͍ͯ͠Δ͔ʯผAPIʹ͢Δ• ͜ΕʹΑͬͯϦΫΤετ͕૿͑Δͷڐ༰͢Δ
Ͳ͏ͯ͠ذ͍ͨ͠߹
Vary: Accept, OriginAcceptϔομʔͱOriginϔομʔʢϦΫΤετϔομʔʣ͝ͱʹผͷΩϟογϡʹ͢ΔʢUser-AgentͳͲͱॻ͍ͯ͠·͏ͱΩϟογϡώοτ͕Լ͕Γ͗͢ΔͷͰҙʣVaryϔομʔ
͕ɺCloudFrontVaryΛແࢹ͢Δ
ࠓճͷॴ
PreflightϦΫΤετ
Cross Origin Resource Sharing(CORS) ʹ͓͍ͯɺ ΧελϜϔομʔ͚ͭͯϦΫΤετ͍ͨ͠߹ ϒϥβ͕PreflightϦΫΤετΛૹΓɺαʔόʔ͕Ԡ͢ΕຊͷϦΫΤετΛૹΔʢࡉׂ͔͍༷Ѫʣ
PreflightΩϟογϡ༻CloudFrontઃఆ
͜ΕͰരʂʂ
·ͱΊ
• HerokuͰCDNͰΩϟογϡ͢Εdev.toฒͷεϐʔυʹͳΔ• ؆୯ʹݟ͑Δ͕ɺҰͭҰͭ৻ॏʹΒͳ͍ͱࣄނΔ
Ωϟογϯάͷ͝ར༻ܭըతʹ̇