Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

2019年07月22日に #awswakaran_tokyo でのセッションスライドです。

More Decks by potato4d(Hanatani Takuma)

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. SPA / Universal Application ͷ͓͞Β͍

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Α͋͘Δ SPA / SSR ͷߏஙྫ

    View full-size slide

  9. Α͋͘Δ SPA ͷߏ੒ਤ

    View full-size slide

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

    View full-size slide

  11. Α͋͘Δ SPA ͷߏ੒ਤ
    ಺෦αʔόʔͷߏ੒͸লུ
    ࠷ѱ&$୆Ͱ΋࠶ݱՄೳ

    41"΍੩తϑΝΠϧ͸
    શͯ$'ˠ4Ͱ഑৴

    View full-size slide

  12. Universal Application ͷ৔߹

    View full-size slide

  13. Universal Application Ͱ΍Γ͕ͪͳਤ

    View full-size slide

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

    View full-size slide

  15. Universal Application Ͱ΍Γ͕ͪͳਤ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. Universal Application Ͱ΍Γ͕ͪͳਤ

    View full-size slide

  24. վળ͞Εͨ Universal Application ͷߏ੒

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide