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
SvelteJapanOnlineMeetup#2_SvelteKitアプリケーションのモニタ...
Search
naoketa
March 22, 2024
Programming
1
74
SvelteJapanOnlineMeetup#2_SvelteKitアプリケーションのモニタリングを考える
naoketa
March 22, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
4.2k
Flatt Security XSS Challenge 解答・解説
flatt_security
0
1.1k
混沌とした例外処理とエラー監視に秩序をもたらす
morihirok
18
3.3k
AHC041解説
terryu16
0
550
自動で //nolint を挿入する取り組み / Gopher's Gathering
utgwkk
1
170
DevFest - Serverless 101 with Google Cloud Functions
tunmise
0
140
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
170
Lookerは可視化だけじゃない。UIコンポーネントもあるんだ!
ymd65536
1
140
はてなにおけるfujiwara-wareの活用やecspressoのCI/CD構成 / Fujiwara Tech Conference 2025
cohalz
3
3.2k
ゼロからの、レトロゲームエンジンの作り方
tokujiros
3
1.2k
時計仕掛けのCompose
mkeeda
1
200
Vue.jsでiOSアプリを作る方法
hal_spidernight
0
120
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
3
380
How to train your dragon (web standard)
notwaldorf
89
5.8k
A Modern Web Designer's Workflow
chriscoyier
693
190k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Being A Developer After 40
akosma
89
590k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Building Applications with DynamoDB
mza
93
6.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Facilitating Awesome Meetings
lara
51
6.2k
Gamification - CAS2011
davidbonilla
80
5.1k
Transcript
SvelteKitΞϓϦέʔγϣϯͷ ϞχλϦϯάΛߟ͑Δ -AWS Amplify্ͷSSRͳSvelteKitͷߏྫ- Svelte Japan Online Meetup#2 @naoketa
ࣗݾհ X/Twitter: @naoketa Github: @naoketa Blog: https://naoketa.net
ϑϩϯτΤϯυͷϞχλϦϯάࢹͬͯͲ͏͞Εͯ·͔͢ʁ
• Γํϝϯόʔମ੍ɺѻ͏ϏδωεɺΞϓϦέʔγϣϯʹΑ༷ͬͯʑɻ • ϝϯόʔମ੍ • (ྫ)όοΫΤϯυ/ϑϩϯτΤϯυͷϝϯόʔ͕ͦΕͧΕݟ͍ͯΔɻΫϩεϑΝϯΫγϣφϧͳνʔϜͰݟ ͍ͯΔɻSREνʔϜ͕ݟ͍ͯΔɻetc • ѻ͏Ϗδωε/ΞϓϦέʔγϣϯ •
(ྫ)αʔϏε͕ࢭ·Δ͜ͱͰϏδωεӨڹ͕େ͖͍ɻฏதଳ͔͠Θͳ͍ɻetc • ͲΜͳతͰԿΛϞχλϦϯά͢Δ͖͔ɻ ϑϩϯτΤϯυͷϞχλϦϯάࢹͬͯͲ͏͞Εͯ·͔͢ʁ
ϑϩϯτΤϯυͷϞχλϦϯάͷత • త • Ϣʔβ͔Βݟͯʮಈ͖ଓ͚Δ͜ͱ で ͳ͘ɺૉૣ͘ϩʔ ド ͞ΕΔ͜ͱʯ͕࠷ऴΰʔϧ •
ղܾ͍ͨ͠՝ • ϑϩϯτΤϯυͰಈ࡞ڥ͕όϥόϥ(ɺϒϥβɺωοτϫʔΫetc)ɻ • શύλʔϯֻ͚߹Θͤͯςετ͢ΔͷෆՄೳɻ࣮ࡍͷϢʔβͷڥͰΰʔϧΛຬͨͤΔͷ ͔νΣοΫ͕͍͠ɻ • όάใࠂ͕͋ͬͯͳ͔ͥ࠶ݱ͠ͳ͍ɻ͓·ɻ • ϑϩϯτΤϯυ͔ΒόοΫΤϯυ·ͰΤϯυπʔΤϯυͰࢹ͍͕ͨ͠ɺϑϩϯτΤϯυ ޙखʹपΓ͕ͪɻ (ࢀߟ)O’Reilly Japan, Incʮೖ ࢹ ―ϞμϯͳϞχλϦϯάͷͨΊͷσβΠϯύλʔϯʯ
ϑϩϯτΤϯυͷϞχλϦϯάͷೋͭͷΞϓϩʔν • ϦΞϧϢʔβࢹ (࣮ࡍͷϢʔβར༻ͷࢹ) • ύϑΥʔϚϯεࢹɿ࣮ࡍͷϢʔβ͔Βͷݟ͑ํͷύϑΥʔϚϯεΛࢹ • Τϥʔࢹɿ࣮ࡍͷϢʔβͷϒϥβ্Ͱൃੜͨ͠ΤϥʔΛࢹ • γϯηςΟοΫࢹ
(ਓҝతͳϦΫΤετΛͬͨࢹ) • URLࢮ׆ࢹɿಛఆͷΤϯυϙΠϯτ͕׆͖͍ͯΔ͜ͱͷࢹ • γφϦΦࢹɿWebαΠτͷॏཁͳಋઢ͕ػೳ͍ͯ͠Δ͜ͱͷࢹ (ࢀߟ)O’Reilly Japan, Incʮೖ ࢹ ―ϞμϯͳϞχλϦϯάͷͨΊͷσβΠϯύλʔϯʯ
Ͳ͏ͬͯϞχλϦϯά͢Δ͔ʁ • πʔϧυϦϒϯͰߟ͑ͳ͍ • πʔϧͰऔΕΔ͔ΒͱແବͳϝτϦΫεΛऔͬͯϊΠζɻ • ʮࠓͬͯΔπʔϧͩͱऔΕͳ͍͔Βɻɻʯຊసɻ • ඞཁͳͷΛΈ߹ΘͤՄೳʹ͢Δ •
ΞϓϦέʔγϣϯཉ͍͠ใࢹπʔϧਐԽ͍ͯ͘͠ɻ • πʔϧΛӡ༻͢ΔதͰΈ͑ͯظతʹվળ͍ͯ͘͠ɻ (ࢀߟ)O’Reilly Japan, Incʮೖ ࢹ ―ϞμϯͳϞχλϦϯάͷͨΊͷσβΠϯύλʔϯʯ
͓ɿAmplifyͰϗετ͢ΔSvelteKitΞϓϦέʔγϣϯͷϞχλϦϯά • SSRΛؚΉSvelteKitͳΞϓϦέʔγϣϯΛྫʹɺAmplifyͰϗεςΟϯάͯ͠ϞχλϦϯά Lambda@Edge S3 CloudFront Amplify Github Developer User
git push amplify cli AWSཧ(Πϝʔδ) "84෦ͰσϓϩΠཧ͞ΕΔϦιʔε ˞࣮ࡍͷϦιʔεར༻ऀ͔Βݟ͑ͳ͍ͨΊɺ ࣮ࡍʹ-BNCEB!&EHFͰͳ͍Մೳੑ͋Γ AmplifyͷߏΠϝʔδ SSR ੩తϑΝΠϧऔಘ
(ࢀߟ) AWS Amplify HostingͰNext.jsҎ֎SSRͰ͖ΔΑ͏ʹͳͬͨ • ैདྷͷNext.jsʹՃ͑ͯɺࡢ͔ΒSvelteKitͳͲҙͷSSRϑϨʔϜϫʔΫ͕ϗεςΟϯάՄೳʹɻ (ࢀߟ) https://aws.amazon.com/jp/blogs/news/introducing-support-for-hosting-any-ssr-app-on-aws-amplify-hosting/
AmplifyͰϗετ͢ΔSvelteKitΞϓϦέʔγϣϯͷϞχλϦϯά • SSRΛؚΉSvelteKitͳΞϓϦέʔγϣϯΛྫʹɺAmplifyͰϗεςΟϯάͯ͠ϞχλϦϯά Amplify User CloudWatch Alarm CloudWatch Logs CloudWatch
Metrics CloudWatch RUM Synthetic Canary Slack AWS ChatBot SSRAPIͷϩΪϯά/ϝτϦΫε ϦΞϧϢʔβࢹ γϯηςΟοΫࢹ ϞχλϦϯάͷߏΠϝʔδ
AmplifyͰϗετ͢ΔSvelteKitΞϓϦέʔγϣϯͷϞχλϦϯά • SSRΛؚΉSvelteKitͳΞϓϦέʔγϣϯΛྫʹɺAmplifyͰϗεςΟϯάͯ͠ϞχλϦϯά Amplify User CloudWatch Alarm CloudWatch Logs CloudWatch
Metrics CloudWatch RUM Synthetic Canary Slack AWS ChatBot SSRAPIͷϩΪϯά/ϝτϦΫε ϦΞϧϢʔβࢹ γϯηςΟοΫࢹ ϞχλϦϯάͷߏΠϝʔδ
CloudWatch RUMΛͬͨϦΞϧϢʔβࢹ • ύϑΥʔϚϯεࢹɿ࣮ࡍͷϢʔβใΛͱʹϩʔυ࣌ؒCore Web VitalsΛ͡ΊΤϯυϢʔβͷϒϥβ্ͷύϑΥʔ ϚϯεใΛऔಘɻ • ΤϥʔࢹɿJSΤϥʔऔಘͰ͖Δ͕minify͞ΕͨελοΫτϨʔεΛιʔεϚοϓͰม͍͠ɻྫ֎࣌ʹࣗલͰΧ ελϜΠϕϯτ࣮ݕ౼ɻ
CloudWatch RUMΛͬͨϦΞϧϢʔβࢹ • CloudWatch RUMͰग़ྗ͞ΕΔεχϖοτϕʔεͰίϯϙʔωϯτͱͯ͠औΓࠐΈɻ
(࠶ܝ)AmplifyͰϗετ͢ΔSvelteKitΞϓϦέʔγϣϯͷϞχλϦϯά • SSRΛؚΉSvelteKitͳΞϓϦέʔγϣϯΛྫʹɺAmplifyͰϗεςΟϯάͯ͠ϞχλϦϯά Amplify User CloudWatch Alarm CloudWatch Logs CloudWatch
Metrics CloudWatch RUM Synthetic Canary Slack AWS ChatBot SSRAPIͷϩΪϯά/ϝτϦΫε ϦΞϧϢʔβࢹ γϯηςΟοΫࢹ ϞχλϦϯάͷߏΠϝʔδ
Synthetics CanaryΛͬͨγϯηςΟοΫࢹ • URLࢮ׆ࢹɿPuppeteerϕʔεͷNode.jsͳLambdaΛఆظతʹ࣮ߦͯ͠ରΤϯυϙΠϯτΛࢹ • γφϦΦࢹɿPuppeteerͷίʔυ͔Βը໘ભҠΛͤͯ͞ࢹ
(࠶ܝ)AmplifyͰϗετ͢ΔSvelteKitΞϓϦέʔγϣϯͷϞχλϦϯά • SSRΛؚΉSvelteKitͳΞϓϦέʔγϣϯΛྫʹɺAmplifyͰϗεςΟϯάͯ͠ϞχλϦϯά Amplify User CloudWatch Alarm CloudWatch Logs CloudWatch
Metrics CloudWatch RUM Synthetic Canary Slack AWS ChatBot SSRAPIͷϩΪϯά/ϝτϦΫε ϦΞϧϢʔβࢹ γϯηςΟοΫࢹ ϞχλϦϯάͷߏΠϝʔδ
SSRAPI෦ͷϩΪϯά/ϝτϦΫε • ෦తʹLambda@Edge͕ग़ྗ͢ΔSSRAPIͷඪ४ग़ྗͷϩάΛऩू • ͦͷଞ4xx/5xxεςʔλείʔυͳͲͷϝτϦΫεಉ༷ʹऩू
͍͞͝ʹ • ಛʹRUMͳͲ৭ʑͳϝτϦΫε͕औΓ͘͢ͳͬͨҰํͰɺϞχλϦϯάͯ͠ରॲͰ͖Δϝϯ όʔͷϦιʔεมΘΒͳ͍ɻΞϥʔτඞཁ࠷ݶʹߜͬͯతΛݟ͢͜ͱ͕ඞཁɻ • ଈ࣌ɾظతʹඞཁͳใ͔ɺظతʹඞཁͳใ͔ɻ • Amplify HostingͷSvelteKitͷSSR͏গ͠ӡ༻ͯ͠Έͯੑೳ໘Λࢼ͍ͨ͠ɻ —-
• օ༷ͷSvelteKitӡ༻࣌ͷϞχλϦϯάʹ͍ͭͯɺͲΜͳతͰԿΛݟ͍ͯΔ͔ɺۤ࿑ͳͲͳͲ ͝ҙݟ͍͖͍ͨͩͨͰ͢ʂ