私がエッジを使う理由

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

39. 39

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?