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
360
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
Would you THINK such a demonstration interesting ?
shumpei3
1
110
いつも初心者向けの記事に助けられているので得意分野では初心者向けの記事を書きます
toru_kubota
2
250
AI AgentOps LT大会(2025/04/16) Algomatic伊藤発表資料
kosukeito
0
110
Startups On Rails 2025 @ Tropical on Rails
irinanazarova
0
240
Beyond {shiny}: The Future of Mobile Apps with R
colinfay
1
310
OPENLOGI Company Profile
hr01
0
62k
近年の PyCon 情勢から見た PyCon APAC のまとめ
terapyon
0
280
食べログが挑む!飲食店ネット予約システムで自動テスト無双して手動テストゼロを実現する戦略
hagevvashi
1
140
DETR手法の変遷と最新動向(CVPR2025)
tenten0727
2
920
Amazon S3 Tables + Amazon Athena / Apache Iceberg
okaru
0
230
自分の軸足を見つけろ
tsuemura
2
550
AWSLambdaMCPServerを使ってツールとMCPサーバを分離する
tkikuchi
1
1.2k
Featured
See All Featured
A better future with KSS
kneath
239
17k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Code Review Best Practice
trishagee
67
18k
How to train your dragon (web standard)
notwaldorf
91
6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Making Projects Easy
brettharned
116
6.1k
Typedesign – Prime Four
hannesfritz
41
2.6k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The Cult of Friendly URLs
andyhume
78
6.3k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
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 αʔόʔͰ͋Δ͜ͱ(=ηΩϡϦ ςΟෛՙ)͚ͩʹҙ͕͍͍ͯΔՄೳੑ͕͋ΔͷͰҙ͠Α͏