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
Cloudflrea Workersの紹介 / Introduce Cloudflare Wo...
Search
Tomohide Takao
June 27, 2019
Programming
0
320
Cloudflrea Workersの紹介 / Introduce Cloudflare Workers. ~Think about the Edge Side Rendering ~
Cloudflare Workersの紹介と、サービスを下支えする技術について。
FastlyのTerrariumとの思想の違いについても考察をまとめています。
Tomohide Takao
June 27, 2019
Tweet
Share
More Decks by Tomohide Takao
See All by Tomohide Takao
proxy-wasm-rust-sdkについて
dorayakikun
0
370
Rustを使うためにやったこと
dorayakikun
3
1k
Other Decks in Programming
See All in Programming
NPOでのDevinの活用
codeforeveryone
0
730
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
260
GraphRAGの仕組みまるわかり
tosuri13
8
520
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
13
8.2k
WindowInsetsだってテストしたい
ryunen344
1
230
ふつうの技術スタックでアート作品を作ってみる
akira888
0
380
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
110
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.2k
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
180
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
270
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
280
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
130
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
How STYLIGHT went responsive
nonsquared
100
5.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Become a Pro
speakerdeck
PRO
28
5.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Facilitating Awesome Meetings
lara
54
6.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Building Adaptive Systems
keathley
43
2.6k
What's in a price? How to price your products and services
michaelherold
246
12k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Faster Mobile Websites
deanohume
307
31k
Transcript
JSConf EU XࢀՃใࠂ wasmฤ Cloudflare Workersͷհ NodeֶԂ34࣌ݶ 2019-06-27 Tomohide Takao
whoami • ߴඌ ल(͔͓ͨ ͱͻͰ) • ౦ژӺۙ߫Ͱ Node.js ͱ͔ॻ͍͍ͯ·͢ɻ •
͖ͳݴޠ Rust Ͱ͢ɻ • Wasmͷେ͖Ͱ͢ɻ • Twitter: @dorayaki_kun • GitHub: dorayakikun
ؓٳ
͜͜1ʙ2ͰWasmͷ͕૿͖͑ͯ·ͨ͠
JSConf EUྫ֎Ͱͳ͍Ͱ͢ ͜͜1ʙ2ͰWasmͷ͕૿͖͑ͯ·ͨ͠
Wasmʹؔ࿈ͨ͠ൃද • day1 • Let’s build a JavaScript Engine •
day2 • Simulating Sand: Building Interactivity With WebAssembly • JavaScript’s Journey to the Edge
Let’s build a JavaScript Engine • RustͷJavaScript • RustͷEnumpattern matchΛར༻ͯ͠ɺLexingʙ
Execution·ͰΛ࣮ • ൃදதͷσϞͰwasm-bindgenΛར༻ͯ͠ϒϥβ্Ͱ WasmԽͨ͠JSRuntimeΛಈ͔͍ͯ͠·ͨ͠ https://www.youtube.com/watch?v=_uD2pijcSi4 https://jason-williams.co.uk/building-a-js-interpreter-in-rust-part-1/#more-140 https://jason-williams.co.uk/building-a-js-interpreter-in-rust-part-2/#more-165
Simulating Sand: Building Interactivity With WebAssembly • ϒϥβήʔϜͷmodͱͯ͠WasmΛ࠾༻ͨ͠ • WasmΛ࠾༻ͨ͠എܠ
• SandboxԽ͞Ε͓ͯΓɺηʔϑςΟ • ͢Ͱʹ࣮༻Խ͞Ε͍ͯΔٕज़ • wasm-bindgen / wasm-packͷར༻͕༰қͩͬͨ https://2019.jsconf.eu/max-bittker/simulating-sand-building-interactivity-with-webassembly.html https://twitter.com/MaxBittker https://github.com/MaxBittker https://maxbittker.com/
JavaScript’s Journey to the Edge • طଘͷwebඳըઓུͱEdge Side Renderingͷհ •
Cloudflare Workers(+ workers.dev) & wranglerͷհ ࠓճ͜ͷൃදΛਂ۷Γ͍͖ͯ͠·͢
Webͷݱঢ়Λཧͯ͠ΈΔ
JavaScriptͷbyteαΠζ • ঃʑʹ͕࣮ͩ֬ʹ্ঢ͍ͯ͠Δ • ͜ͷ3ͰϞόΠϧ50%Ҏ্ϑΝΠϧαΠζ͕૿Ճ https://beta.httparchive.org/reports/state-of-javascript#bytesjs
TimeToInteractive • TTI9ඵҎ্ • ·͊·͍͊ https://beta.httparchive.org/reports/loading-speed#ttci
طଘͷઓུ • SSR + Cache • ॊೈͳରԠ͕Ͱ͖Δ • ҰํɺTime to
First Byte͕͍ • CSR + Cache • Time to First Byte͕͍ • ҰํɺFirst Contentful Paint͔ΒTime to Interactive ·Ͱϥά͕͋Δ https://developers.google.com/web/updates/2019/02/rendering-on-the-web
ͲͪΒͷઓུτϨʔυΦϑ ଞͷઓུͳ͍ͷ͔?
Edge Side Renderingͱ͍͏ ৽ͨͳઓུ
Edge Side Rendering • Τοδαʔό্ͰHTMLΛrendering • ΤοδαʔόͷಛੑΛੜ͔ͯ͠ɺ Time to First
ByteΛվળ • Τοδαʔό্Ͱrendering͢Δ͜ͱͰɺ Time to Interactive·Ͱͷ࣌ؒΛվળ • SSRͱCSRͷྑ͍ͱ͜औΓ͕Ͱ͖ΔΈ
ͦΜͳEdge Side Rendering Ͱ͖ΔαʔϏε͕… Cloudflare Workers
Cloudflare Workers • Cloudflare͕ॴ༗͢ΔΤοδαʔό্ͰserverlessΞϓϦ έʔγϣϯΛಈ࡞ͤ͞ΔαʔϏε • ίʔυͷσϓϩΠweb·ͨwranglerͰߦ͏ • ݱঢ়αϙʔτ͞Ε͍ͯΔݴޠJavaScript, Wasm(*)
*ެࣜͷTemplateͰRustͷྫ͕͋Δ͕ɺ࠷ޙWasmʹม͍ͯ͠Δ multithreadʹରԠ͍ͯ͠ͳ͍WasmΛͳͥରԠݴޠͱ͍ͯ͠Δ͔ޙड़ https://workers.cloudflare.com/
Cloudflare Workersͷཁૉٕज़ • V8: Isolates • ͳͥ࠾༻ͨ͠ͷ͔? • ҆શੑ͕อূ͞Εͳ͍ίʔυΛɺଞͷڥӨڹΛ༩͑ͣ ࣮ߦ͔ͨͬͨ͠
• ্ه࣮ݱͷͨΊʹ…v8:Isolatesͷ2ͭͷಛੑ͕࠷దͩͬͨ 1. ୯ҰϓϩηεͰ͍ͭ͘ͷisolate contextΛಈ͔ͤΔ 2. isolate contextΛγʔϜϨεʹΓସ͑ΒΕΔ https://blog.cloudflare.com/cloud-computing-without-containers/
ͦΕҎલʹݕ౼͞Εٕͨज़ • Lua • Sandboxʹ࣮ߦ͕Ͱ͖ͳ͍ͨΊݟૹΓ • k8sͳͲͷίϯςφڥ • ҎԼͷཧ༝͔ΒݟૹΓ •
͖ͪΜͱӡ༻͢Δͱ͓͕͔͔ۚΔ • εέʔϧՄೳ͕ͩɺ͞΄Ͳ༰қͰͳ͍
Isolatesͱ VM / Containerͷൺֱ • ҎԼͷ2ͭͷ؍Ͱൺֱ • Code Footprint •
Memory Usage
Code Footprint https://www.youtube.com/watch?v=MBndZddVQdw&feature=youtu.be&t=1025 0 2500 5000 7500 10000 Code Footprint
1 100 10000 VM Container Isolates
Memory Usage 0 250 500 750 1000 Memory Usage 5
100 1,000 VM Container Isolates
ͳͥWasmରԠ͍ͯ͠Δ? • IsolateϕʔεͷγεςϜͰɺ ίϯύΠϧࡁΈͷίʔυΛ࣮ߦͰ͖ͳ͍ • Ϗϧυ͕ඞཁͳطଘΞϓϦͷϙʔςΟϯάखஈͱͯ͠ WasmΛఏڙ͍ͯ͠Δ
wrangler • Cloudflare Workers༻ͷcliπʔϧ • Cloudflare WorkersͷϓϩδΣΫτ࡞Ϗϧυɺ publish͕Ͱ͖Δ • npm
install -g, cargo install͍ͣΕ͔ͰಋೖՄೳ https://github.com/cloudflare/wrangler
Terrariumͱͷൺֱ • Terrariumͱ? • Fastly͕ఏڙ͢ΔEdge Computing Platform • ઐ༻ͷWasmΛ༻ҙͯ͠ಈ࡞ͤ͞Δ •
ରԠ͍ͯ͠ΔͷC, Rust, Assembly Script • ཪଆͷΈͱͯ͠lucet(ϧηοτ)Λར༻͍ͯ͠Δ https://wasm.fastlylabs.com/docs
Terrariumͱͷൺֱ • Wasm͔͠ར༻Ͱ͖ͳ͍ • lucet෦ͰWASI(ϫζΟ)͕ར༻͞Ε͍ͯΔͷͰ ϨΠϠʔͷૢ࡞ఆ͍ͯͦ͠͏ • ಉ͡TerrariumσϓϩΠࢿ࢈ؒͰར༻Ͱ͖Δ Key Value
StoreΛ͍࣋ͬͯΔ
Terrariumͱͷൺֱ Terrarium Workers
Terrariumͱͷൺֱ • ಠࣗύοέʔδͷhttp_guestΛར༻͢Δඞཁ͕͋Δ • Workers୯७ͳServiceWorkerͷ࣮Ͱ ϋʔυϧ͍(ϑϩϯτΤϯυΤϯδχΞ؍Ͱ)
Edge Side Rendering ༗ޮͳͷ͔ • άϩʔόϧͳαʔϏεͷ߹ɺࢫຯ͕͋Γͦ͏ • ҰํͰԿΛΤοδαʔόʹͤ͞Δ͔ٞͷ༨͕͋Δ
Edge Side Rendering ༗ޮͳͷ͔ • άϩʔόϧͳαʔϏεͷ߹ɺࢫຯ͕͋Γͦ͏ • ҰํͰԿΛΤοδαʔόʹͤ͞Δ͔ٞͷ༨͕͋Δ Α͍͍ํ͋ͬͨΒɺڭ͍͑ͯͩ͘͞…
Thanks