Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cloudflrea Workersの紹介 / Introduce Cloudflare Workers. ~Think about the Edge Side Rendering ~

Cloudflrea Workersの紹介 / Introduce Cloudflare Workers. ~Think about the Edge Side Rendering ~

Cloudflare Workersの紹介と、サービスを下支えする技術について。
FastlyのTerrariumとの思想の違いについても考察をまとめています。

Dd307cfc553fa838357daa26f3f02f84?s=128

Tomohide Takao

June 27, 2019
Tweet

Transcript

  1. JSConf EU XࢀՃใࠂ wasmฤ Cloudflare Workersͷ঺հ NodeֶԂ34࣌ݶ໨ 2019-06-27 Tomohide Takao

  2. whoami • ߴඌ ஌ल(͔͓ͨ ͱ΋ͻͰ) • ౦ژӺۙ߫Ͱ Node.js ͱ͔ॻ͍͍ͯ·͢ɻ •

    ޷͖ͳݴޠ͸ Rust Ͱ͢ɻ • Wasmͷ࿩୊΋େ޷͖Ͱ͢ɻ • Twitter: @dorayaki_kun • GitHub: dorayakikun
  3. ؓ࿩ٳ୊

  4. ͜͜1ʙ2೥ͰWasmͷ࿩୊͕૿͖͑ͯ·ͨ͠

  5. JSConf EU΋ྫ֎Ͱ͸ͳ͍Ͱ͢ ͜͜1ʙ2೥ͰWasmͷ࿩୊͕૿͖͑ͯ·ͨ͠

  6. Wasmʹؔ࿈ͨ͠ൃද • day1 • Let’s build a JavaScript Engine •

    day2 • Simulating Sand: 
 Building Interactivity With WebAssembly • JavaScript’s Journey to the Edge
  7. Let’s build a JavaScript Engine • Rust੡ͷJavaScript • RustͷEnum΍pattern 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
  8. 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/
  9. JavaScript’s Journey to the Edge • طଘͷwebඳըઓུͱEdge Side Renderingͷ঺հ •

    Cloudflare Workers(+ workers.dev) & wranglerͷ঺հ ࠓճ͸͜ͷൃදΛਂ۷Γ͍͖ͯ͠·͢
  10. Webͷݱঢ়Λ੔ཧͯ͠ΈΔ

  11. JavaScriptͷbyteαΠζ • ঃʑʹ͕࣮ͩ֬ʹ্ঢ͍ͯ͠Δ • ͜ͷ3೥ͰϞόΠϧ͸50%Ҏ্ϑΝΠϧαΠζ͕૿Ճ https://beta.httparchive.org/reports/state-of-javascript#bytesjs

  12. TimeToInteractive • TTI͸9ඵҎ্ • ·͊·͊஗͍ https://beta.httparchive.org/reports/loading-speed#ttci

  13. طଘͷઓུ • 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
  14. ͲͪΒͷઓུ΋τϨʔυΦϑ ଞͷઓུ͸ͳ͍ͷ͔?

  15. Edge Side Renderingͱ͍͏ ৽ͨͳઓུ

  16. Edge Side Rendering • Τοδαʔό্ͰHTMLΛrendering • ΤοδαʔόͷಛੑΛੜ͔ͯ͠ɺ
 Time to First

    ByteΛվળ • Τοδαʔό্Ͱrendering͢Δ͜ͱͰɺ
 Time to Interactive·Ͱͷ࣌ؒΛվળ • SSRͱCSRͷྑ͍ͱ͜औΓ͕Ͱ͖Δ࢓૊Έ

  17. ͦΜͳEdge Side Rendering Ͱ͖ΔαʔϏε͕… Cloudflare Workers

  18. Cloudflare Workers • Cloudflare͕ॴ༗͢ΔΤοδαʔό্ͰserverlessΞϓϦ έʔγϣϯΛಈ࡞ͤ͞ΔαʔϏε • ίʔυͷσϓϩΠ͸web·ͨ͸wranglerͰߦ͏ • ݱঢ়αϙʔτ͞Ε͍ͯΔݴޠ͸JavaScript, Wasm(*)

    *ެࣜͷTemplateͰRustͷྫ͕͋Δ͕ɺ࠷ޙ͸Wasmʹม׵͍ͯ͠Δ
 multithreadʹରԠ͍ͯ͠ͳ͍WasmΛͳͥରԠݴޠͱ͍ͯ͠Δ͔͸ޙड़ https://workers.cloudflare.com/
  19. Cloudflare Workersͷཁૉٕज़ • V8: Isolates • ͳͥ࠾༻ͨ͠ͷ͔? • ҆શੑ͕อূ͞Εͳ͍ίʔυΛɺଞͷ؀ڥ΁ӨڹΛ༩͑ͣ ࣮ߦ͔ͨͬͨ͠

    • ্ه࣮ݱͷͨΊʹ…v8:Isolatesͷ2ͭͷಛੑ͕࠷దͩͬͨ 1. ୯ҰϓϩηεͰ͍ͭ͘΋ͷisolate contextΛಈ͔ͤΔ 2. isolate contextΛγʔϜϨεʹ੾Γସ͑ΒΕΔ https://blog.cloudflare.com/cloud-computing-without-containers/
  20. ͦΕҎલʹݕ౼͞Εٕͨज़ • Lua • Sandboxʹ࣮ߦ͕Ͱ͖ͳ͍ͨΊݟૹΓ • k8sͳͲͷίϯςφ؀ڥ • ҎԼͷཧ༝͔ΒݟૹΓ •

    ͖ͪΜͱӡ༻͢Δͱ͓͕͔͔ۚΔ • εέʔϧ͸Մೳ͕ͩɺ͞΄Ͳ༰қͰ͸ͳ͍
  21. Isolatesͱ VM / Containerͷൺֱ • ҎԼͷ2ͭͷ؍఺Ͱൺֱ • Code Footprint •

    Memory Usage
  22. 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
  23. Memory Usage 0 250 500 750 1000 Memory Usage 5

    100 1,000 VM Container Isolates
  24. ͳͥWasmରԠ͍ͯ͠Δ? • IsolateϕʔεͷγεςϜͰ͸ɺ
 ίϯύΠϧࡁΈͷίʔυΛ࣮ߦͰ͖ͳ͍ • Ϗϧυ͕ඞཁͳطଘΞϓϦͷϙʔςΟϯάखஈͱͯ͠ WasmΛఏڙ͍ͯ͠Δ

  25. wrangler • Cloudflare Workers༻ͷcliπʔϧ • Cloudflare WorkersͷϓϩδΣΫτ࡞੒΍Ϗϧυɺ
 publish͕Ͱ͖Δ • npm

    install -g, cargo install͍ͣΕ͔ͰಋೖՄೳ https://github.com/cloudflare/wrangler
  26. Terrariumͱͷൺֱ • Terrariumͱ͸? • Fastly͕ఏڙ͢ΔEdge Computing Platform • ઐ༻ͷWasmΛ༻ҙͯ͠ಈ࡞ͤ͞Δ •

    ରԠ͍ͯ͠Δͷ͸C, Rust, Assembly Script • ཪଆͷ࢓૊Έͱͯ͠lucet(ϧηοτ)Λར༻͍ͯ͠Δ https://wasm.fastlylabs.com/docs
  27. Terrariumͱͷൺֱ • Wasm͔͠ར༻Ͱ͖ͳ͍ • lucet಺෦ͰWASI(ϫζΟ)͕ར༻͞Ε͍ͯΔͷͰ
 ௿ϨΠϠʔͷૢ࡞΋૝ఆ͍ͯͦ͠͏ • ಉ͡TerrariumσϓϩΠࢿ࢈ؒͰར༻Ͱ͖Δ
 Key Value

    StoreΛ͍࣋ͬͯΔ
  28. Terrariumͱͷൺֱ Terrarium Workers

  29. Terrariumͱͷൺֱ • ಠࣗύοέʔδͷhttp_guestΛར༻͢Δඞཁ͕͋Δ • Workers͸୯७ͳServiceWorkerͷ࣮૷Ͱ
 ϋʔυϧ͸௿͍(ϑϩϯτΤϯυΤϯδχΞ؍఺Ͱ)

  30. Edge Side Rendering͸
 ༗ޮͳͷ͔ • άϩʔόϧͳαʔϏεͷ৔߹ɺࢫຯ͕͋Γͦ͏ • ҰํͰԿΛΤοδαʔόʹͤ͞Δ͔͸ٞ࿦ͷ༨஍͕͋Δ

  31. Edge Side Rendering͸
 ༗ޮͳͷ͔ • άϩʔόϧͳαʔϏεͷ৔߹ɺࢫຯ͕͋Γͦ͏ • ҰํͰԿΛΤοδαʔόʹͤ͞Δ͔͸ٞ࿦ͷ༨஍͕͋Δ Α͍࢖͍ํ͋ͬͨΒɺڭ͍͑ͯͩ͘͞…

  32. Thanks