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
9
3.7k
私がエッジを使う理由
Workers Teck Tolks in Osaka #1
chimame
February 26, 2024
Tweet
Share
More Decks by chimame
See All by chimame
GraphQL Server on Edge after that
chimame
1
960
Accelerating App Dev with Cloudflare Workers
chimame
1
310
GraphQL Server on Edge
chimame
11
5k
エッジで輝くフロントエンド
chimame
11
6.2k
Cloudflare Workersと状態管理
chimame
4
1.2k
CSRなサイトを (疑似的な)ISRに変更した話
chimame
0
460
Cloud Runマネージドに適したアプリケーションを考える
chimame
1
240
RDS Proxyを使ってAuroraと仲良くなる
chimame
0
940
BigQueryの簡単データ参照
chimame
1
340
Other Decks in Programming
See All in Programming
VS Code をプロダクトにどう取り込むか
onomax
1
430
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
310
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
230
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
960
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
210
使ってみよう Azure AI Document Intelligence
kosmosebi
2
330
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
990
Git Lint
bkuhlmann
4
750
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
450
Elm 0.19.0 Changes
bkuhlmann
0
490
Site Reliability Engineering for GMO
pyama86
8
1k
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
73
5.2k
Visualization
eitanlees
136
14k
The Invisible Customer
myddelton
114
12k
Web development in the modern age
philhawksworth
202
10k
Gamification - CAS2011
davidbonilla
76
4.6k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Code Review Best Practice
trishagee
55
15k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Into the Great Unknown - MozCon
thekraken
10
1k
Docker and Python
trallard
34
2.7k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
How to name files
jennybc
65
93k
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?