Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Universal Application にありがちな LB ガチャ問題を解消する #aw...
Search
potato4d(Takuma HANATANI)
July 22, 2019
Technology
6
2.9k
Universal Application にありがちな LB ガチャ問題を解消する #awswakaran_tokyo / Resolve LB mistake in Universal Application
2019年07月22日に #awswakaran_tokyo でのセッションスライドです。
potato4d(Takuma HANATANI)
July 22, 2019
Tweet
Share
More Decks by potato4d(Takuma HANATANI)
See All by potato4d(Takuma HANATANI)
どうせキレイに書けない処理は逆にAIに書いてもらうほうが良い説 / #kyotojs 22
potato4d
3
410
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.3k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.9k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
7k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.3k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.7k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4.2k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
27k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.5k
Other Decks in Technology
See All in Technology
Preferred Networks (PFN) とLLM Post-Training チームの紹介 / 第4回 関東Kaggler会 スポンサーセッション
pfn
PRO
1
280
モダンな現場と従来型の組織——そこに生じる "不整合" を解消してこそチームがパフォーマンスを発揮できる / Team-oriented Organization Design 20250825
mtx2s
6
43k
モバイルアプリ研修
recruitengineers
PRO
5
1.4k
JavaScript 研修
recruitengineers
PRO
5
1.2k
ソフトウェア エンジニアとしての 姿勢と心構え
recruitengineers
PRO
22
11k
実運用で考える PGO
kworkdev
PRO
0
120
現場が抱える様々な問題は “組織設計上” の問題によって生じていることがある / Team-oriented Organization Design 20250827
mtx2s
7
62k
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
520
Postman MCP 関連機能アップデート / Postman MCP feature updates
yokawasa
1
210
Vault meets Kubernetes
mochizuki875
0
140
Devinを使ったモバイルアプリ開発 / Mobile app development with Devin
yanzm
0
210
シークレット管理だけじゃない!HashiCorp Vault でデータ暗号化をしよう / Beyond Secret Management! Let's Encrypt Data with HashiCorp Vault
nnstt1
2
120
Featured
See All Featured
Building an army of robots
kneath
306
46k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Speed Design
sergeychernyshev
32
1.1k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Why Our Code Smells
bkeepers
PRO
339
57k
Designing for Performance
lara
610
69k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Transcript
Universal Application ʹ͋Γ͕ͪͳ LB ΨνϟΛղফ͢Δ 2019.07.22 #awswakaran_tokyo Takuma HANATANI@ElevenBack
Profile • Takuma HANATANI (@potato4d) • ͱ͋ΔձࣾͷϑϩϯτΤϯυΤϯδχΞ & ݸਓࣄۀओ •
Co-Organizer at UIT / awswakaran.tokyo • Πϯϑϥࣄ • αʔόʔϨεपΓͷ AWS ͱ Firebase ͕͖͢ • GCP৮Βͳ͍͜ͱͳ͍͚ͲΑ͘Θ͔ΒΜ • ຊۀͷձࣾࣗࣾϓϥΠϕʔτΫϥυ • ڏແΤϐιʔυɿݖݶͷ߹Ͱ Cloud Formation ͕࣮ߦͰ͖ͣ Skype Ͱ ૬खͷϚωίϯͷ༷ࢠΛฉ͖ͳ͕ΒΠϯϑϥΛߏஙͨ͜͠ͱ͕͋Δ
ࠓ͢͜ͱ 1. SPA ͱ SSRɺ Universal Application ͷ͓͞Β͍ 2. Universal
Application ॳ৺ऀ͕Γ͕ͪͳΠϯϑϥߏ 3. ॳ৺ऀ͕Γ͕ͪͳΠϯϑϥߏʹ͓͚Δ LB Ψνϟͷͷհ 4. LB ΨνϟΛҾ͔ͳ͍ͨΊͷߏஙྫͷ͝հ
͡Ίʹ ࠓͷςʔϚ AWS, GCP, ͦΕҎ֎ͲΕͰ࠶ݱΛΈ͖ͯͨࣄͰ͢ɻ ͦͷͨΊ AWS ಛ༗ͷ෦ΛബΊ͍ͯ·͢ͷͰɺదٓ͝ར༻ͷαʔϏεʹಡΈ͔͍͑ͯͩ͘͞ɻ
SPA / Universal Application ͷ͓͞Β͍
Single Page Application • HTML / CSS / JavaScript ͷΈͰϑϩϯτΤϯυͷ
Web UI ΛऔΓѻ͏ٕज़ͷ ૯শ • ͬ͘͟Γ͍͏ͱΞϓϦέʔγϣϯαʔόʔ͕ HTML ͡Όͳͯ͘ JSON Λฦ͢ ੈք؍ʹ͓͚ΔϑϩϯτΤϯυ • શ෦ ΫϥΠΞϯτͷ JS Ͱඳը͢ΔͷͰΞΫηε͔࣌Βͷ div ͚ͩͷੈք؍ • Πϯϑϥతʹ͍͏ͱϑϩϯτΤϯυʹίϯϐϡʔςΟϯάϦιʔεΛΘͳ͍ ͷ͕ಛ
Universal Application (SSR/SPA) • SPA ͕ΫϥΠΞϯταΠυͰߦ͏ JavaScript ͷίʔυΛͦͷ··αʔόʔଆ࣮ ߦ͠ɺ݁Ռͷ HTML
Λαʔόʔ͔Βฦ٫͢Δɻ͚ͲҰճ HTML Λฦ٫ͨ͠Βͦ ͷޙ JS ΛಡΈࠐΜͰ SPA ͱͯ͠ಈ͘ • ຊจ͕ͦͷ··ϨϯμϦϯά͞ΕͨΓ OGP ΛಈతʹੜͰ͖ͨΓɺSEO/ιʔ γϟϧจ຺Ͱॏๅ͞ΕΔ΄͔ɺύϑΥʔϚϯε؍Ͱ࠾༻͞ΕΔ • ࠷ۙ Nuxt.js ͱ͔ Next.js ͱ͔ΦʔϧΠϯϫϯͳϑϨʔϜϫʔΫ͕ग़ͨ͜ͱʹ ΑͬͯɺͱΓ͋͑ͣ Universal ʹ͕ͨ͠Δਓ૿͖͍͑ͯͯΔ
Α͋͘Δ SPA / SSR ͷߏஙྫ
SPA ͷ߹
Α͋͘Δ SPA ͷߏਤ
Α͋͘Δ SPA ͷߏਤ 41"੩తϑΝΠϧ શͯ$'ˠ4Ͱ৴
Α͋͘Δ SPA ͷߏਤ ෦αʔόʔͷߏলུ ࠷ѱ&$Ͱ࠶ݱՄೳ 41"੩తϑΝΠϧ શͯ$'ˠ4Ͱ৴
Universal Application ͷ߹
Universal Application ͰΓ͕ͪͳਤ
ʊਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹಥવͷ੩త৴ͷফࣦɹʻ ʉ:?:?:?:?:?:?:?:?:?:?:ʉ
Universal Application ͰΓ͕ͪͳਤ
Universal Application ͰΓ͕ͪͳਤ ࡶʹ࡞Δͱ͜Μͳײ͡ʹͳΓ͕ͪ 443αʔόʔΛผͰߏங 41"Ͱͬͯͨόέοτফ໓ "1*ίʔϧ࣌ωοτϫʔΫΛܦ༝
Universal Application ͰΓ͕ͪͳਤ ࡶʹ࡞Δͱ͜Μͳײ͡ʹͳΓ͕ͪ 443αʔόʔΛผͰߏங 41"Ͱͬͯͨόέοτফ໓ "1*ίʔϧ࣌ωοτϫʔΫΛܦ༝ ෦αʔόʔͷߏলུ ࠷ѱ&$Ͱ࠶ݱՄೳ
੩త৴ϨΠϠͷফࣦ • SPA ։ൃͷ߹ϑΝΠϧΛόέοτʹΞοϓϩʔυ͢Δ͚ͩ • ٯʹݴ͏ͱͦΕ͔͠બࢶ͕ͳ͍ͷͰࣗಈతʹϕετϓϥΫςΟεʹ • Node.js αʔόʔʹϗεςΟϯάػೳ͕͋Δ͔Β͍͚ΔͱࢥͬͪΌ͏ •
࣮ࡍ CloudFront -> ALB or ELB -> App ͳΒͳ͍͜ͱ
੩త৴ϨΠϠͰࠔΔ͜ͱ • CloudFront Ͱ৴͞Ε͍ͯͳ͍߹ • ੩తϑΝΠϧͷͨΊʹαʔόʔ͕૿͑ΔՄೳੑ༗Γ • S3 Ͱ৴͞Ε͍ͯͳ͍߹ •
෦తʹΘΕ͍ͯΔ Node.js ͷϑΝΠϧ I/O ͳͲʹྑ͘ͳ͍͕͋ Δ߹ʹͦͷ··ίϯϐϡʔςΟϯάʹͭͳ͕ͬͯ͠·͏
੩త৴ϨΠϠͰࠔΔ͜ͱ • ͳʹΑΓ LB ɺ୯ҰΠϯελϯεͰλΠϛϯά࣍ୈͰΨνϟ͕ى͜Δ • CloudFront ͕લஈʹ͋Δ߹ɺSSR ࣌ʹچΠϯελϯεΛҾ͘ʹͳ͍ •
چϦιʔε CDN ʹ͋ΔͷͰ৽ΠϯελϯεʹΞΫηεͯ͠ͳ͠ • SSR ʹ৽ΠϯελϯεΛҾ͍ͨ߹ʹ͕ੜ͡Δ • CDN ʹͬͯͳ͍ JS ϑΝΠϧΛچΠϯελϯεʹಡΈʹߦͬͯ 404 • چ (HTML) → ৽(JS) ͱಡΈʹߦͬͨ߹Ͱ֬ͰΤϥʔͱͳΔ
ແରࡦͷ߹͜͏͍͏͜ͱ͕ى͜Δ͜ͱ
ରॲ๏
Δ͖͜ͱ • Node αʔόʔͰ੩తϑΝΠϧ৴ΛߦΘͳ͍ • ඞͣ S3 ʹΞοϓϩʔυ͢Δ • S3
ʹΓग़͞ͳ͍ߏΛ࡞Δਓ CF ͷΩϟογϡΛૢΕͳ͍͜ͱߟྀ • ͨͱ͑Γग़ͨ͠Β SSR αʔόʔ s-max-age 0 Ͱྑ͍ • ϏϧυϑΣʔζͱσϓϩΠϑΣʔζΛ͚ͯॱ൪ʹߦ͏ • ϏϧυϑΣʔζͰ S3 ʹΞοϓϩʔυͯ͠ΨνϟΛ͍Ͱ͔ΒσϓϩΠ͢Δ
Universal Application ͰΓ͕ͪͳਤ
վળ͞Εͨ Universal Application ͷߏ
վળ͞Εͨ Universal Application ͷߏ ੩త৴༻ͷόέοτΛ ༻ҙͯ͠৽چ྆ํΛอ࣋
վળ͞Εͨ Universal Application ͷߏ /PEFαʔόʔ )5.-Ҏ֎Λฦ٫͠ͳ͍ ੩త৴༻ͷόέοτΛ ༻ҙͯ͠৽چ྆ํΛอ࣋
վળ͞Εͨ Universal Application ͷߏ ੩త৴༻ͷόέοτΛ ༻ҙͯ͠৽چ྆ํΛอ࣋ /PEFαʔόʔ )5.-Ҏ֎Λฦ٫͠ͳ͍ ෦αʔόʔͷߏলུ ࠷ѱ&$Ͱ࠶ݱՄೳ
Nuxt.js ͷ߹ΞϓϦέʔγϣϯଆઃఆΛॻ͚ͩ͘Ͱ OK https://ja.nuxtjs.org/api/configuration-build/#publicpath
ͦͷଞΠϯϑϥվળ • VPC Θ͚ͯΔͷԿɺ API call ͷ࣌ʹ֎ग़ΔͷԿ • શڞ௨ίʔυͰઃఆͨ͠߹େମ͜͏ͳ͍͕ͬͯͪ •
ϑϨʔϜϫʔΫଆͰ͏ baseURL ΛΓସ͑ΒΕΔͷ͋Δ • e.g.) https://axios.nuxtjs.org/options#browserbaseurl • Unix socket Ͱͳ͍ݶΓ͋Μ·ΓΘΕͳ͍
ͦͷଞΠϯϑϥվળ • LB Ψνϟࣗମ sticky session ͰղܾՄೳʁ • εϥΠυ४උதʹ Twitter
Ͱͪΐ͏Ͳ͋ͬͨ • ͑Δঢ়ଶ(ྫ͑ ELB ʹ͋Δ)Ͱ͋Ε͑͜ΕࣗମղܾՄೳ • NGINX ͬͯ·͢ݟ͍ͨ߹ϞδϡʔϧೖΕΔͱͦΕ͚ͩͰར༻Մೳ • ͱ͍͑લड़ͷ੩తϑΝΠϧΞΫηεͷͨΊʹ Node αʔόʔʹૄ௨ͯ͠ ͠·͏݅ղܾ͠ͳ͍ͷͰผ్ରԠ͕ඞཁ
ͦͷଞΠϯϑϥվળ • ͦͷଞߟ͑Δ͜ͱɺ࣮ࡍͷΓํʁ • GitHub master ͷ push ܖػͰͷ Code
Build -> S3 Ξοϓϩʔυ → ECS / EB ͱ͔͕ݱ࣮తͳϑϩʔʹ(গ͠खؒ) • Universal Application ͷ߹ϛεΔͱ HTML ʹϢʔβʔใ͕Δͷ ͰɺΞηοτΛ֎ʹಀ͕ͨ͠Β͍ͬͦ s-max-age=0 Ͱྑ͍(࠶ܝ)
͓ΘΓʹ
͍͑ͨ͜ͱ 1. Universal Application ͋͘·Ͱ SPA ͷԆͱߟ͑Α͏
͍͑ͨ͜ͱ 1. Universal Application ͋͘·Ͱ SPA ͷԆͱߟ͑Α͏ 2. ࡶͳ CD
ڥߏஙͯ͘͢͠ࡶ͚ͩͲසൟͳσϓϩΠΛߦ͏߹ Ϣʔβʔ͕૿͑ͯ͘ΔͱʹͳΔͷͰվળ͠Α͏
͍͑ͨ͜ͱ 1. Universal Application ͋͘·Ͱ SPA ͷԆͱߟ͑Α͏ 2. ࡶͳ CD
ڥߏஙͯ͘͢͠ࡶ͚ͩͲසൟͳσϓϩΠΛߦ͏߹ Ϣʔβʔ͕૿͑ͯ͘ΔͱʹͳΔͷͰվળ͠Α͏ 3. ϑϩϯτΤϯυΤϯδχΞ͔ΒʮNuxt.js Next.js Ͱ SSR Γͨ ͍ʯͱ͍͏ཁ͕དྷͨ߹ɺNode αʔόʔͰ͋Δ͜ͱ(=ηΩϡϦ ςΟෛՙ)͚ͩʹҙ͕͍͍ͯΔՄೳੑ͕͋ΔͷͰҙ͠Α͏