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
290
RemixでVersion skewに立ち向かう
chimame
2
1.1k
GraphQL Server on Edge after that
chimame
1
1.5k
Accelerating App Dev with Cloudflare Workers
chimame
1
440
GraphQL Server on Edge
chimame
12
6k
エッジで輝くフロントエンド
chimame
11
6.7k
Cloudflare Workersと状態管理
chimame
4
1.7k
CSRなサイトを (疑似的な)ISRに変更した話
chimame
0
630
Cloud Runマネージドに適したアプリケーションを考える
chimame
1
330
Other Decks in Programming
See All in Programming
CSC307 Lecture 17
javiergs
PRO
0
120
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
300
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
520
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
360
機械学習って何? 5分で解説頑張ってみる
kuroneko2828
0
210
AIネイティブなプロダクトをGolangで挑む取り組み
nmatsumoto4
0
120
Java on Azure で LangGraph!
kohei3110
0
150
イベントストーミングから始めるドメイン駆動設計
jgeem
4
860
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
ktr0731/go-mcpでMCPサーバー作ってみた
takak2166
0
170
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
2
510
Javaのルールをねじ曲げろ!禁断の操作とその代償から学ぶメタプログラミング入門 / A Guide to Metaprogramming: Lessons from Forbidden Techniques and Their Price
nrslib
3
2k
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.7k
Docker and Python
trallard
44
3.4k
Agile that works and the tools we love
rasmusluckow
329
21k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
How to Ace a Technical Interview
jacobian
276
23k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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?