SvelteJapanOnlineMeetup#2_SvelteKitアプリケーションのモニタリングを考える

Transcript

1. SvelteKitΞϓϦέʔγϣϯͷ ϞχλϦϯάΛߟ͑Δ -AWS Amplify্ͷSSRͳSvelteKitͷߏ੒ྫ- Svelte Japan Online Meetup#2 @naoketa
2. ࣗݾ঺հ X/Twitter: @naoketa Github: @naoketa Blog: https://naoketa.net
3. ϑϩϯτΤϯυͷϞχλϦϯά΍؂ࢹͬͯͲ͏͞Εͯ·͔͢ʁ
4. • ΍Γํ͸ϝϯόʔ΍ମ੍ɺѻ͏ϏδωεɺΞϓϦέʔγϣϯʹΑ༷ͬͯʑɻ • ϝϯόʔ΍ମ੍ • (ྫ)όοΫΤϯυ/ϑϩϯτΤϯυͷϝϯόʔ͕ͦΕͧΕݟ͍ͯΔɻΫϩεϑΝϯΫγϣφϧͳνʔϜͰݟ ͍ͯΔɻSREνʔϜ͕ݟ͍ͯΔɻetc • ѻ͏Ϗδωε/ΞϓϦέʔγϣϯ • (ྫ)αʔϏε͕ࢭ·Δ͜ͱͰϏδωεӨڹ͕େ͖͍ɻฏ೔೔தଳ͔͠࢖Θͳ͍ɻetc • ͲΜͳ໨తͰԿΛϞχλϦϯά͢Δ΂͖͔ɻ ϑϩϯτΤϯυͷϞχλϦϯά΍؂ࢹͬͯͲ͏͞Εͯ·͔͢ʁ
5. ϑϩϯτΤϯυͷϞχλϦϯάͷ໨త • ໨త • Ϣʔβ͔Βݟͯʮಈ͖ଓ͚Δ͜ͱ で ͸ͳ͘ɺૉૣ͘ϩʔ ド ͞ΕΔ͜ͱʯ͕࠷ऴΰʔϧ • ղܾ͍ͨ͠՝୊ • ϑϩϯτΤϯυͰ͸ಈ࡞؀ڥ͕όϥόϥ(୺຤ɺϒϥ΢βɺωοτϫʔΫetc)ɻ • શύλʔϯֻ͚߹Θͤͯςετ͢Δͷ͸ෆՄೳɻ࣮ࡍͷϢʔβͷ؀ڥͰΰʔϧΛຬͨͤΔͷ ͔νΣοΫ͕೉͍͠ɻ • όάใࠂ͕͋ͬͯ΋ͳ͔ͥ࠶ݱ͠ͳ͍ɻ͓·؀ɻ • ϑϩϯτΤϯυ͔ΒόοΫΤϯυ·ͰΤϯυπʔΤϯυͰ؂ࢹ͍͕ͨ͠ɺϑϩϯτΤϯυ͸ ޙखʹपΓ͕ͪɻ (ࢀߟ)O’Reilly Japan, Incʮೖ໳ ؂ࢹ ―ϞμϯͳϞχλϦϯάͷͨΊͷσβΠϯύλʔϯʯ
6. ϑϩϯτΤϯυͷϞχλϦϯάͷೋͭͷΞϓϩʔν • ϦΞϧϢʔβ؂ࢹ (࣮ࡍͷϢʔβར༻ͷ؂ࢹ) • ύϑΥʔϚϯε؂ࢹɿ࣮ࡍͷϢʔβ͔Βͷݟ͑ํͷύϑΥʔϚϯεΛ؂ࢹ • Τϥʔ؂ࢹɿ࣮ࡍͷϢʔβͷϒϥ΢β্Ͱൃੜͨ͠ΤϥʔΛ؂ࢹ • γϯηςΟοΫ؂ࢹ (ਓҝతͳϦΫΤετΛ࢖ͬͨ؂ࢹ) • URLࢮ׆؂ࢹɿಛఆͷΤϯυϙΠϯτ͕׆͖͍ͯΔ͜ͱͷ؂ࢹ • γφϦΦ؂ࢹɿWebαΠτͷॏཁͳಋઢ͕ػೳ͍ͯ͠Δ͜ͱͷ؂ࢹ (ࢀߟ)O’Reilly Japan, Incʮೖ໳ ؂ࢹ ―ϞμϯͳϞχλϦϯάͷͨΊͷσβΠϯύλʔϯʯ
7. Ͳ͏΍ͬͯϞχλϦϯά͢Δ͔ʁ • πʔϧυϦϒϯͰߟ͑ͳ͍ • πʔϧͰऔΕΔ͔ΒͱແବͳϝτϦΫεΛऔͬͯ΋ϊΠζɻ • ʮࠓ࢖ͬͯΔπʔϧͩͱऔΕͳ͍͔Βɻɻʯ͸ຊ຤స౗ɻ • ඞཁͳ΋ͷΛ૊Έ߹ΘͤՄೳʹ͢Δ • ΞϓϦέʔγϣϯ΋ཉ͍͠৘ใ΋؂ࢹπʔϧ΋ਐԽ͍ͯ͘͠ɻ • πʔϧΛӡ༻͢ΔதͰ૊Έ׵͑ͯ௕ظతʹվળ͍ͯ͘͠ɻ (ࢀߟ)O’Reilly Japan, Incʮೖ໳ ؂ࢹ ―ϞμϯͳϞχλϦϯάͷͨΊͷσβΠϯύλʔϯʯ
8. ͓୊ɿAmplifyͰϗετ͢ΔSvelteKitΞϓϦέʔγϣϯͷϞχλϦϯά • SSRΛؚΉSvelteKitͳΞϓϦέʔγϣϯΛྫʹɺAmplifyͰϗεςΟϯάͯ͠ϞχλϦϯά Lambda@Edge S3 CloudFront Amplify Github Developer User git push amplify cli AWS؅ཧ(Πϝʔδ) "84಺෦ͰσϓϩΠ؅ཧ͞ΕΔϦιʔε
   ˞࣮ࡍͷϦιʔε͸ར༻ऀ͔Βݟ͑ͳ͍ͨΊɺ
   ࣮ࡍʹ͸-BNCEB!&EHFͰ͸ͳ͍Մೳੑ͋Γ
   Amplifyͷߏ੒Πϝʔδ SSR౳ ੩తϑΝΠϧऔಘ౳
9. (ࢀߟ) 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/
10. AmplifyͰϗετ͢ΔSvelteKitΞϓϦέʔγϣϯͷϞχλϦϯά • SSRΛؚΉSvelteKitͳΞϓϦέʔγϣϯΛྫʹɺAmplifyͰϗεςΟϯάͯ͠ϞχλϦϯά Amplify User CloudWatch Alarm CloudWatch Logs CloudWatch Metrics CloudWatch RUM Synthetic Canary Slack౳ AWS ChatBot SSR΍APIͷϩΪϯά/ϝτϦΫε ϦΞϧϢʔβ؂ࢹ γϯηςΟοΫ؂ࢹ ϞχλϦϯάͷߏ੒Πϝʔδ
11. AmplifyͰϗετ͢ΔSvelteKitΞϓϦέʔγϣϯͷϞχλϦϯά • SSRΛؚΉSvelteKitͳΞϓϦέʔγϣϯΛྫʹɺAmplifyͰϗεςΟϯάͯ͠ϞχλϦϯά Amplify User CloudWatch Alarm CloudWatch Logs CloudWatch Metrics CloudWatch RUM Synthetic Canary Slack౳ AWS ChatBot SSR΍APIͷϩΪϯά/ϝτϦΫε ϦΞϧϢʔβ؂ࢹ γϯηςΟοΫ؂ࢹ ϞχλϦϯάͷߏ੒Πϝʔδ
12. CloudWatch RUMΛ࢖ͬͨϦΞϧϢʔβ؂ࢹ • ύϑΥʔϚϯε؂ࢹɿ࣮ࡍͷϢʔβ৘ใΛ΋ͱʹϩʔυ࣌ؒ΍Core Web VitalsΛ͸͡ΊΤϯυϢʔβͷϒϥ΢β্ͷύϑΥʔ Ϛϯε৘ใΛऔಘɻ • Τϥʔ؂ࢹɿJSΤϥʔ΋औಘͰ͖Δ͕minify͞ΕͨελοΫτϨʔεΛιʔεϚοϓͰม׵౳͸೉͍͠ɻྫ֎࣌ʹ͸ࣗલͰΧ ελϜΠϕϯτ࣮૷΋ݕ౼ɻ
13. CloudWatch RUMΛ࢖ͬͨϦΞϧϢʔβ؂ࢹ • CloudWatch RUMͰग़ྗ͞ΕΔεχϖοτϕʔεͰίϯϙʔωϯτͱͯ͠औΓࠐΈɻ
14. (࠶ܝ)AmplifyͰϗετ͢ΔSvelteKitΞϓϦέʔγϣϯͷϞχλϦϯά • SSRΛؚΉSvelteKitͳΞϓϦέʔγϣϯΛྫʹɺAmplifyͰϗεςΟϯάͯ͠ϞχλϦϯά Amplify User CloudWatch Alarm CloudWatch Logs CloudWatch Metrics CloudWatch RUM Synthetic Canary Slack౳ AWS ChatBot SSR΍APIͷϩΪϯά/ϝτϦΫε ϦΞϧϢʔβ؂ࢹ γϯηςΟοΫ؂ࢹ ϞχλϦϯάͷߏ੒Πϝʔδ
15. Synthetics CanaryΛ࢖ͬͨγϯηςΟοΫ؂ࢹ • URLࢮ׆؂ࢹɿPuppeteerϕʔεͷNode.jsͳLambdaΛఆظతʹ࣮ߦͯ͠ର৅ΤϯυϙΠϯτΛ؂ࢹ • γφϦΦ؂ࢹɿPuppeteerͷίʔυ͔Βը໘ભҠΛͤͯ͞؂ࢹ
16. (࠶ܝ)AmplifyͰϗετ͢ΔSvelteKitΞϓϦέʔγϣϯͷϞχλϦϯά • SSRΛؚΉSvelteKitͳΞϓϦέʔγϣϯΛྫʹɺAmplifyͰϗεςΟϯάͯ͠ϞχλϦϯά Amplify User CloudWatch Alarm CloudWatch Logs CloudWatch Metrics CloudWatch RUM Synthetic Canary Slack౳ AWS ChatBot SSR΍APIͷϩΪϯά/ϝτϦΫε ϦΞϧϢʔβ؂ࢹ γϯηςΟοΫ؂ࢹ ϞχλϦϯάͷߏ੒Πϝʔδ
17. SSR΍API෦෼ͷϩΪϯά/ϝτϦΫε • ಺෦తʹLambda@Edge͕ग़ྗ͢ΔSSR΍APIͷඪ४ग़ྗͷϩάΛऩू • ͦͷଞ4xx/5xxεςʔλείʔυͳͲͷϝτϦΫε΋ಉ༷ʹऩू
18. ͍͞͝ʹ • ಛʹRUMͳͲ৭ʑͳϝτϦΫε͕औΓ΍͘͢ͳͬͨҰํͰɺϞχλϦϯάͯ͠ରॲͰ͖Δϝϯ όʔͷϦιʔε͸มΘΒͳ͍ɻΞϥʔτ͸ඞཁ࠷௿ݶʹߜͬͯ໨తΛݟ௚͢͜ͱ͕ඞཁɻ • ଈ࣌ɾ୹ظతʹඞཁͳ৘ใ͔ɺ௕ظతʹඞཁͳ৘ใ͔ɻ • Amplify HostingͷSvelteKitͷSSR͸΋͏গ͠ӡ༻ͯ͠Έͯੑೳ໘Λࢼ͍ͨ͠ɻ —- • օ༷ͷSvelteKitӡ༻࣌ͷϞχλϦϯάʹ͍ͭͯɺͲΜͳ໨తͰԿΛݟ͍ͯΔ͔ɺۤ࿑ͳͲͳͲ ͝ҙݟ͍͖͍ͨͩͨͰ͢ʂ