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
370
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.2k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.8k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
6.9k
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.6k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
26k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.5k
Other Decks in Technology
See All in Technology
はじめてのSDET / My first challenge as a SDET
bun913
1
250
ElixirがHW化され、最新CPU/GPU/NWを過去のものとする数万倍、高速+超省電力化されたWeb/動画配信/AIが動く日
piacerex
0
140
LLM とプロンプトエンジニアリング/チューターをビルドする / LLM, Prompt Engineering and Building Tutors
ks91
PRO
1
250
AIと開発者の共創: エージェント時代におけるAIフレンドリーなDevOpsの実践
bicstone
1
300
PicoRabbit: a Tiny Presentation Device Powered by Ruby
harukasan
PRO
2
200
Classmethod AI Talks(CATs) #21 司会進行スライド(2025.04.17) / classmethod-ai-talks-aka-cats_moderator-slides_vol21_2025-04-17
shinyaa31
0
570
AIコーディングの最前線 〜活用のコツと課題〜
pharma_x_tech
2
960
Running JavaScript within Ruby
hmsk
3
320
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
更新系と状態
uhyo
5
1.1k
Recap of Next - Google Cloud で実践する クラウドネイティブ最前線 / The Frontlines of Cloud-Native with Insights from Google Cloud
aoto
PRO
1
100
Road to Go Gem #rubykaigi
sue445
0
410
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1030
460k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Building Flexible Design Systems
yeseniaperezcruz
329
38k
Statistics for Hackers
jakevdp
798
220k
Gamification - CAS2011
davidbonilla
81
5.2k
How to train your dragon (web standard)
notwaldorf
90
6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
13
670
GraphQLとの向き合い方2022年版
quramy
46
14k
Designing for Performance
lara
608
69k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
104
19k
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 αʔόʔͰ͋Δ͜ͱ(=ηΩϡϦ ςΟෛՙ)͚ͩʹҙ͕͍͍ͯΔՄೳੑ͕͋ΔͷͰҙ͠Α͏