Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
私がエッジを使う理由
Search
chimame
February 26, 2024
Programming
10
4k
私がエッジを使う理由
Workers Teck Tolks in Osaka #1
chimame
February 26, 2024
Tweet
Share
More Decks by chimame
See All by chimame
RemixでVersion skewに立ち向かう
chimame
1
890
GraphQL Server on Edge after that
chimame
1
1.4k
Accelerating App Dev with Cloudflare Workers
chimame
1
400
GraphQL Server on Edge
chimame
12
5.7k
エッジで輝くフロントエンド
chimame
11
6.6k
Cloudflare Workersと状態管理
chimame
4
1.6k
CSRなサイトを (疑似的な)ISRに変更した話
chimame
0
590
Cloud Runマネージドに適したアプリケーションを考える
chimame
1
300
RDS Proxyを使ってAuroraと仲良くなる
chimame
0
1.1k
Other Decks in Programming
See All in Programming
Vue.jsでiOSアプリを作る方法
hal_spidernight
0
130
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
260
Software Architecture
hschwentner
6
2.1k
Grafana Cloudとソラカメ
devoc
0
130
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
210
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
200
DMMオンラインサロンアプリのSwift化
hayatan
0
300
Open source software: how to live long and go far
gaelvaroquaux
0
540
動作確認やテストで漏れがちな観点3選
starfish719
6
980
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
160
Domain-Driven Transformation
hschwentner
2
1.9k
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
160
Featured
See All Featured
Docker and Python
trallard
44
3.2k
Into the Great Unknown - MozCon
thekraken
34
1.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
620
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Statistics for Hackers
jakevdp
797
220k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Designing Experiences People Love
moore
139
23k
Transcript
ࢲ͕ΤοδΛ͏ཧ༝ Workers Tech Talks in Osaka #1 2024.02.26
contents - Web ΞϓϦέʔγϣϯߏஙͷมભ - Web γεςϜʹ͓͚Δඞཁͳॲཧͷछྨ - ܭࢉϦιʔεͷ࠷దԽ -
Edge computing ͷ׆༻ - Cloudflare Workers(Pages)ͷ࣮ྫ - ҙ - ·ͱΊ 2
Web ΞϓϦέʔγϣϯ ߏஙͷมભ 1 3
2010ࠒ·ͰͷओྲྀWebΞϓϦέʔγϣϯߏங 4
2010ࠒ·ͰͷओྲྀWebΞϓϦέʔγϣϯߏங 5 SSR͕ओྲྀ
“ 2010ա͔͗Β WebϑϩϯτΤϯυϑϨʔϜϫʔΫ͓ ΑͼϥΠϒϥϦͷొ 6
Anguler, React.jsΛൽΓʹଓʑͱొ 7
View MVCͰ͍͏V(View)ͷ෦͚ͩΛผΞʔΩςΫνϟ͕ ୲͏Α͏ʹมԽ͍ͯ͘͠ 8 WebΞϓϦέʔγϣϯ WebΞϓϦέʔγϣϯ Controller, Model
“ ϑϩϯτΤϯυͷॏཁੑ͕ු͖ூΓʹ ͳ͍͖ͬͯΞʔΩςΫνϟ͕ੜ·ΕΔ ͱಉ࣌ʹׂͷ͕ٸʹਐΉ 9
Web γεςϜʹ͓͚Δ ඞཁͳॲཧͷछྨ 2 10
ओͳॲཧ 11 - (http)ϦΫΤετͷड - ੩తίϯςϯπͷ৴ - ηογϣϯͷཧ - ΩϟογϡͷཧʢσʔλίϯςπͳͲ༷ʑʣ
- ೝূ͓ΑͼೝՄ - ೖྗσʔλͷόϦσʔγϣϯ - (DBͳͲͷ)σʔλͷಡΈऔΓ࡞ͳͲͷ࣮ࢪ - ಈతίϯςϯπͷϨϯμϦϯά
- (http)ϦΫΤετͷड - ੩తίϯςϯπͷ৴ - ηογϣϯͷཧ - ΩϟογϡͷཧʢσʔλίϯςπͳͲ༷ʑʣ - ೝূ͓ΑͼೝՄ
- ೖྗσʔλͷόϦσʔγϣϯ - (DBͳͲͷ)σʔλͷಡΈऔΓ࡞ͳͲͷ࣮ࢪ - ಈతίϯςϯπͷϨϯμϦϯά - ΫϥΠΞϯτͷϨεϙϯεੜ ओͳॲཧ 12 ϑϩϯτΤϯυ͕୲͏ओͳׂ
“ ϑϩϯτΤϯυతʹݴ͑HTML ΛͲ͏ ”ϨϯμϦϯά ” ͢Δͷ͕ओͳ ࣄͰ͋Δ(͋͘·ͰγεςϜత) 13
ܭࢉϦιʔεͷ࠷దԽ 3 14
SSRͱCSRͷಛ SSR CSR ϨϯμϦϯάΛ ࣮ࢪ͢Δॴ αʔό ΫϥΠΞϯτ ϖʔδભҠͷ ௨৴ྔ HTMLͱϖʔδʹ
ඞཁͳ੩తϑΝΠϧ ϖʔδʹඞཁͳσʔ λͷΈ ඞཁͳ࠷γεςϜ 1 2 15
SSRͱCSRͷಛ SSR CSR ϨϯμϦϯάΛ ࣮ࢪ͢Δॴ αʔό ΫϥΠΞϯτ ϖʔδભҠͷ ௨৴ྔ HTMLͱϖʔδʹ
ඞཁͳ੩తϑΝΠϧ ϖʔδʹඞཁͳσʔ λͷΈ ඞཁͳ࠷γεςϜ 1 2 16 αʔό͚ͩͷҰۃूதͷܭࢉϦιʔεͰͳ͘ɺ ΫϥΠΞϯτΛͬͨܭࢉϦιʔεΛࢄ͢ΔͰ👍
SSRͱCSRͷಛ SSR CSR ϨϯμϦϯάΛ ࣮ࢪ͢Δॴ αʔό ΫϥΠΞϯτ ϖʔδભҠͷ ௨৴ྔ HTMLͱϖʔδʹ
ඞཁͳ੩తϑΝΠϧ ϖʔδʹඞཁͳσʔ λͷΈ ඞཁͳ࠷γεςϜ 1 2 17 ௨৴ྔ͕Լ͕Δͷ👍 ͰSEOͱ͔ݴΘΕΔͱ…
SSRͱCSRͷಛ SSR CSR ϨϯμϦϯάΛ ࣮ࢪ͢Δॴ αʔό ΫϥΠΞϯτ ϖʔδભҠͷ ௨৴ྔ HTMLͱϖʔδʹ
ඞཁͳ੩తϑΝΠϧ ϖʔδʹඞཁͳσʔ λͷΈ ඞཁͳ࠷γεςϜ 1 2 18 ੩తͳϑΝΠϧ৴͚ͩͰߏஙͰ͖ͳ͍ ߹γεςϜ͕૿͍͑ͯΔ👎
(ϑϩϯτΤϯυ)αʔόΛߏங͢Δͱ͍͏͜ͱ ˕ ࢮ׆ࢹ ˕ ϩάج൫ͷߏங ˕ Խ αʔόΛ༻ҙ͢Δͱ͍͏͜ͱ͜ΕΒ͕ ηοτͰ͍ͯ͘Δ😢 19
SSRͱCSRͷಛ SSR CSR ϨϯμϦϯάΛ ࣮ࢪ͢Δॴ αʔό ΫϥΠΞϯτ ϖʔδભҠͷ ௨৴ྔ HTMLͱϖʔδʹ
ඞཁͳ੩తϑΝΠϧ ϖʔδʹඞཁͳσʔ λͷΈ ඞཁͳ࠷γεςϜ 1 2 20 CSRΑ͏ͳܭࢉϦιʔεΛࢄͤͭͭ͞ɺ SSRΑ͏ͳҰఆͨ͠αʔόܭࢉϦιʔεΛ֬อͯ͠ɺ αʔό(ࢹ)ΛۃݶʹݮΒ͍͍͢ͱ͜औΓ͕͍ͨ͠
લύʔτͰ༰(ৼΓฦΓ) 1. Web ΞϓϦέʔγϣϯߏஙͷมભ ύʔτ ϑϩϯτΤϯυͷॏཁੑ͕ු͖ூΓʹͳ͍͖ͬͯΞʔΩ ςΫνϟ͕ੜ·ΕΔͱಉ࣌ʹׂͷ͕ٸʹਐΉ 2. Web γεςϜʹ͓͚Δඞཁͳॲཧͷछྨ
ύʔτ ϑϩϯτΤϯυతʹݴ͑HTMLΛͲ͏ ”ϨϯμϦ ϯά ” ͢Δͷ͕ओͳࣄͰ͋Δ(͋͘·ͰγεςϜత) 21
લύʔτͰ༰(ৼΓฦΓ) 1. Web ΞϓϦέʔγϣϯߏஙͷมભ ύʔτ ϑϩϯτΤϯυͷॏཁੑ͕ු͖ூΓʹͳ͍͖ͬͯΞʔΩ ςΫνϟ͕ੜ·ΕΔͱಉ࣌ʹׂͷ͕ٸʹਐΉ 2. Web γεςϜʹ͓͚Δඞཁͳॲཧͷछྨ
ύʔτ ϑϩϯτΤϯυతʹݴ͑HTMLΛͲ͏ ”ϨϯμϦ ϯά ” ͢Δͷ͕ओͳࣄͰ͋Δ(͋͘·ͰγεςϜత) 22 ॏཁੑΘ͔Δ͕ࣄྔͱͷόϥϯε
“ ϑϩϯτΤϯυͷॏཁੑׂͱরΒ ͠߹ΘͤͯϑϩϯτΤϯυͷαʔό ͱ͍͏ͷͰ͖Δ͚ͩ༻ҙͨ͘͠ͳ͍ 23
Edge computing ͷ׆༻ 4 24
“ CDN(Contents Delivery Network)ͬͯͬͯ·͔͢ʁ 25
26 ੩తίϯςϯπͷߴͳ৴ Ϣʔβʔʹ͍ۙαʔόʔ͔Β ίϯςϯπΛ৴͢Δ ίϯςϯπͷΩϟογϡ ΦϦδϯͰੜ͞ΕΔಉҰ ༰ΛΩϟογϡͯ͠৴͢Δ DDoS߈ܸͳͲ͔Βαʔό ʔΛอޢ͢Δ WAFͳͲΛ༻͍ͨηΩϡ
ϦςΟڧԽ SSL/TLShttp/3Λߦ͍ HTTPS௨৴ͷ࣮ݱ͢Δ HTTPS௨৴ͷޮԽ D C W H CDNͷओͳׂ
27 ੩తίϯςϯπͷߴͳ৴ Ϣʔβʔʹ͍ۙαʔόʔ͔Β ίϯςϯπΛ৴͢Δ ίϯςϯπͷΩϟογϡ ΦϦδϯͰੜ͞ΕΔಉҰ ༰ΛΩϟογϡͯ͠৴͢Δ DDoS߈ܸͳͲ͔Βαʔό ʔΛอޢ͢Δ WAFͳͲΛ༻͍ͨηΩϡ
ϦςΟڧԽ SSL/TLShttp/3Λߦ͍ HTTPS௨৴ͷ࣮ݱ͢Δ HTTPS௨৴ͷޮԽ D C W H CDNͷओͳׂ ༰͔ΒݟͯΘ͔Δ௨Γɺ΄΅ϑϩϯτΤϯυʹඞཁͳػೳ͕ ͋ΔαʔϏεͰ͋Δɻಛʹ্2ͭੑ͕ඇৗʹߴ͍ɻ
CDN্Ͱ࣮ߦͤ͞ΔϓϩάϥϜΛ࣮ߦͤ͞Δ͜ͱ͕Մ ೳͳͷ͕ଘࡏ͢Δ 28 - Cloudflare Workers - Fastly Compute -
Lambda@Edge - Deno Deploy ϓϩάϥϜΛ࣮ߦ͢Δͱ͍͏͜ͱɺ͜Εࠓ·Ͱͷα ʔό/ΫϥΠΞϯτͱҟͳΔܭࢉϦιʔεͰ͋Δɻ 28
ϑϩϯτΤϯυͷͨΊͷαʔϏε ͰܭࢉϦιʔε͕֬อͰ͖ͦ͏ 29 29
ͳΜͱ͔͜ͷCDN্Ͱ ϨϯμϦϯάͰ͖ͳ͍ʁ🤔 30 30
31 🤝
32 HonoXͰ ग़དྷΔ͔Βʂ
Remixͷಛ It can run anywhere ͦͷ໊௨ΓͲ͜Ͱಈ͘ɻNext.jsΛ࢝Ίͱͨ͠ϑϩϯτΤϯυ ϑϨʔϜϫʔΫNode.jsͷαʔόͷΈಈ࡞͢Δ͜ͱΛલఏͱ͠ ͍͕ͯͨɺRemixNode.js͚ͩͰͳ͘Cloudflare Workers্Ͱ ಈ࡞͢Δͱ͍͏ಛ͕͋Δ
Focused on web standards RemixΛ༻͢Δ͜ͱͰWebඪ४ͱͳΔWebΞϓϦέʔγϣ ϯ͕ߏஙͰ͖Δಛ͕͋Δɻ https://remix.run 33 33
Cloudflare Workers(Pages)ͷ࣮ྫ 5 34
35 ৭ʑࢼߦࡨޡͯ͠Production࠾༻
“ ΤοδͰ͋ΔCloudflare Workers্Ͱ ϨϯμϦϯά͢ΔͨΊͷσʔλऔಘ͕ඞཁ Ͱ͋Δ🙋 36
RemixͰSSRΛ͢ΔͳΒαʔόαΠυͰ ϨϯμϦϯά͢ΔͨΊͷσʔλ͕ඞཁ 37 TCP/IP http Remix͕DBΛࢀরͤͣ֎෦APIαʔόΛݺͿ߹ DBαʔό όοΫΤϯυ αʔό ϑϩϯτΤϯυ
αʔό
RemixαʔόαΠυͷॲཧ͕ ͋ΔͷʹAPIαʔόΛհ͢Δͷ ͪΐͬͱඍົͳ߹… 38 38
39
RemixͰSSRΛ͢ΔͨΊͷσʔλΛDB͔Βऔಘ͢Δ 40 Remix͕DBΛࢀর͢Δ߹ DBαʔό όοΫΤϯυ αʔό ϑϩϯτΤϯυ αʔό TCP/IP
ৄ͍͠Γํ͜ͷهࣄͷԼͷํʹ͋Δ 41
42 ཧը໘ʹ࠾༻
43 Ӷҙ࡞த ͍ۙʹϩʔϯν
ͪΖΜϑϩϯτΤϯυ͚ͩ͡Όͳͯ͘ όοΫΤϯυΖ͏ͱࢥ͑ग़དྷΔ 44 44
ҙ 6 45
ΤοδͰ ͳΜͰ ग़དྷͦ͏͡Ό ͳ͍ʁ 46 46
“ 🙅 47
“ ५ʹܭࢉϦιʔε͕͋ΔΘ͚Ͱͳ͍ɻ ۃͳɺಠࣗͷAIϞσϧΛಈ࡞ͤ͞Δͱ͍ ͏͜ͱෆՄೳɻͳͷͰγεςϜશମͰॏ͘ ͳ͍ϦιʔεΛ͍͍ͨ࣌ʹ͏ͱྑ͍ɻ 48 ※Cloudflare͕ࠓAIؤுͬͯΔཧ༝͔Ͷ
·ͱΊ 7 49
·ͱΊ • ݱ࣌ͰEdge Computingेʹ࣮༻ʹ͑͏Δ • ϑϩϯτΤϯυαʔό͕ඞཁ͔ࠓҰߟ͑ͯΈͯ ΄͍͠ • ΫϥΠΞϯτ/αʔό/ΤοδͱͲͷܭࢉϦιʔεΛ ͏͔ࠓͷ࣌ٻΊΒΕͯΔ
50
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?