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
380
Rustを使うためにやったこと
dorayakikun
3
1k
Other Decks in Programming
See All in Programming
テスト駆動Kaggle
isax1015
1
620
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
620
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
170
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
140
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
99
37k
NPOでのDevinの活用
codeforeveryone
0
900
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.3k
GPUを計算資源として使おう!
primenumber
1
250
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
210
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
260
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
870
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
Optimizing for Happiness
mojombo
379
70k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
A Tale of Four Properties
chriscoyier
160
23k
RailsConf 2023
tenderlove
30
1.1k
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