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 Workers. ~Think about the Edge Side Rendering ~
Search
Tomohide Takao
June 27, 2019
Programming
0
230
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
310
Rustを使うためにやったこと
dorayakikun
2
940
Other Decks in Programming
See All in Programming
オブジェクトしこう
okuramasafumi
2
130
Go1.22からの疑似乱数生成器について/go-122-pseudo-random-generator
convto
1
160
Data Contracts In Practice With Debezium and Apache Flink (Kafka Summit London)
gunnarmorling
2
280
マイ隙間家具OSSたちのご紹介
karupanerura
2
160
実践!RDRAを活用した既存システムの仕様変更 / Specification Changes in Existing Systems Utilizing RDRA
imamotohikaru
0
2.7k
WasmOS: Wasmを実行する自作Microkernel
riru
0
370
C# 大統一理論推進委員会 会員のための Unity Package Manager プロジェクト構成案
monry
PRO
0
580
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
7
1.9k
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
280
DocC Tutorial と TCA におけるテスト機能の紹介
kalupas226
1
330
document.write再考
brn
5
2.5k
決断するための勇気、そのためのBacklog / Courage to make decisions, Backlog for that.
seike460
PRO
4
1.9k
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
43
9.6k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
Producing Creativity
orderedlist
PRO
335
39k
Navigating Team Friction
lara
177
13k
YesSQL, Process and Tooling at Scale
rocio
160
13k
Debugging Ruby Performance
tmm1
68
11k
GraphQLの誤解/rethinking-graphql
sonatard
48
9.1k
Embracing the Ebb and Flow
colly
78
4.1k
Writing Fast Ruby
sferik
619
59k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
Automating Front-end Workflow
addyosmani
1353
200k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
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