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
Boost Your Web Performance with Hyperdrive
chimame
1
150
RemixでVersion skewに立ち向かう
chimame
2
1k
GraphQL Server on Edge after that
chimame
1
1.4k
Accelerating App Dev with Cloudflare Workers
chimame
1
410
GraphQL Server on Edge
chimame
12
5.8k
エッジで輝くフロントエンド
chimame
11
6.6k
Cloudflare Workersと状態管理
chimame
4
1.7k
CSRなサイトを (疑似的な)ISRに変更した話
chimame
0
600
Cloud Runマネージドに適したアプリケーションを考える
chimame
1
310
Other Decks in Programming
See All in Programming
Modern Angular with Signals and Signal StoreNew Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
150
LINE messaging APIを使ってGoogleカレンダーと連携した予約ツールを作ってみた
takumakoike
0
140
AIプログラミング雑キャッチアップ
yuheinakasaka
21
5.4k
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
240
Ça bouge du côté des animations CSS !
goetter
2
170
Jasprが凄い話
hyshu
0
200
AIレビュー導入によるCIツールとの共存と最適化
kamo26sima
1
1.2k
Devin入門 〜月500ドルから始まるAIチームメイトとの開発生活〜 / Introduction Devin 〜Development With AI Teammates〜
rkaga
3
1.4k
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
340
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
9
2.7k
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
670
CIBMTR振り返り+敗北から学ぶコンペの取り組み方反省
takanao
1
230
Featured
See All Featured
Building Applications with DynamoDB
mza
93
6.3k
Automating Front-end Workflow
addyosmani
1369
200k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Designing for Performance
lara
605
68k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
BBQ
matthewcrist
87
9.5k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
450
KATA
mclloyd
29
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
28
1.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
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?