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.6k
Other Decks in Technology
See All in Technology
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
110
Create Ruby native extension gem with Go
sue445
0
130
はじめてのOSS開発からみえたGo言語の強み
shibukazu
3
970
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
490
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
220
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
1.1k
MagicPod導入から半年、オープンロジQAチームで実際にやったこと
tjoko
0
110
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
200
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
480
人工衛星のファームウェアをRustで書く理由
koba789
15
8.2k
💡Ruby 川辺で灯すPicoRubyからの光
bash0c7
0
120
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Designing for Performance
lara
610
69k
Embracing the Ebb and Flow
colly
87
4.8k
How to Ace a Technical Interview
jacobian
279
23k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Scaling GitHub
holman
463
140k
Faster Mobile Websites
deanohume
309
31k
BBQ
matthewcrist
89
9.8k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Rails Girls Zürich Keynote
gr2m
95
14k
Visualization
eitanlees
148
16k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
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 αʔόʔͰ͋Δ͜ͱ(=ηΩϡϦ ςΟෛՙ)͚ͩʹҙ͕͍͍ͯΔՄೳੑ͕͋ΔͷͰҙ͠Α͏