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
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
200
VS Code Update for GitHub Copilot
74th
2
620
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
140
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
220
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
800
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
130
CursorはMCPを使った方が良いぞ
taigakono
1
240
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
270
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
110
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
110
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.2k
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
8.5k
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.6k
Stop Working from a Prison Cell
hatefulcrawdad
270
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Music & Morning Musume
bryan
46
6.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
We Have a Design System, Now What?
morganepeng
53
7.7k
Optimizing for Happiness
mojombo
379
70k
The World Runs on Bad Software
bkeepers
PRO
69
11k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
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