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

Transcript

1. 1.

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

2. 2.

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

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

   ؓ࿩ٳ୊

4. 4.

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

5. 5.

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

6. 6.

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

   day2 • Simulating Sand: 
 Building Interactivity With WebAssembly • JavaScript’s Journey to the Edge
7. 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. 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. 9.

   JavaScript’s Journey to the Edge • طଘͷwebඳըઓུͱEdge Side Renderingͷ঺հ •

   Cloudflare Workers(+ workers.dev) & wranglerͷ঺հ ࠓճ͸͜ͷൃදΛਂ۷Γ͍͖ͯ͠·͢
10. 10.

    Webͷݱঢ়Λ੔ཧͯ͠ΈΔ

11. 11.

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

12. 12.

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

13. 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. 14.

    ͲͪΒͷઓུ΋τϨʔυΦϑ ଞͷઓུ͸ͳ͍ͷ͔?

15. 15.

    Edge Side Renderingͱ͍͏ ৽ͨͳઓུ

16. 16.

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

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

17. 17.

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

18. 18.

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

    *ެࣜͷTemplateͰRustͷྫ͕͋Δ͕ɺ࠷ޙ͸Wasmʹม׵͍ͯ͠Δ
 multithreadʹରԠ͍ͯ͠ͳ͍WasmΛͳͥରԠݴޠͱ͍ͯ͠Δ͔͸ޙड़ https://workers.cloudflare.com/
19. 19.

    Cloudflare Workersͷཁૉٕज़ • V8: Isolates • ͳͥ࠾༻ͨ͠ͷ͔? • ҆શੑ͕อূ͞Εͳ͍ίʔυΛɺଞͷ؀ڥ΁ӨڹΛ༩͑ͣ ࣮ߦ͔ͨͬͨ͠

    • ্ه࣮ݱͷͨΊʹ…v8:Isolatesͷ2ͭͷಛੑ͕࠷దͩͬͨ 1. ୯ҰϓϩηεͰ͍ͭ͘΋ͷisolate contextΛಈ͔ͤΔ 2. isolate contextΛγʔϜϨεʹ੾Γସ͑ΒΕΔ https://blog.cloudflare.com/cloud-computing-without-containers/
20. 20.

    ͦΕҎલʹݕ౼͞Εٕͨज़ • Lua • Sandboxʹ࣮ߦ͕Ͱ͖ͳ͍ͨΊݟૹΓ • k8sͳͲͷίϯςφ؀ڥ • ҎԼͷཧ༝͔ΒݟૹΓ •

    ͖ͪΜͱӡ༻͢Δͱ͓͕͔͔ۚΔ • εέʔϧ͸Մೳ͕ͩɺ͞΄Ͳ༰қͰ͸ͳ͍
21. 21.

    Isolatesͱ VM / Containerͷൺֱ • ҎԼͷ2ͭͷ؍఺Ͱൺֱ • Code Footprint •

    Memory Usage
22. 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. 23.

    Memory Usage 0 250 500 750 1000 Memory Usage 5

    100 1,000 VM Container Isolates
24. 24.

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

25. 25.

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

    install -g, cargo install͍ͣΕ͔ͰಋೖՄೳ https://github.com/cloudflare/wrangler
26. 26.

    Terrariumͱͷൺֱ • Terrariumͱ͸? • Fastly͕ఏڙ͢ΔEdge Computing Platform • ઐ༻ͷWasmΛ༻ҙͯ͠ಈ࡞ͤ͞Δ •

    ରԠ͍ͯ͠Δͷ͸C, Rust, Assembly Script • ཪଆͷ࢓૊Έͱͯ͠lucet(ϧηοτ)Λར༻͍ͯ͠Δ https://wasm.fastlylabs.com/docs
27. 27.

    Terrariumͱͷൺֱ • Wasm͔͠ར༻Ͱ͖ͳ͍ • lucet಺෦ͰWASI(ϫζΟ)͕ར༻͞Ε͍ͯΔͷͰ
 ௿ϨΠϠʔͷૢ࡞΋૝ఆ͍ͯͦ͠͏ • ಉ͡TerrariumσϓϩΠࢿ࢈ؒͰར༻Ͱ͖Δ
 Key Value

    StoreΛ͍࣋ͬͯΔ
28. 28.

    Terrariumͱͷൺֱ Terrarium Workers

29. 29.

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

30. 30.

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

31. 31.

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

32. 32.

    Thanks