Tweet
Tweet

Slide 1

Slide 1 text

SvelteKitΞϓϦέʔγϣϯͷ ϞχλϦϯάΛߟ͑Δ -AWS Amplify্ͷSSRͳSvelteKitͷߏ੒ྫ- Svelte Japan Online Meetup#2 @naoketa

Slide 2

Slide 2 text

ࣗݾ঺հ X/Twitter: @naoketa Github: @naoketa Blog: https://naoketa.net

Slide 3

Slide 3 text

ϑϩϯτΤϯυͷϞχλϦϯά΍؂ࢹͬͯͲ͏͞Εͯ·͔͢ʁ

Slide 4

Slide 4 text

• ΍Γํ͸ϝϯόʔ΍ମ੍ɺѻ͏ϏδωεɺΞϓϦέʔγϣϯʹΑ༷ͬͯʑɻ • ϝϯόʔ΍ମ੍ • (ྫ)όοΫΤϯυ/ϑϩϯτΤϯυͷϝϯόʔ͕ͦΕͧΕݟ͍ͯΔɻΫϩεϑΝϯΫγϣφϧͳνʔϜͰݟ ͍ͯΔɻSREνʔϜ͕ݟ͍ͯΔɻetc • ѻ͏Ϗδωε/ΞϓϦέʔγϣϯ • (ྫ)αʔϏε͕ࢭ·Δ͜ͱͰϏδωεӨڹ͕େ͖͍ɻฏ೔೔தଳ͔͠࢖Θͳ͍ɻetc • ͲΜͳ໨తͰԿΛϞχλϦϯά͢Δ΂͖͔ɻ ϑϩϯτΤϯυͷϞχλϦϯά΍؂ࢹͬͯͲ͏͞Εͯ·͔͢ʁ

Slide 5

Slide 5 text

ϑϩϯτΤϯυͷϞχλϦϯάͷ໨త • ໨త • Ϣʔβ͔Βݟͯʮಈ͖ଓ͚Δ͜ͱ で ͸ͳ͘ɺૉૣ͘ϩʔ ド ͞ΕΔ͜ͱʯ͕࠷ऴΰʔϧ • ղܾ͍ͨ͠՝୊ • ϑϩϯτΤϯυͰ͸ಈ࡞؀ڥ͕όϥόϥ(୺຤ɺϒϥ΢βɺωοτϫʔΫetc)ɻ • શύλʔϯֻ͚߹Θͤͯςετ͢Δͷ͸ෆՄೳɻ࣮ࡍͷϢʔβͷ؀ڥͰΰʔϧΛຬͨͤΔͷ ͔νΣοΫ͕೉͍͠ɻ • όάใࠂ͕͋ͬͯ΋ͳ͔ͥ࠶ݱ͠ͳ͍ɻ͓·؀ɻ • ϑϩϯτΤϯυ͔ΒόοΫΤϯυ·ͰΤϯυπʔΤϯυͰ؂ࢹ͍͕ͨ͠ɺϑϩϯτΤϯυ͸ ޙखʹपΓ͕ͪɻ (ࢀߟ)O’Reilly Japan, Incʮೖ໳ ؂ࢹ ―ϞμϯͳϞχλϦϯάͷͨΊͷσβΠϯύλʔϯʯ

Slide 6

Slide 6 text

ϑϩϯτΤϯυͷϞχλϦϯάͷೋͭͷΞϓϩʔν • ϦΞϧϢʔβ؂ࢹ (࣮ࡍͷϢʔβར༻ͷ؂ࢹ) • ύϑΥʔϚϯε؂ࢹɿ࣮ࡍͷϢʔβ͔Βͷݟ͑ํͷύϑΥʔϚϯεΛ؂ࢹ • Τϥʔ؂ࢹɿ࣮ࡍͷϢʔβͷϒϥ΢β্Ͱൃੜͨ͠ΤϥʔΛ؂ࢹ • γϯηςΟοΫ؂ࢹ (ਓҝతͳϦΫΤετΛ࢖ͬͨ؂ࢹ) • URLࢮ׆؂ࢹɿಛఆͷΤϯυϙΠϯτ͕׆͖͍ͯΔ͜ͱͷ؂ࢹ • γφϦΦ؂ࢹɿWebαΠτͷॏཁͳಋઢ͕ػೳ͍ͯ͠Δ͜ͱͷ؂ࢹ (ࢀߟ)O’Reilly Japan, Incʮೖ໳ ؂ࢹ ―ϞμϯͳϞχλϦϯάͷͨΊͷσβΠϯύλʔϯʯ

Slide 7

Slide 7 text

Ͳ͏΍ͬͯϞχλϦϯά͢Δ͔ʁ • πʔϧυϦϒϯͰߟ͑ͳ͍ • πʔϧͰऔΕΔ͔ΒͱແବͳϝτϦΫεΛऔͬͯ΋ϊΠζɻ • ʮࠓ࢖ͬͯΔπʔϧͩͱऔΕͳ͍͔Βɻɻʯ͸ຊ຤స౗ɻ • ඞཁͳ΋ͷΛ૊Έ߹ΘͤՄೳʹ͢Δ • ΞϓϦέʔγϣϯ΋ཉ͍͠৘ใ΋؂ࢹπʔϧ΋ਐԽ͍ͯ͘͠ɻ • πʔϧΛӡ༻͢ΔதͰ૊Έ׵͑ͯ௕ظతʹվળ͍ͯ͘͠ɻ (ࢀߟ)O’Reilly Japan, Incʮೖ໳ ؂ࢹ ―ϞμϯͳϞχλϦϯάͷͨΊͷσβΠϯύλʔϯʯ

Slide 8

Slide 8 text

͓୊ɿAmplifyͰϗετ͢ΔSvelteKitΞϓϦέʔγϣϯͷϞχλϦϯά • SSRΛؚΉSvelteKitͳΞϓϦέʔγϣϯΛྫʹɺAmplifyͰϗεςΟϯάͯ͠ϞχλϦϯά Lambda@Edge S3 CloudFront Amplify Github Developer User git push amplify cli AWS؅ཧ(Πϝʔδ) "84಺෦ͰσϓϩΠ؅ཧ͞ΕΔϦιʔε ˞࣮ࡍͷϦιʔε͸ར༻ऀ͔Βݟ͑ͳ͍ͨΊɺ ࣮ࡍʹ͸-BNCEB!&EHFͰ͸ͳ͍Մೳੑ͋Γ Amplifyͷߏ੒Πϝʔδ SSR౳ ੩తϑΝΠϧऔಘ౳

Slide 9

Slide 9 text

(ࢀߟ) 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/

Slide 10

Slide 10 text

AmplifyͰϗετ͢ΔSvelteKitΞϓϦέʔγϣϯͷϞχλϦϯά • SSRΛؚΉSvelteKitͳΞϓϦέʔγϣϯΛྫʹɺAmplifyͰϗεςΟϯάͯ͠ϞχλϦϯά Amplify User CloudWatch Alarm CloudWatch Logs CloudWatch Metrics CloudWatch RUM Synthetic Canary Slack౳ AWS ChatBot SSR΍APIͷϩΪϯά/ϝτϦΫε ϦΞϧϢʔβ؂ࢹ γϯηςΟοΫ؂ࢹ ϞχλϦϯάͷߏ੒Πϝʔδ

Slide 11

Slide 11 text

AmplifyͰϗετ͢ΔSvelteKitΞϓϦέʔγϣϯͷϞχλϦϯά • SSRΛؚΉSvelteKitͳΞϓϦέʔγϣϯΛྫʹɺAmplifyͰϗεςΟϯάͯ͠ϞχλϦϯά Amplify User CloudWatch Alarm CloudWatch Logs CloudWatch Metrics CloudWatch RUM Synthetic Canary Slack౳ AWS ChatBot SSR΍APIͷϩΪϯά/ϝτϦΫε ϦΞϧϢʔβ؂ࢹ γϯηςΟοΫ؂ࢹ ϞχλϦϯάͷߏ੒Πϝʔδ

Slide 12

Slide 12 text

CloudWatch RUMΛ࢖ͬͨϦΞϧϢʔβ؂ࢹ • ύϑΥʔϚϯε؂ࢹɿ࣮ࡍͷϢʔβ৘ใΛ΋ͱʹϩʔυ࣌ؒ΍Core Web VitalsΛ͸͡ΊΤϯυϢʔβͷϒϥ΢β্ͷύϑΥʔ Ϛϯε৘ใΛऔಘɻ • Τϥʔ؂ࢹɿJSΤϥʔ΋औಘͰ͖Δ͕minify͞ΕͨελοΫτϨʔεΛιʔεϚοϓͰม׵౳͸೉͍͠ɻྫ֎࣌ʹ͸ࣗલͰΧ ελϜΠϕϯτ࣮૷΋ݕ౼ɻ

Slide 13

Slide 13 text

CloudWatch RUMΛ࢖ͬͨϦΞϧϢʔβ؂ࢹ • CloudWatch RUMͰग़ྗ͞ΕΔεχϖοτϕʔεͰίϯϙʔωϯτͱͯ͠औΓࠐΈɻ

Slide 14

Slide 14 text

(࠶ܝ)AmplifyͰϗετ͢ΔSvelteKitΞϓϦέʔγϣϯͷϞχλϦϯά • SSRΛؚΉSvelteKitͳΞϓϦέʔγϣϯΛྫʹɺAmplifyͰϗεςΟϯάͯ͠ϞχλϦϯά Amplify User CloudWatch Alarm CloudWatch Logs CloudWatch Metrics CloudWatch RUM Synthetic Canary Slack౳ AWS ChatBot SSR΍APIͷϩΪϯά/ϝτϦΫε ϦΞϧϢʔβ؂ࢹ γϯηςΟοΫ؂ࢹ ϞχλϦϯάͷߏ੒Πϝʔδ

Slide 15

Slide 15 text

Synthetics CanaryΛ࢖ͬͨγϯηςΟοΫ؂ࢹ • URLࢮ׆؂ࢹɿPuppeteerϕʔεͷNode.jsͳLambdaΛఆظతʹ࣮ߦͯ͠ର৅ΤϯυϙΠϯτΛ؂ࢹ • γφϦΦ؂ࢹɿPuppeteerͷίʔυ͔Βը໘ભҠΛͤͯ͞؂ࢹ

Slide 16

Slide 16 text

(࠶ܝ)AmplifyͰϗετ͢ΔSvelteKitΞϓϦέʔγϣϯͷϞχλϦϯά • SSRΛؚΉSvelteKitͳΞϓϦέʔγϣϯΛྫʹɺAmplifyͰϗεςΟϯάͯ͠ϞχλϦϯά Amplify User CloudWatch Alarm CloudWatch Logs CloudWatch Metrics CloudWatch RUM Synthetic Canary Slack౳ AWS ChatBot SSR΍APIͷϩΪϯά/ϝτϦΫε ϦΞϧϢʔβ؂ࢹ γϯηςΟοΫ؂ࢹ ϞχλϦϯάͷߏ੒Πϝʔδ

Slide 17

Slide 17 text

SSR΍API෦෼ͷϩΪϯά/ϝτϦΫε • ಺෦తʹLambda@Edge͕ग़ྗ͢ΔSSR΍APIͷඪ४ग़ྗͷϩάΛऩू • ͦͷଞ4xx/5xxεςʔλείʔυͳͲͷϝτϦΫε΋ಉ༷ʹऩू

Slide 18

Slide 18 text

͍͞͝ʹ • ಛʹRUMͳͲ৭ʑͳϝτϦΫε͕औΓ΍͘͢ͳͬͨҰํͰɺϞχλϦϯάͯ͠ରॲͰ͖Δϝϯ όʔͷϦιʔε͸มΘΒͳ͍ɻΞϥʔτ͸ඞཁ࠷௿ݶʹߜͬͯ໨తΛݟ௚͢͜ͱ͕ඞཁɻ • ଈ࣌ɾ୹ظతʹඞཁͳ৘ใ͔ɺ௕ظతʹඞཁͳ৘ใ͔ɻ • Amplify HostingͷSvelteKitͷSSR͸΋͏গ͠ӡ༻ͯ͠Έͯੑೳ໘Λࢼ͍ͨ͠ɻ —- • օ༷ͷSvelteKitӡ༻࣌ͷϞχλϦϯάʹ͍ͭͯɺͲΜͳ໨తͰԿΛݟ͍ͯΔ͔ɺۤ࿑ͳͲͳͲ ͝ҙݟ͍͖͍ͨͩͨͰ͢ʂ