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
3.9k
私がエッジを使う理由
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
780
GraphQL Server on Edge after that
chimame
1
1.3k
Accelerating App Dev with Cloudflare Workers
chimame
1
370
GraphQL Server on Edge
chimame
12
5.5k
エッジで輝くフロントエンド
chimame
11
6.5k
Cloudflare Workersと状態管理
chimame
4
1.5k
CSRなサイトを (疑似的な)ISRに変更した話
chimame
0
550
Cloud Runマネージドに適したアプリケーションを考える
chimame
1
270
RDS Proxyを使ってAuroraと仲良くなる
chimame
0
1k
Other Decks in Programming
See All in Programming
Tuning GraphQL on Rails
pyama86
2
670
現場で役立つモデリング 超入門
masuda220
PRO
10
2.2k
CSC509 Lecture 07
javiergs
PRO
0
140
Vue.js学習の振り返り
hiro_xre
2
130
qmuntal/stateless のススメ
sgash708
0
100
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
2
1.5k
Synchronizationを支える技術
s_shimotori
1
130
いかにして不足・不整合なくデータ移行したか
tjmtmmnk
1
1k
watsonx.ai Dojo #3 プロンプトエンジニアリング入門
oniak3ibm
PRO
0
480
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
3
870
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
3
780
Kotlinの好きなところ
kobaken0029
0
160
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
GitHub's CSS Performance
jonrohan
1030
460k
KATA
mclloyd
29
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Measuring & Analyzing Core Web Vitals
bluesmoon
0
27
Become a Pro
speakerdeck
PRO
24
4.9k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.8k
Unsuck your backbone
ammeep
668
57k
Code Reviewing Like a Champion
maltzj
519
39k
Automating Front-end Workflow
addyosmani
1365
200k
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?