私がエッジを使う理由

Workers Teck Tolks in Osaka #1

Transcript

1. ࢲ͕ΤοδΛ࢖͏ཧ༝ Workers Tech Talks in Osaka #1 2024.02.26
2. contents - Web ΞϓϦέʔγϣϯߏஙͷมભ - Web γεςϜʹ͓͚Δඞཁͳॲཧͷछྨ - ܭࢉϦιʔεͷ࠷దԽ - Edge computing ͷ׆༻ - Cloudflare Workers(Pages)ͷ࣮ྫ - ஫ҙ఺ - ·ͱΊ 2
3. Web ΞϓϦέʔγϣϯ ߏஙͷมભ 1 3
4. 2010೥ࠒ·ͰͷओྲྀWebΞϓϦέʔγϣϯߏங 4
5. 2010೥ࠒ·ͰͷओྲྀWebΞϓϦέʔγϣϯߏங 5 SSR͕ओྲྀ
6. “ 2010೥ա͔͗Β WebϑϩϯτΤϯυϑϨʔϜϫʔΫ͓ ΑͼϥΠϒϥϦͷొ৔ 6
7. Anguler, React.jsΛൽ੾Γʹଓʑͱొ৔ 7
8. View MVCͰ͍͏V(View)ͷ෦෼͚ͩΛผΞʔΩςΫνϟ͕
 ୲͏Α͏ʹมԽ͍ͯ͘͠ 8 WebΞϓϦέʔγϣϯ WebΞϓϦέʔγϣϯ Controller, Model
9. “ ϑϩϯτΤϯυͷॏཁੑ͕ු͖ூΓʹ ͳ͍͖ͬͯΞʔΩςΫνϟ͕ੜ·ΕΔ ͱಉ࣌ʹ໾ׂͷ෼཭͕ٸ଎ʹਐΉ 9
10. Web γεςϜʹ͓͚Δ ඞཁͳॲཧͷछྨ 2 10
11. ओͳॲཧ 11 - (http)ϦΫΤετͷड෇ - ੩తίϯςϯπͷ഑৴ - ηογϣϯͷ؅ཧ - Ωϟογϡͷ؅ཧʢσʔλ΍ίϯςπͳͲ༷ʑʣ - ೝূ͓ΑͼೝՄ - ೖྗσʔλͷόϦσʔγϣϯ - (DBͳͲͷ)σʔλͷಡΈऔΓ΍࡞੒ͳͲͷ࣮ࢪ - ಈతίϯςϯπͷϨϯμϦϯά
12. - (http)ϦΫΤετͷड෇ - ੩తίϯςϯπͷ഑৴ - ηογϣϯͷ؅ཧ - Ωϟογϡͷ؅ཧʢσʔλ΍ίϯςπͳͲ༷ʑʣ - ೝূ͓ΑͼೝՄ - ೖྗσʔλͷόϦσʔγϣϯ - (DBͳͲͷ)σʔλͷಡΈऔΓ΍࡞੒ͳͲͷ࣮ࢪ - ಈతίϯςϯπͷϨϯμϦϯά - ΫϥΠΞϯτ΁ͷϨεϙϯεੜ੒ ओͳॲཧ 12 ϑϩϯτΤϯυ͕୲͏ओͳ໾ׂ
13. “ ϑϩϯτΤϯυ͸୺తʹݴ͑͹HTML ΛͲ͏ ”ϨϯμϦϯά ” ͢Δͷ͕ओͳ ࢓ࣄͰ͋Δ(͋͘·ͰγεςϜత) 13
14. ܭࢉϦιʔεͷ࠷దԽ 3 14
15. SSRͱCSRͷಛ௃ SSR CSR ϨϯμϦϯάΛ ࣮ࢪ͢Δ৔ॴ αʔό ΫϥΠΞϯτ ϖʔδભҠͷ ௨৴ྔ HTMLͱϖʔδʹ ඞཁͳ੩తϑΝΠϧ ϖʔδʹඞཁͳσʔ λͷΈ ඞཁͳ࠷௿γεςϜ਺ 1 2 15
16. SSRͱCSRͷಛ௃ SSR CSR ϨϯμϦϯάΛ ࣮ࢪ͢Δ৔ॴ αʔό ΫϥΠΞϯτ ϖʔδભҠͷ ௨৴ྔ HTMLͱϖʔδʹ ඞཁͳ੩తϑΝΠϧ ϖʔδʹඞཁͳσʔ λͷΈ ඞཁͳ࠷௿γεςϜ਺ 1 2 16 αʔό͚ͩͷҰۃूதͷܭࢉϦιʔεͰ͸ͳ͘ɺ
 ΫϥΠΞϯτΛ࢖ͬͨܭࢉϦιʔεΛ෼ࢄ͢Δ఺Ͱ͸👍
17. SSRͱCSRͷಛ௃ SSR CSR ϨϯμϦϯάΛ ࣮ࢪ͢Δ৔ॴ αʔό ΫϥΠΞϯτ ϖʔδભҠͷ ௨৴ྔ HTMLͱϖʔδʹ ඞཁͳ੩తϑΝΠϧ ϖʔδʹඞཁͳσʔ λͷΈ ඞཁͳ࠷௿γεςϜ਺ 1 2 17 ௨৴ྔ͕Լ͕Δͷ͸👍
 Ͱ΋SEOͱ͔ݴΘΕΔͱ…
18. SSRͱCSRͷಛ௃ SSR CSR ϨϯμϦϯάΛ ࣮ࢪ͢Δ৔ॴ αʔό ΫϥΠΞϯτ ϖʔδભҠͷ ௨৴ྔ HTMLͱϖʔδʹ ඞཁͳ੩తϑΝΠϧ ϖʔδʹඞཁͳσʔ λͷΈ ඞཁͳ࠷௿γεςϜ਺ 1 2 18 ੩తͳϑΝΠϧ഑৴͚ͩͰߏஙͰ͖ͳ͍
 ৔߹͸γεςϜ਺͕૿͍͑ͯΔ👎
19. (ϑϩϯτΤϯυ)αʔόΛߏங͢Δͱ͍͏͜ͱ͸ ˕ ࢮ׆؂ࢹ ˕ ϩάج൫ͷߏங ˕ ৑௕Խ αʔόΛ༻ҙ͢Δͱ͍͏͜ͱ͸͜ΕΒ͕ ηοτͰ෇͍ͯ͘Δ😢 19
20. SSRͱCSRͷಛ௃ SSR CSR ϨϯμϦϯάΛ ࣮ࢪ͢Δ৔ॴ αʔό ΫϥΠΞϯτ ϖʔδભҠͷ ௨৴ྔ HTMLͱϖʔδʹ ඞཁͳ੩తϑΝΠϧ ϖʔδʹඞཁͳσʔ λͷΈ ඞཁͳ࠷௿γεςϜ਺ 1 2 20 CSRΑ͏ͳܭࢉϦιʔεΛ෼ࢄͤͭͭ͞ɺ
 SSRΑ͏ͳҰఆͨ͠αʔόܭࢉϦιʔεΛ֬อͯ͠ɺ
 αʔό਺(؂ࢹ)ΛۃݶʹݮΒ͍͍͢ͱ͜औΓ͕͍ͨ͠
21. લύʔτͰ಺༰(ৼΓฦΓ) 1. Web ΞϓϦέʔγϣϯߏஙͷมભ ύʔτ ϑϩϯτΤϯυͷॏཁੑ͕ු͖ூΓʹͳ͍͖ͬͯΞʔΩ ςΫνϟ͕ੜ·ΕΔͱಉ࣌ʹ໾ׂͷ෼཭͕ٸ଎ʹਐΉ 2. Web γεςϜʹ͓͚Δඞཁͳॲཧͷछྨ ύʔτ ϑϩϯτΤϯυ͸୺తʹݴ͑͹HTMLΛͲ͏ ”ϨϯμϦ ϯά ” ͢Δͷ͕ओͳ࢓ࣄͰ͋Δ(͋͘·ͰγεςϜత) 21
22. લύʔτͰ಺༰(ৼΓฦΓ) 1. Web ΞϓϦέʔγϣϯߏஙͷมભ ύʔτ ϑϩϯτΤϯυͷॏཁੑ͕ු͖ூΓʹͳ͍͖ͬͯΞʔΩ ςΫνϟ͕ੜ·ΕΔͱಉ࣌ʹ໾ׂͷ෼཭͕ٸ଎ʹਐΉ 2. Web γεςϜʹ͓͚Δඞཁͳॲཧͷछྨ ύʔτ ϑϩϯτΤϯυ͸୺తʹݴ͑͹HTMLΛͲ͏ ”ϨϯμϦ ϯά ” ͢Δͷ͕ओͳ࢓ࣄͰ͋Δ(͋͘·ͰγεςϜత) 22 ॏཁੑ͸Θ͔Δ͕࢓ࣄྔͱͷόϥϯε
23. “ ϑϩϯτΤϯυͷॏཁੑ΍໾ׂͱরΒ ͠߹Θͤͯ΋ϑϩϯτΤϯυͷαʔό ͱ͍͏ͷ͸Ͱ͖Δ͚ͩ༻ҙͨ͘͠ͳ͍ 23
24. Edge computing ͷ׆༻ 4 24
25. “ CDN(Contents Delivery Network)ͬͯ࢖ͬͯ·͔͢ʁ 25
26. 26 ੩తίϯςϯπͷߴ଎ͳ഑৴ Ϣʔβʔʹ͍ۙαʔόʔ͔Β ίϯςϯπΛ഑৴͢Δ ίϯςϯπͷΩϟογϡ ΦϦδϯͰੜ੒͞ΕΔಉҰ಺ ༰ΛΩϟογϡͯ͠഑৴͢Δ DDoS߈ܸͳͲ͔Βαʔό ʔΛอޢ͢Δ WAFͳͲΛ༻͍ͨηΩϡ ϦςΟڧԽ SSL/TLS΍http/3Λߦ͍ HTTPS௨৴ͷ࣮ݱ͢Δ HTTPS௨৴ͷޮ཰Խ D C W H CDNͷओͳ໾ׂ
27. 27 ੩తίϯςϯπͷߴ଎ͳ഑৴ Ϣʔβʔʹ͍ۙαʔόʔ͔Β ίϯςϯπΛ഑৴͢Δ ίϯςϯπͷΩϟογϡ ΦϦδϯͰੜ੒͞ΕΔಉҰ಺ ༰ΛΩϟογϡͯ͠഑৴͢Δ DDoS߈ܸͳͲ͔Βαʔό ʔΛอޢ͢Δ WAFͳͲΛ༻͍ͨηΩϡ ϦςΟڧԽ SSL/TLS΍http/3Λߦ͍ HTTPS௨৴ͷ࣮ݱ͢Δ HTTPS௨৴ͷޮ཰Խ D C W H CDNͷओͳ໾ׂ ಺༰͔Βݟͯ΋Θ͔Δ௨Γɺ΄΅ϑϩϯτΤϯυʹඞཁͳػೳ͕ ͋ΔαʔϏεͰ͋Δɻಛʹ্2ͭ͸਌࿨ੑ͕ඇৗʹߴ͍ɻ
28. CDN্Ͱ࣮ߦͤ͞ΔϓϩάϥϜΛ࣮ߦͤ͞Δ͜ͱ͕Մ ೳͳ΋ͷ͕ଘࡏ͢Δ 28 - Cloudflare Workers - Fastly Compute - Lambda@Edge - Deno Deploy ϓϩάϥϜΛ࣮ߦ͢Δͱ͍͏͜ͱ͸ɺ͜Ε͸ࠓ·Ͱͷα ʔό/ΫϥΠΞϯτͱ͸ҟͳΔܭࢉϦιʔεͰ͋Δɻ 28
29. ϑϩϯτΤϯυͷͨΊͷαʔϏε ͰܭࢉϦιʔε͕֬อͰ͖ͦ͏ 29 29
30. ͳΜͱ͔͜ͷCDN্Ͱ
 ϨϯμϦϯάͰ͖ͳ͍ʁ🤔 30 30
31. 31 🤝
32. 32 HonoXͰ΋
 ग़དྷΔ͔Βʂ
33. Remixͷಛ௃ It can run anywhere ͦͷ໊௨ΓͲ͜Ͱ΋ಈ͘ɻNext.jsΛ࢝Ίͱͨ͠ϑϩϯτΤϯυ ϑϨʔϜϫʔΫ͸Node.jsͷαʔόͷΈಈ࡞͢Δ͜ͱΛલఏͱ͠ ͍͕ͯͨɺRemix͸Node.js͚ͩͰͳ͘Cloudflare Workers্Ͱ ΋ಈ࡞͢Δͱ͍͏ಛ௃͕͋Δ Focused on web standards RemixΛ࢖༻͢Δ͜ͱͰWebඪ४ͱͳΔWebΞϓϦέʔγϣ ϯ͕ߏஙͰ͖Δಛ௃͕͋Δɻ https://remix.run
 33 33
34. Cloudflare Workers(Pages)ͷ࣮ྫ 5 34
35. 35 ৭ʑࢼߦࡨޡͯ͠Production࠾༻
36. “ ΤοδͰ͋ΔCloudflare Workers্Ͱ
 ϨϯμϦϯά͢ΔͨΊͷσʔλऔಘ͕ඞཁ Ͱ͋Δ🙋 36
37. RemixͰSSRΛ͢ΔͳΒ͹αʔόαΠυͰ
 ϨϯμϦϯά͢ΔͨΊͷσʔλ͕ඞཁ 37 TCP/IP http Remix͕௚઀DBΛࢀরͤͣ֎෦APIαʔόΛݺͿ৔߹ DBαʔό όοΫΤϯυ
 αʔό ϑϩϯτΤϯυ
 αʔό
38. Remix΋αʔόαΠυͷॲཧ͕
 ͋ΔͷʹAPIαʔόΛհ͢Δͷ͸
 ͪΐͬͱඍົͳ৔߹͸… 38 38
40. RemixͰSSRΛ͢ΔͨΊͷσʔλΛDB͔Β௚઀औಘ͢Δ 40 Remix͕௚઀DBΛࢀর͢Δ৔߹ DBαʔό όοΫΤϯυ
 αʔό ϑϩϯτΤϯυ
 αʔό TCP/IP
41. ৄ͍͠΍Γํ͸͜ͷهࣄͷԼͷํʹ͋Δ 41
42. 42 ؅ཧը໘ʹ࠾༻
43. 43 Ӷҙ࡞੒த ͍ۙ಺ʹϩʔϯν
44. ΋ͪΖΜϑϩϯτΤϯυ͚ͩ͡Όͳͯ͘
 όοΫΤϯυ΋΍Ζ͏ͱࢥ͑͹ग़དྷΔ 44 44
45. ஫ҙ఺ 6 45
46. ΤοδͰ ͳΜͰ΋ ग़དྷͦ͏͡Ό ͳ͍ʁ 46 46
47. “ 🙅 47
48. “ ५୔ʹܭࢉϦιʔε͕͋ΔΘ͚Ͱ͸ͳ͍ɻ
 ۃ୺ͳ࿩ɺಠࣗͷAIϞσϧΛಈ࡞ͤ͞Δͱ͍ ͏͜ͱ͸ෆՄೳɻͳͷͰγεςϜશମͰॏ͘ ͳ͍ϦιʔεΛ࢖͍͍ͨ࣌ʹ࢖͏ͱྑ͍ɻ 48 ※Cloudflare͕ࠓAI΋ؤுͬͯΔཧ༝͔΋Ͷ
49. ·ͱΊ 7 49
50. ·ͱΊ • ݱ࣌఺ͰEdge Computing͸े෼ʹ࣮༻ʹ଱͑͏Δ • ϑϩϯτΤϯυαʔό͕ඞཁ͔ࠓҰ౓ߟ͑ͯΈͯ ΄͍͠ • ΫϥΠΞϯτ/αʔό/ΤοδͱͲͷܭࢉϦιʔεΛ ࢖͏͔ࠓͷ࣌୅͸ٻΊΒΕͯΔ 50
51. Thank you! name: chimame / rito job: WebΤϯδχΞ field: Cloudflare, GCP, AWS, Ruby, Node.js, TypeScript, React, Next.js, Remix, Docker etc company: Goensגࣜձࣾ( https://about.goen-s.com ) twitter: @chimame_rt GitHub: chimame 51 Any questions?