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 ガチャ問題を解消する #awswakaran_tokyo / Resolve LB mistake in Universal Application
Search
potato4d(Takuma HANATANI)
July 22, 2019
Technology
6
2.8k
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
230
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
1.8k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.7k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
6.7k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.1k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.5k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
3.7k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
25k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.2k
Other Decks in Technology
See All in Technology
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
ソフトウェアエンジニアリングの知見を活かして データ基盤をいい感じにする on Snowflake [MIERUNE BBQ #10]
mtpooh
2
150
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
エンジニア向け会社紹介資料
caddi_eng
14
220k
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
How to Think Like a Performance Engineer
csswizardry
4
590
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
470
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
18
2.6k
What's new in Ruby 2.0
geeforr
338
31k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
Embracing the Ebb and Flow
colly
81
4.3k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
The Mythical Team-Month
searls
217
43k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Making Projects Easy
brettharned
111
5.7k
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 αʔόʔͰ͋Δ͜ͱ(=ηΩϡϦ ςΟෛՙ)͚ͩʹҙ͕͍͍ͯΔՄೳੑ͕͋ΔͷͰҙ͠Α͏