Universal Application にありがちな LB ガチャ問題を解消する #awswakaran_tokyo / Resolve LB mistake in Universal Application

Slide 1

Slide 1 text

Universal Application ʹ͋Γ͕ͪͳ LB Ψνϟ໰୊Λղফ͢Δ 2019.07.22 #awswakaran_tokyo Takuma HANATANI@ElevenBack

Slide 2

Slide 2 text

Proﬁle • Takuma HANATANI (@potato4d) • ͱ͋ΔձࣾͷϑϩϯτΤϯυΤϯδχΞ & ݸਓࣄۀओ • Co-Organizer at UIT / awswakaran.tokyo • Πϯϑϥࣄ৘ • αʔόʔϨεपΓͷ AWS ͱ Firebase ͕͖͢ • GCP΋৮Βͳ͍͜ͱ͸ͳ͍͚ͲΑ͘Θ͔ΒΜ • ຊۀͷձࣾ͸ࣗࣾϓϥΠϕʔτΫϥ΢υ • ڏແΤϐιʔυɿݖݶͷ౎߹Ͱ Cloud Formation ͕࣮ߦͰ͖ͣ Skype Ͱ ૬खͷϚωίϯͷ༷ࢠΛฉ͖ͳ͕ΒΠϯϑϥΛߏஙͨ͜͠ͱ͕͋Δ

Slide 3

Slide 3 text

ࠓ೔࿩͢͜ͱ 1. SPA ͱ SSRɺ Universal Application ͷ͓͞Β͍ 2. Universal Application ॳ৺ऀ͕΍Γ͕ͪͳΠϯϑϥߏ੒ 3. ॳ৺ऀ͕΍Γ͕ͪͳΠϯϑϥߏ੒ʹ͓͚Δ LB Ψνϟͷ໰୊ͷ঺հ 4. LB ΨνϟΛҾ͔ͳ͍ͨΊͷߏஙྫͷ͝঺հ

Slide 4

Slide 4 text

͸͡Ίʹ ࠓ೔ͷςʔϚ͸ AWS, GCP, ͦΕҎ֎ͲΕͰ΋࠶ݱΛΈ͖ͯͨࣄ৅Ͱ͢ɻ ͦͷͨΊ AWS ಛ༗ͷ෦෼ΛബΊ͍ͯ·͢ͷͰɺదٓ͝ར༻ͷαʔϏεʹಡΈ͔͍͑ͯͩ͘͞ɻ

Slide 5

Slide 5 text

SPA / Universal Application ͷ͓͞Β͍

Slide 6

Slide 6 text

Single Page Application • HTML / CSS / JavaScript ͷΈͰϑϩϯτΤϯυͷ Web UI ΛऔΓѻ͏ٕज़ͷ ૯শ • ͬ͘͟Γ͍͏ͱΞϓϦέʔγϣϯαʔόʔ͕ HTML ͡Όͳͯ͘ JSON Λฦ͢ ੈք؍ʹ͓͚ΔϑϩϯτΤϯυ • શ෦ ΫϥΠΞϯτͷ JS Ͱඳը͢ΔͷͰΞΫηε࣌͸͔Βͷ div ͚ͩͷੈք؍ • Πϯϑϥతʹ͍͏ͱϑϩϯτΤϯυʹίϯϐϡʔςΟϯάϦιʔεΛ࢖Θͳ͍ ͷ͕ಛ௃

Slide 7

Slide 7 text

Universal Application (SSR/SPA) • SPA ͕ΫϥΠΞϯταΠυͰߦ͏ JavaScript ͷίʔυΛͦͷ··αʔόʔଆ࣮ ߦ͠ɺ݁Ռͷ HTML Λαʔόʔ͔Βฦ٫͢Δɻ͚ͲҰճ HTML Λฦ٫ͨ͠Βͦ ͷޙ͸ JS ΛಡΈࠐΜͰ SPA ͱͯ͠ಈ͘ • ຊจ͕ͦͷ··ϨϯμϦϯά͞ΕͨΓ OGP Λಈతʹੜ੒Ͱ͖ͨΓɺSEO/ιʔ γϟϧจ຺Ͱ΋ॏๅ͞ΕΔ΄͔ɺύϑΥʔϚϯε؍఺Ͱ΋࠾༻͞ΕΔ • ࠷ۙ͸ Nuxt.js ͱ͔ Next.js ͱ͔ΦʔϧΠϯϫϯͳϑϨʔϜϫʔΫ͕ग़ͨ͜ͱʹ ΑͬͯɺͱΓ͋͑ͣ Universal ʹ͕ͨ͠Δਓ΋૿͖͍͑ͯͯΔ

Slide 8

Slide 8 text

Α͋͘Δ SPA / SSR ͷߏஙྫ

Slide 9

Slide 9 text

SPA ͷ৔߹

Slide 10

Slide 10 text

Α͋͘Δ SPA ͷߏ੒ਤ

Slide 11

Slide 11 text

Α͋͘Δ SPA ͷߏ੒ਤ 41"΍੩తϑΝΠϧ͸ શͯ$'ˠ4Ͱ഑৴

Slide 12

Slide 12 text

Α͋͘Δ SPA ͷߏ੒ਤ ಺෦αʔόʔͷߏ੒͸লུ ࠷ѱ&$୆Ͱ΋࠶ݱՄೳ 41"΍੩తϑΝΠϧ͸ શͯ$'ˠ4Ͱ഑৴

Slide 13

Slide 13 text

Universal Application ͷ৔߹

Slide 14

Slide 14 text

Universal Application Ͱ΍Γ͕ͪͳਤ

Slide 15

Slide 15 text

ʊਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹಥવͷ੩త഑৴ͷফࣦɹʻ ʉ:?:?:?:?:?:?:?:?:?:?:ʉ

Slide 16

Slide 16 text

Universal Application Ͱ΍Γ͕ͪͳਤ

Slide 17

Slide 17 text

Universal Application Ͱ΍Γ͕ͪͳਤ ࡶʹ࡞Δͱ͜Μͳײ͡ʹͳΓ͕ͪ 443αʔόʔΛผͰߏங 41"Ͱ࢖ͬͯͨόέοτ͸ফ໓ "1*ίʔϧ࣌͸ωοτϫʔΫΛܦ༝

Slide 18

Slide 18 text

Universal Application Ͱ΍Γ͕ͪͳਤ ࡶʹ࡞Δͱ͜Μͳײ͡ʹͳΓ͕ͪ 443αʔόʔΛผͰߏங 41"Ͱ࢖ͬͯͨόέοτ͸ফ໓ "1*ίʔϧ࣌͸ωοτϫʔΫΛܦ༝ ಺෦αʔόʔͷߏ੒͸লུ ࠷ѱ&$୆Ͱ΋࠶ݱՄೳ

Slide 19

Slide 19 text

੩త഑৴ϨΠϠͷফࣦ • SPA ։ൃͷ৔߹͸ϑΝΠϧΛόέοτʹΞοϓϩʔυ͢Δ͚ͩ • ٯʹݴ͏ͱͦΕ͔͠બ୒ࢶ͕ͳ͍ͷͰࣗಈతʹϕετϓϥΫςΟεʹ • Node.js αʔόʔʹϗεςΟϯάػೳ͕͋Δ͔Β͍͚ΔͱࢥͬͪΌ͏ • ࣮ࡍ CloudFront -> ALB or ELB -> App ͳΒ໰୊ͳ͍͜ͱ΋

Slide 20

Slide 20 text

੩త഑৴ϨΠϠͰࠔΔ͜ͱ • CloudFront Ͱ഑৴͞Ε͍ͯͳ͍৔߹ • ੩తϑΝΠϧͷͨΊʹαʔόʔ͕૿͑ΔՄೳੑ༗Γ • S3 Ͱ഑৴͞Ε͍ͯͳ͍৔߹ • ಺෦తʹ࢖ΘΕ͍ͯΔ Node.js ͷϑΝΠϧ I/O ͳͲʹྑ͘ͳ͍఺͕͋ Δ৔߹ʹͦͷ··ίϯϐϡʔςΟϯάʹͭͳ͕ͬͯ͠·͏

Slide 21

Slide 21 text

੩త഑৴ϨΠϠͰࠔΔ͜ͱ • ͳʹΑΓ LB ΍ɺ୯ҰΠϯελϯεͰ΋λΠϛϯά࣍ୈͰΨνϟ͕ى͜Δ • CloudFront ͕લஈʹ͋Δ৔߹ɺSSR ࣌ʹچΠϯελϯεΛҾ͘෼ʹ͸໰୊ͳ͍ • چϦιʔε͸ CDN ʹ͋ΔͷͰ৽ΠϯελϯεʹΞΫηεͯ͠΋໰୊ͳ͠ • SSR ʹ৽ΠϯελϯεΛҾ͍ͨ৔߹ʹ໰୊͕ੜ͡Δ • CDN ʹ৐ͬͯͳ͍ JS ϑΝΠϧΛچΠϯελϯεʹಡΈʹߦͬͯ 404 • چ (HTML) → ৽(JS) ͱಡΈʹߦͬͨ৔߹Ͱ֬཰ͰΤϥʔͱͳΔ

Slide 22

Slide 22 text

ແରࡦͷ৔߹͜͏͍͏͜ͱ͕ى͜Δ͜ͱ΋

Slide 23

Slide 23 text

ରॲ๏

Slide 24

Slide 24 text

΍Δ΂͖͜ͱ • Node αʔόʔͰ͸੩తϑΝΠϧ഑৴ΛߦΘͳ͍ • ඞͣ S3 ʹΞοϓϩʔυ͢Δ • S3 ʹ੾Γग़͞ͳ͍ߏ੒Λ࡞Δਓ͸ CF ͷΩϟογϡΛૢΕͳ͍͜ͱ΋ߟྀ • ͨͱ͑͹੾Γग़ͨ͠Β SSR αʔόʔ͸ s-max-age 0 Ͱ΋ྑ͍ • ϏϧυϑΣʔζͱσϓϩΠϑΣʔζΛ෼͚ͯॱ൪ʹߦ͏ • ϏϧυϑΣʔζͰ S3 ʹΞοϓϩʔυͯ͠ΨνϟΛ๷͍Ͱ͔ΒσϓϩΠ͢Δ

Slide 25

Slide 25 text

Universal Application Ͱ΍Γ͕ͪͳਤ

Slide 26

Slide 26 text

վળ͞Εͨ Universal Application ͷߏ੒

Slide 27

Slide 27 text

վળ͞Εͨ Universal Application ͷߏ੒ ੩త഑৴༻ͷόέοτΛ ༻ҙͯ͠৽چ྆ํΛอ࣋

Slide 28

Slide 28 text

վળ͞Εͨ Universal Application ͷߏ੒ /PEFαʔόʔ͸ )5.-Ҏ֎Λฦ٫͠ͳ͍ ੩త഑৴༻ͷόέοτΛ ༻ҙͯ͠৽چ྆ํΛอ࣋

Slide 29

Slide 29 text

վળ͞Εͨ Universal Application ͷߏ੒ ੩త഑৴༻ͷόέοτΛ ༻ҙͯ͠৽چ྆ํΛอ࣋ /PEFαʔόʔ͸ )5.-Ҏ֎Λฦ٫͠ͳ͍ ಺෦αʔόʔͷߏ੒͸লུ ࠷ѱ&$୆Ͱ΋࠶ݱՄೳ

Slide 30

Slide 30 text

Nuxt.js ͷ৔߹͸ΞϓϦέʔγϣϯଆ͸ઃఆΛॻ͚ͩ͘Ͱ OK https://ja.nuxtjs.org/api/conﬁguration-build/#publicpath

Slide 31

Slide 31 text

ͦͷଞΠϯϑϥվળ఺ • VPC Θ͚ͯΔͷԿɺ API call ͷ࣌ʹ֎ग़ΔͷԿ • ׬શڞ௨ίʔυͰઃఆͨ͠৔߹͸େମ͜͏ͳ͍͕ͬͯͪ • ϑϨʔϜϫʔΫଆͰ࢖͏ baseURL Λ੾Γସ͑ΒΕΔ΋ͷ΋͋Δ • e.g.) https://axios.nuxtjs.org/options#browserbaseurl • Unix socket Ͱ΋ͳ͍ݶΓ͋Μ·Γ࢖ΘΕͳ͍

Slide 32

Slide 32 text

ͦͷଞΠϯϑϥվળ఺ • LB Ψνϟࣗମ͸ sticky session Ͱ΋ղܾՄೳʁ • εϥΠυ४උதʹ Twitter Ͱͪΐ͏Ͳ͋ͬͨ࿩ • ࢖͑Δঢ়ଶ(ྫ͑͹ ELB ʹ΋͋Δ)Ͱ͋Ε͹࢖͑͹͜Εࣗମ͸ղܾՄೳ • NGINX ࢖ͬͯ·͢ݟ͍ͨ৔߹͸ϞδϡʔϧೖΕΔͱͦΕ͚ͩͰར༻Մೳ • ͱ͸͍͑લड़ͷ੩తϑΝΠϧΞΫηεͷͨΊʹ Node αʔόʔʹૄ௨ͯ͠ ͠·͏݅͸ղܾ͠ͳ͍ͷͰผ్ରԠ͕ඞཁ

Slide 33

Slide 33 text

ͦͷଞΠϯϑϥվળ఺ • ͦͷଞߟ͑Δ͜ͱɺ࣮ࡍͷ΍Γํ͸ʁ • GitHub master ΁ͷ push ܖػͰͷ Code Build -> S3 Ξοϓϩʔυ → ECS / EB ͱ͔͕ݱ࣮తͳϑϩʔʹ(গ͠खؒ) • Universal Application ͷ৔߹ϛεΔͱ HTML ʹϢʔβʔ৘ใ͕৐Δͷ ͰɺΞηοτΛ֎ʹಀ͕ͨ͠Β͍ͬͦ s-max-age=0 Ͱ΋ྑ͍(࠶ܝ)

Slide 34

Slide 34 text

͓ΘΓʹ

Slide 35

Slide 35 text

఻͍͑ͨ͜ͱ 1. Universal Application ͸͋͘·Ͱ΋ SPA ͷԆ௕ͱߟ͑Α͏

Slide 36

Slide 36 text

఻͍͑ͨ͜ͱ 1. Universal Application ͸͋͘·Ͱ΋ SPA ͷԆ௕ͱߟ͑Α͏ 2. ࡶͳ CD ؀ڥ͸ߏங͠΍ͯ͘͢ࡶ͚ͩͲසൟͳσϓϩΠΛߦ͏৔߹΍ Ϣʔβʔ਺͕૿͑ͯ͘Δͱ໰୊ʹͳΔͷͰվળ͠Α͏

Slide 37

Slide 37 text

఻͍͑ͨ͜ͱ 1. Universal Application ͸͋͘·Ͱ΋ SPA ͷԆ௕ͱߟ͑Α͏ 2. ࡶͳ CD ؀ڥ͸ߏங͠΍ͯ͘͢ࡶ͚ͩͲසൟͳσϓϩΠΛߦ͏৔߹΍ Ϣʔβʔ਺͕૿͑ͯ͘Δͱ໰୊ʹͳΔͷͰվળ͠Α͏ 3. ϑϩϯτΤϯυΤϯδχΞ͔ΒʮNuxt.js ΍ Next.js Ͱ SSR ΍Γͨ ͍ʯͱ͍͏ཁ๬͕དྷͨ৔߹ɺNode αʔόʔͰ͋Δ͜ͱ(=ηΩϡϦ ςΟ΍ෛՙ)͚ͩʹ஫ҙ͕޲͍͍ͯΔՄೳੑ͕͋ΔͷͰ஫ҙ͠Α͏