私がエッジを使う理由

Slide 1

Slide 1 text

ࢲ͕ΤοδΛ࢖͏ཧ༝ Workers Tech Talks in Osaka #1 2024.02.26

Slide 2

Slide 2 text

contents - Web ΞϓϦέʔγϣϯߏஙͷมભ - Web γεςϜʹ͓͚Δඞཁͳॲཧͷछྨ - ܭࢉϦιʔεͷ࠷దԽ - Edge computing ͷ׆༻ - Cloudflare Workers(Pages)ͷ࣮ྫ - ஫ҙ఺ - ·ͱΊ 2

Slide 3

Slide 3 text

Web ΞϓϦέʔγϣϯ ߏஙͷมભ 1 3

Slide 4

Slide 4 text

2010೥ࠒ·ͰͷओྲྀWebΞϓϦέʔγϣϯߏங 4

Slide 5

Slide 5 text

2010೥ࠒ·ͰͷओྲྀWebΞϓϦέʔγϣϯߏங 5 SSR͕ओྲྀ

Slide 6

Slide 6 text

“ 2010೥ա͔͗Β WebϑϩϯτΤϯυϑϨʔϜϫʔΫ͓ ΑͼϥΠϒϥϦͷొ৔ 6

Slide 7

Slide 7 text

Anguler, React.jsΛൽ੾Γʹଓʑͱొ৔ 7

Slide 8

Slide 8 text

View MVCͰ͍͏V(View)ͷ෦෼͚ͩΛผΞʔΩςΫνϟ͕  ୲͏Α͏ʹมԽ͍ͯ͘͠ 8 WebΞϓϦέʔγϣϯ WebΞϓϦέʔγϣϯ Controller, Model

Slide 9

Slide 9 text

“ ϑϩϯτΤϯυͷॏཁੑ͕ු͖ூΓʹ ͳ͍͖ͬͯΞʔΩςΫνϟ͕ੜ·ΕΔ ͱಉ࣌ʹ໾ׂͷ෼཭͕ٸ଎ʹਐΉ 9

Slide 10

Slide 10 text

Web γεςϜʹ͓͚Δ ඞཁͳॲཧͷछྨ 2 10

Slide 11

Slide 11 text

ओͳॲཧ 11 - (http)ϦΫΤετͷड෇ - ੩తίϯςϯπͷ഑৴ - ηογϣϯͷ؅ཧ - Ωϟογϡͷ؅ཧʢσʔλ΍ίϯςπͳͲ༷ʑʣ - ೝূ͓ΑͼೝՄ - ೖྗσʔλͷόϦσʔγϣϯ - (DBͳͲͷ)σʔλͷಡΈऔΓ΍࡞੒ͳͲͷ࣮ࢪ - ಈతίϯςϯπͷϨϯμϦϯά

Slide 12

Slide 12 text

- (http)ϦΫΤετͷड෇ - ੩తίϯςϯπͷ഑৴ - ηογϣϯͷ؅ཧ - Ωϟογϡͷ؅ཧʢσʔλ΍ίϯςπͳͲ༷ʑʣ - ೝূ͓ΑͼೝՄ - ೖྗσʔλͷόϦσʔγϣϯ - (DBͳͲͷ)σʔλͷಡΈऔΓ΍࡞੒ͳͲͷ࣮ࢪ - ಈతίϯςϯπͷϨϯμϦϯά - ΫϥΠΞϯτ΁ͷϨεϙϯεੜ੒ ओͳॲཧ 12 ϑϩϯτΤϯυ͕୲͏ओͳ໾ׂ

Slide 13

Slide 13 text

“ ϑϩϯτΤϯυ͸୺తʹݴ͑͹HTML ΛͲ͏ ”ϨϯμϦϯά ” ͢Δͷ͕ओͳ ࢓ࣄͰ͋Δ(͋͘·ͰγεςϜత) 13

Slide 14

Slide 14 text

ܭࢉϦιʔεͷ࠷దԽ 3 14

Slide 15

Slide 15 text

SSRͱCSRͷಛ௃ SSR CSR ϨϯμϦϯάΛ ࣮ࢪ͢Δ৔ॴ αʔό ΫϥΠΞϯτ ϖʔδભҠͷ ௨৴ྔ HTMLͱϖʔδʹ ඞཁͳ੩తϑΝΠϧ ϖʔδʹඞཁͳσʔ λͷΈ ඞཁͳ࠷௿γεςϜ਺ 1 2 15

Slide 16

Slide 16 text

SSRͱCSRͷಛ௃ SSR CSR ϨϯμϦϯάΛ ࣮ࢪ͢Δ৔ॴ αʔό ΫϥΠΞϯτ ϖʔδભҠͷ ௨৴ྔ HTMLͱϖʔδʹ ඞཁͳ੩తϑΝΠϧ ϖʔδʹඞཁͳσʔ λͷΈ ඞཁͳ࠷௿γεςϜ਺ 1 2 16 αʔό͚ͩͷҰۃूதͷܭࢉϦιʔεͰ͸ͳ͘ɺ  ΫϥΠΞϯτΛ࢖ͬͨܭࢉϦιʔεΛ෼ࢄ͢Δ఺Ͱ͸👍

Slide 17

Slide 17 text

SSRͱCSRͷಛ௃ SSR CSR ϨϯμϦϯάΛ ࣮ࢪ͢Δ৔ॴ αʔό ΫϥΠΞϯτ ϖʔδભҠͷ ௨৴ྔ HTMLͱϖʔδʹ ඞཁͳ੩తϑΝΠϧ ϖʔδʹඞཁͳσʔ λͷΈ ඞཁͳ࠷௿γεςϜ਺ 1 2 17 ௨৴ྔ͕Լ͕Δͷ͸👍  Ͱ΋SEOͱ͔ݴΘΕΔͱ…

Slide 18

Slide 18 text

SSRͱCSRͷಛ௃ SSR CSR ϨϯμϦϯάΛ ࣮ࢪ͢Δ৔ॴ αʔό ΫϥΠΞϯτ ϖʔδભҠͷ ௨৴ྔ HTMLͱϖʔδʹ ඞཁͳ੩తϑΝΠϧ ϖʔδʹඞཁͳσʔ λͷΈ ඞཁͳ࠷௿γεςϜ਺ 1 2 18 ੩తͳϑΝΠϧ഑৴͚ͩͰߏஙͰ͖ͳ͍  ৔߹͸γεςϜ਺͕૿͍͑ͯΔ👎

Slide 19

Slide 19 text

(ϑϩϯτΤϯυ)αʔόΛߏங͢Δͱ͍͏͜ͱ͸ ˕ ࢮ׆؂ࢹ ˕ ϩάج൫ͷߏங ˕ ৑௕Խ αʔόΛ༻ҙ͢Δͱ͍͏͜ͱ͸͜ΕΒ͕ ηοτͰ෇͍ͯ͘Δ😢 19

Slide 20

Slide 20 text

SSRͱCSRͷಛ௃ SSR CSR ϨϯμϦϯάΛ ࣮ࢪ͢Δ৔ॴ αʔό ΫϥΠΞϯτ ϖʔδભҠͷ ௨৴ྔ HTMLͱϖʔδʹ ඞཁͳ੩తϑΝΠϧ ϖʔδʹඞཁͳσʔ λͷΈ ඞཁͳ࠷௿γεςϜ਺ 1 2 20 CSRΑ͏ͳܭࢉϦιʔεΛ෼ࢄͤͭͭ͞ɺ  SSRΑ͏ͳҰఆͨ͠αʔόܭࢉϦιʔεΛ֬อͯ͠ɺ  αʔό਺(؂ࢹ)ΛۃݶʹݮΒ͍͍͢ͱ͜औΓ͕͍ͨ͠

Slide 21

Slide 21 text

લύʔτͰ಺༰(ৼΓฦΓ) 1. Web ΞϓϦέʔγϣϯߏஙͷมભ ύʔτ ϑϩϯτΤϯυͷॏཁੑ͕ු͖ூΓʹͳ͍͖ͬͯΞʔΩ ςΫνϟ͕ੜ·ΕΔͱಉ࣌ʹ໾ׂͷ෼཭͕ٸ଎ʹਐΉ 2. Web γεςϜʹ͓͚Δඞཁͳॲཧͷछྨ ύʔτ ϑϩϯτΤϯυ͸୺తʹݴ͑͹HTMLΛͲ͏ ”ϨϯμϦ ϯά ” ͢Δͷ͕ओͳ࢓ࣄͰ͋Δ(͋͘·ͰγεςϜత) 21

Slide 22

Slide 22 text

Slide 23

Slide 23 text

“ ϑϩϯτΤϯυͷॏཁੑ΍໾ׂͱরΒ ͠߹Θͤͯ΋ϑϩϯτΤϯυͷαʔό ͱ͍͏ͷ͸Ͱ͖Δ͚ͩ༻ҙͨ͘͠ͳ͍ 23

Slide 24

Slide 24 text

Edge computing ͷ׆༻ 4 24

Slide 25

Slide 25 text

“ CDN(Contents Delivery Network)ͬͯ࢖ͬͯ·͔͢ʁ 25

Slide 26

Slide 26 text

26 ੩తίϯςϯπͷߴ଎ͳ഑৴ Ϣʔβʔʹ͍ۙαʔόʔ͔Β ίϯςϯπΛ഑৴͢Δ ίϯςϯπͷΩϟογϡ ΦϦδϯͰੜ੒͞ΕΔಉҰ಺ ༰ΛΩϟογϡͯ͠഑৴͢Δ DDoS߈ܸͳͲ͔Βαʔό ʔΛอޢ͢Δ WAFͳͲΛ༻͍ͨηΩϡ ϦςΟڧԽ SSL/TLS΍http/3Λߦ͍ HTTPS௨৴ͷ࣮ݱ͢Δ HTTPS௨৴ͷޮ཰Խ D C W H CDNͷओͳ໾ׂ

Slide 27

Slide 27 text

27 ੩తίϯςϯπͷߴ଎ͳ഑৴ Ϣʔβʔʹ͍ۙαʔόʔ͔Β ίϯςϯπΛ഑৴͢Δ ίϯςϯπͷΩϟογϡ ΦϦδϯͰੜ੒͞ΕΔಉҰ಺ ༰ΛΩϟογϡͯ͠഑৴͢Δ DDoS߈ܸͳͲ͔Βαʔό ʔΛอޢ͢Δ WAFͳͲΛ༻͍ͨηΩϡ ϦςΟڧԽ SSL/TLS΍http/3Λߦ͍ HTTPS௨৴ͷ࣮ݱ͢Δ HTTPS௨৴ͷޮ཰Խ D C W H CDNͷओͳ໾ׂ ಺༰͔Βݟͯ΋Θ͔Δ௨Γɺ΄΅ϑϩϯτΤϯυʹඞཁͳػೳ͕ ͋ΔαʔϏεͰ͋Δɻಛʹ্2ͭ͸਌࿨ੑ͕ඇৗʹߴ͍ɻ

Slide 28

Slide 28 text

CDN্Ͱ࣮ߦͤ͞ΔϓϩάϥϜΛ࣮ߦͤ͞Δ͜ͱ͕Մ ೳͳ΋ͷ͕ଘࡏ͢Δ 28 - Cloudflare Workers - Fastly Compute - Lambda@Edge - Deno Deploy ϓϩάϥϜΛ࣮ߦ͢Δͱ͍͏͜ͱ͸ɺ͜Ε͸ࠓ·Ͱͷα ʔό/ΫϥΠΞϯτͱ͸ҟͳΔܭࢉϦιʔεͰ͋Δɻ 28

Slide 29

Slide 29 text

ϑϩϯτΤϯυͷͨΊͷαʔϏε ͰܭࢉϦιʔε͕֬อͰ͖ͦ͏ 29 29

Slide 30

Slide 30 text

ͳΜͱ͔͜ͷCDN্Ͱ  ϨϯμϦϯάͰ͖ͳ͍ʁ🤔 30 30

Slide 31

Slide 31 text

31 🤝

Slide 32

Slide 32 text

32 HonoXͰ΋  ग़དྷΔ͔Βʂ

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Cloudflare Workers(Pages)ͷ࣮ྫ 5 34

Slide 35

Slide 35 text

35 ৭ʑࢼߦࡨޡͯ͠Production࠾༻

Slide 36

Slide 36 text

“ ΤοδͰ͋ΔCloudflare Workers্Ͱ  ϨϯμϦϯά͢ΔͨΊͷσʔλऔಘ͕ඞཁ Ͱ͋Δ🙋 36

Slide 37

Slide 37 text

RemixͰSSRΛ͢ΔͳΒ͹αʔόαΠυͰ  ϨϯμϦϯά͢ΔͨΊͷσʔλ͕ඞཁ 37 TCP/IP http Remix͕௚઀DBΛࢀরͤͣ֎෦APIαʔόΛݺͿ৔߹ DBαʔό όοΫΤϯυ  αʔό ϑϩϯτΤϯυ  αʔό

Slide 38

Slide 38 text

Remix΋αʔόαΠυͷॲཧ͕  ͋ΔͷʹAPIαʔόΛհ͢Δͷ͸  ͪΐͬͱඍົͳ৔߹͸… 38 38

Slide 39

Slide 39 text

Slide 40

Slide 40 text

RemixͰSSRΛ͢ΔͨΊͷσʔλΛDB͔Β௚઀औಘ͢Δ 40 Remix͕௚઀DBΛࢀর͢Δ৔߹ DBαʔό όοΫΤϯυ  αʔό ϑϩϯτΤϯυ  αʔό TCP/IP

Slide 41

Slide 41 text

ৄ͍͠΍Γํ͸͜ͷهࣄͷԼͷํʹ͋Δ 41

Slide 42

Slide 42 text

42 ؅ཧը໘ʹ࠾༻

Slide 43

Slide 43 text

43 Ӷҙ࡞੒த ͍ۙ಺ʹϩʔϯν

Slide 44

Slide 44 text

΋ͪΖΜϑϩϯτΤϯυ͚ͩ͡Όͳͯ͘  όοΫΤϯυ΋΍Ζ͏ͱࢥ͑͹ग़དྷΔ 44 44

Slide 45

Slide 45 text

஫ҙ఺ 6 45

Slide 46

Slide 46 text

ΤοδͰ ͳΜͰ΋ ग़དྷͦ͏͡Ό ͳ͍ʁ 46 46

Slide 47

Slide 47 text

“ 🙅 47

Slide 48

Slide 48 text

“ ५୔ʹܭࢉϦιʔε͕͋ΔΘ͚Ͱ͸ͳ͍ɻ  ۃ୺ͳ࿩ɺಠࣗͷAIϞσϧΛಈ࡞ͤ͞Δͱ͍ ͏͜ͱ͸ෆՄೳɻͳͷͰγεςϜશମͰॏ͘ ͳ͍ϦιʔεΛ࢖͍͍ͨ࣌ʹ࢖͏ͱྑ͍ɻ 48 ※Cloudflare͕ࠓAI΋ؤுͬͯΔཧ༝͔΋Ͷ

Slide 49

Slide 49 text

·ͱΊ 7 49

Slide 50

Slide 50 text

·ͱΊ ● ݱ࣌఺ͰEdge Computing͸े෼ʹ࣮༻ʹ଱͑͏Δ ● ϑϩϯτΤϯυαʔό͕ඞཁ͔ࠓҰ౓ߟ͑ͯΈͯ ΄͍͠ ● ΫϥΠΞϯτ/αʔό/ΤοδͱͲͷܭࢉϦιʔεΛ ࢖͏͔ࠓͷ࣌୅͸ٻΊΒΕͯΔ 50

Slide 51

Slide 51 text

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?