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
76
SvelteJapanOnlineMeetup#2_SvelteKitアプリケーションのモニタリングを考える
naoketa
March 22, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
テストをしないQAエンジニアは何をしているか?
nealle
0
130
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
sappoRo.R #12 初心者セッション
kosugitti
0
230
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.8k
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1367
200k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
4 Signs Your Business is Dying
shpigford
182
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Why Our Code Smells
bkeepers
PRO
335
57k
Fireside Chat
paigeccino
34
3.2k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
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ӡ༻࣌ͷϞχλϦϯάʹ͍ͭͯɺͲΜͳతͰԿΛݟ͍ͯΔ͔ɺۤ࿑ͳͲͳͲ ͝ҙݟ͍͖͍ͨͩͨͰ͢ʂ