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

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