Cloudflare Workers 向けアプリを C# で構築する～WASM Native AOT への道～

by neno

Embed

Start on current slide

Slide 1

Slide 1 text

Cloudflare Workers 向けアプリを C# で構築する～WASM Native AOT への道～ C# Kaigi 2026 2026/09/19 何縫ねの。

Slide 2

Slide 2 text

自己紹介何縫ねの。 • 所属: NTTドコモビジネス株式会社イノベーションセンター • Microsoft MVP for Developer Technologies (2024～) • .NET / Web Development • 趣味 • C#, OSS, ドール, 一眼(α7 IV), シーシャ nenoNaninu nenoMake ブログ https://blog.neno.dev その他 https://neno.dev 1

Slide 3

Slide 3 text

OSS 紹介 Tapper https://github.com/nenoNaninu/Tapper • C# の型定義から TypeScript の型定義を生成する .NET Tool/ library • JSON / MessagePack 対応！属性を付与するだけ 2

Slide 4

Slide 4 text

OSS 紹介 TypedSignalR.Client https://github.com/nenoNaninu/TypedSignalR.Client • C# の SignalR Client を強く型付けするための Source Generator こんな SignalR の Hub と Receiver の interface があったとして… Before After (using TypedSignalR.Client) 脱文字列！全てが強く型付け！ 3

Slide 5

Slide 5 text

OSS 紹介 MessagePack Hub Protocol 対応！ TypedSignalR.Client.TypeScript https://github.com/nenoNaninu/TypedSignalR.Client.TypeScript • TypeScript の SignalR Client を強く型付けするための .NET Tool / library Before 属性を付与するだけ！ After (using TypedSignalR.Client.TypeScript) 脱文字列！全てが強く型付け！ TypeScript 用の型を C# から自動生成 4

Slide 6

Slide 6 text

OSS 紹介 SignalR 版 SwaggerUI TypedSignalR.Client.DevTools https://github.com/nenoNaninu/TypedSignalR.Client.DevTools • SignalR 使ったアプリを快適に開発するための GUI を自動生成する library • 2 step で利用可能！ • http pipeline に middleware の追加 • Hub と Receiver を定義してる interface に属性を付与 • JWT 認証サポート • パラメータのユーザ定義型サポート • JSON で入力！ 5

Slide 7

Slide 7 text

OSS 紹介 AspNetCore.SignalR.OpenTelemetry https://github.com/nenoNaninu/AspNetCore.SignalR.OpenTelemetry • トレースのための計装 • 最低限のログ Inspired by HttpLogging • 接続時 • Transport 層の情報も出力(WebSocket 等) • メソッド呼び出し時 • HubName.MethodName の素朴なログ • メソッド呼び出し毎にログのスコープを追加 • HubName, MethodName, InvocationId を振っているのでログの検索性が向上 • Duration • 切断時 • 切断時に例外が発生していれば例外もログに出力 https://github.com/nenoNaninu/AspNetCore.SignalR.OpenTelemetry SignalR のメソッド呼び出し毎にスパンが切られるように 6

Slide 8

Slide 8 text

Cloudflare Workers とは 7

Slide 9

Slide 9 text

Cloudflare Workers とは Cloudflare が提供しているサーバーレスサービス • Cloudflare が所有するエッジ環境でアプリケーションが動かせる • 大きな特徴として、コンテナをホスティングに利用できない • コンテナではなく JavaScript / WASM をホスティングする • とにかく安い！！ 8

Slide 10

Slide 10 text

Cloudflare Workers とは Cloudflare Workers の技術的仕組み • V8 isolate で JavaScript / WASM を動かす • V8 isolate は JavaScript を実行するための VM インスタンス V8 isolate は複数回の request で使い回される 9

Slide 11

Slide 11 text

Cloudflare Workers とは Cloudflare Workers がサポートしている言語 10

Slide 12

Slide 12 text

Cloudflare Workers とは Cloudflare Workers がサポートしている言語 Rust は WASM にコンパイル 11

Slide 13

Slide 13 text

Cloudflare Workers とは Cloudflare Workers がサポートしている言語 Python は WASM 製の Python インタプリタ (Pyodide) で実行 Rust は WASM にコンパイル 12

Slide 14

Slide 14 text

Cloudflare Workers とは Cloudflare Workers がサポートしている言語 C# のサポートなし！ Python は WASM 製の Python インタプリタ (Pyodide) で実行 Rust は WASM にコンパイル 13

Slide 15

Slide 15 text

というわけで (?) C# で Cloudflare Workers 向けアプリケーションを書けるようにしました！ 14

Slide 16

Slide 16 text

OSS 紹介 cloudflare-workers-dotnet https://github.com/nenoNaninu/cloudflare-workers-dotnet • C# + Minimal API スタイルで Cloudflare Workers 向けアプリを記述可能！ • パッケージ名は Cloudflare.Workers.Hosting • D1, R2, KV 等の Cloudflare サービスのバインディングも提供 15

Slide 17

Slide 17 text

OSS 紹介 cloudflare-workers-dotnet の使い方 • dotnet publish すると app.wasm と index.js が出力される • wrangler.jsonc を用意 • wrangler deploy で Cloudflare Workers にデプロイ完了！ wrangler.jsonc https://github.com/nenoNaninu/cloudflare-workers-dotnet 16

Slide 18

Slide 18 text

C# と WASM の現状と Cloudflare Workers が求めるもの 17

Slide 19

Slide 19 text

C# と WASM の現状と Cloudflare Workers が求めるもの C# と WASM の現状 • Blazor WASM • C# が公式に WASM を利用している唯一の実例 18

Slide 20

Slide 20 text

C# と WASM の現状と Cloudflare Workers が求めるもの Blazor WASM の仕組み • WASM 製の .NET Runtime で MSIL の dll を実行 • .NET 7 まではインタプリタ • .NET 8 からは JIT コンパイルも搭載 (Jiterpreter) • 全てが JIT コンパイルされるわけではなく、基本はインタプリタ • .NET 8 以降もオプションで JIT コンパイルを切りインタプリタとして動かす事も可能 19

Slide 21

Slide 21 text

C# と WASM の現状と Cloudflare Workers が求めるもの WASM console app というテンプレートが experimental で存在はする Node.js では動くが Cloudflare Workers は Node.js 環境ではないので動くかは絶妙なところ 20

Slide 22

Slide 22 text

C# と WASM の現状と Cloudflare Workers が求めるもの Cloudflare Workers で求められる WASM • JIT コンパイルが禁じられている https://developers.cloudflare.com/workers/runtime-apis/web-standards/ 21

Slide 23

Slide 23 text

C# と WASM の現状と Cloudflare Workers が求めるもの Cloudflare Workers で求められる WASM • JIT コンパイルが禁じられている https://developers.cloudflare.com/workers/runtime-apis/web-standards/ JIT コンパイルは無理でもインタプリタなら理屈上動かせるハズ…？ 22

Slide 24

Slide 24 text

C# と WASM の現状と Cloudflare Workers が求めるもの Cloudflare Workers で求められる WASM Instance は OK instantiate は NG 23

Slide 25

Slide 25 text

C# と WASM の現状と Cloudflare Workers が求めるもの Cloudflare Workers は色々制約が厳しい https://developers.cloudflare.com/workers/platform/limits/ 24

Slide 26

Slide 26 text

C# と WASM の現状と Cloudflare Workers が求めるもの Cloudflare Workers は色々制約が厳しい https://developers.cloudflare.com/workers/platform/limits/ 25

Slide 27

Slide 27 text

C# と WASM の現状と Cloudflare Workers が求めるものインタプリタで大丈夫…？ 26

Slide 28

Slide 28 text

C# と WASM の現状と Cloudflare Workers が求めるもの否、求められているのは WASM への NativeAOT !!! 27

Slide 29

Slide 29 text

C# と WASM の現状と Cloudflare Workers が求めるものしかし公式に C# を WASM へ NativeAOT する術はない…! 28

Slide 30

Slide 30 text

C# と WASM の現状と Cloudflare Workers が求めるもの実験的プロジェクトに目を向けると… • dotnet/runtimelab に LLVM 経由で WASM に NativeAOT する実験的プロジェクトが存在する！！ • パッケージ名は Microsoft.DotNet.ILCompiler.LLVM https://github.com/dotnet/runtimelab/tree/feature/NativeAOT-LLVM 29

Slide 31

Slide 31 text

Slide 32

Slide 32 text

C# と WASM の現状と Cloudflare Workers が求めるもの Microsoft.DotNet.ILCompiler.LLVM ができる事 • ブラウザ向け WASM に NativeAOT • Emscripten が必要 • WASI 向け WASM に NativeAOT • WASI SDK が必要 • WASI preview 2 をサポート 31

Slide 33

Slide 33 text

C# と WASM の現状と Cloudflare Workers が求めるもの WASI とは • WebAssembly System Interface 略して WASI • ブラウザ環境以外でも WASM を動かすために生まれた仕様 • Cloudflare Workers は当然ブラウザ環境ではないので WASI 向けビルドを選択する事になる 32

Slide 34

Slide 34 text

C# と WASM の現状と Cloudflare Workers が求めるもの WASI のバージョン • Preview 1 • Core WASM にのみ依存 • Preview 2 • WIT + Component Model に依存 • Preview 3 • 2026-06-11 に仕様がリリース • 非同期対応が主 33

Slide 35

Slide 35 text

C# と WASM の現状と Cloudflare Workers が求めるもの WASI のバージョン • Preview 1 • Core WASM にのみ依存 • Preview 2 • WIT + Component Model に依存 Microsoft.DotNet.ILCompiler.LLVM がサポートしているのは Preview2 • Preview 3 • 2026-06-11 に仕様がリリース • 非同期対応が主 34

Slide 36

Slide 36 text

C# と WASM の現状と Cloudflare Workers が求めるもの WASI のバージョン • Preview 1 V8 は Core WASM にしか対応していない • Core WASM にのみ依存 • Preview 2 • WIT + Component Model に依存 Microsoft.DotNet.ILCompiler.LLVM がサポートしているのは Preview2 • Preview 3 • 2026-06-11 に仕様がリリース • 非同期対応が主 35

Slide 37

Slide 37 text

C# と WASM の現状と Cloudflare Workers が求めるもの WASI のバージョン • Preview 1 V8 は Core WASM にしか対応していない • Core WASM にのみ依存 • Preview 2 • WIT + Component Model に依存故に Cloudflare Workers で動作するのは WASI Preview1 Microsoft.DotNet.ILCompiler.LLVM がサポートしているのは Preview2 • Preview 3 • 2026-06-11 に仕様がリリース • 非同期対応が主 36

Slide 38

Slide 38 text

C# と WASM の現状と Cloudflare Workers が求めるものぐぬぬ 37

Slide 39

Slide 39 text

Cloudflare Workers で動く WASM にビルドする 38

Slide 40

Slide 40 text

Cloudflare Workers で動く WASM にビルドする取れる選択肢 • なんとか WASI Preview 1 向けにビルドする • なんとか WASI Preview 2 向けにビルドされた WASM を V8 で動かせるようにする https://github.com/bytecodealliance/jco 39

Slide 41

Slide 41 text

Cloudflare Workers で動く WASM にビルドする取れる選択肢 • なんとか WASI Preview 1 向けにビルドする • なんとか WASI Preview 2 向けにビルドされた WASM を V8 で動かせるようにする jco を使えば Preview2 の .wasm から Component Model を排除して Core WASM のみの .wasm を作れる https://github.com/bytecodealliance/jco 40

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Cloudflare Workers で動く WASM にビルドする取れる選択肢 • なんとか WASI Preview 1 向けにビルドする • なんとか WASI Preview 2 向けにビルドされた WASM を V8 で動かせるようにする単純に依存を増やす事になるので渋い jco を使えば Preview2 の .wasm から Component Model を排除して Core WASM のみの .wasm を作れる import を jco が自動マッピングするが Node.js 向け https://github.com/bytecodealliance/jco Cloudflare Workers で動くの？ 43

Slide 45

Slide 45 text

Cloudflare Workers で動く WASM にビルドする取れる選択肢 • なんとか WASI Preview 1 向けにビルドするこちらが望ましい • なんとか WASI Preview 2 向けにビルドされた WASM を V8 で動かせるようにする単純に依存を増やす事になるので渋い jco を使えば Preview2 の .wasm から Component Model を排除して Core WASM のみの .wasm を作れる import を jco が自動マッピングするが Node.js 向け https://github.com/bytecodealliance/jco Cloudflare Workers で動くの？ 44

Slide 46

Slide 46 text

Cloudflare Workers で動く WASM にビルドする Preview 1 でビルドするためには？ • WASM へビルドする際には WASI SDK 同梱の clang を使う • clang を叩く際に –target で制御可能 45

Slide 47

Slide 47 text

Cloudflare Workers で動く WASM にビルドする Preview 1 でビルドするためには？ • WASM へビルドする際には WASI SDK 同梱の clang を使う • clang を叩く際に –target で制御可能という事は、ビルドプロセスを定義している MSBuild のファイル内に何かあるハズ 46

Slide 48

Slide 48 text

Cloudflare Workers で動く WASM にビルドする Microsoft.DotNet.ILCompiler.LLVM のビルドプロセスに介入する • Microsoft.DotNet.ILCompiler.LLVM が定義している MSBuild の .target ファイルを眺めてみるコレ！ https://github.com/dotnet/runtimelab/blob/feature/NativeAOT-LLVM/src/coreclr/nativeaot/BuildIntegration/Microsoft.NETCore.Native.targets 47

Slide 49

Slide 49 text

Cloudflare Workers で動く WASM にビルドする Microsoft.DotNet.ILCompiler.LLVM のビルドプロセスに介入する • IlcLlvmTarget はビルドプロセスの途中で設定される • そのため、素朴に csproj の PropertyGroup で設定するのではなく、 IlcLlvmTarget に wasm32-unknown-wasip2 が設定された後に wasm32-unknown-wasip1 で上書きする必要がある https://github.com/nenoNaninu/cloudflare-workers-dotnet/blob/main/src/Cloudflare.Workers.Hosting/build/Cloudflare.Workers.Hosting.targets 48

Slide 50

Slide 50 text

Cloudflare Workers で動く WASM にビルドするここまでで無事に WASI Preview1 向けビルドが実現 49

Slide 51

Slide 51 text

ライブラリの API と WASM 事情 50

Slide 52

Slide 52 text

ライブラリの API と WASM 事情ライブラリが提供する API • Minimal API スタイルにしたい 51

Slide 53

Slide 53 text

ライブラリの API と WASM 事情ライブラリが提供する API • Minimal API スタイルにしたい Top-level statement を使う以上 OutputType が Exe である必要がある 52

Slide 54

Slide 54 text

ライブラリの API と WASM 事情 Cloudflare Workers が HTTP リクエストの処理をキックする仕組み • JavaScript の fetch が呼び出される • Socket で listen しているとかではない • Main で起動して動かしっぱなしにしているとかではない fetch 内で WASM の instance を立ち上げて WASM に実装されているメソッドを呼び出す https://developers.cloudflare.com/workers/runtime-apis/handlers/fetch/ 53

Slide 55

Slide 55 text

ライブラリの API と WASM 事情 WASI には 2 種類ある (Preview1 の場合) • Command (exe) • _start() が export される • _start() は引数なし、返り値なし • _start() 終了後は、その instance からexport されているメソッドを叩いてはいけない • Reactor (lib) • _initialize() が export される • _initialize() を呼び出し終えたら instance から export されているメソッドを自由に叩いてよい https://github.com/WebAssembly/WASI/blob/d8b286c697364d8bc4daf1820b25a9159de364a3/design/application-abi.md 54

Slide 56

Slide 56 text

ライブラリの API と WASM 事情 WASI には 2 種類ある (Preview1 の場合) • Command (exe) • _start() が export される • _start() は引数なし、返り値なし • _start() 終了後は、その instance からexport されているメソッドを叩いてはいけない • Reactor (lib) Cloudflare Workers 的にはこちらが望ましい • _initialize() が export される • _initialize() を呼び出し終えたら instance から export されているメソッドを自由に叩いてよい https://github.com/WebAssembly/WASI/blob/d8b286c697364d8bc4daf1820b25a9159de364a3/design/application-abi.md 55

Slide 57

Slide 57 text

ライブラリの API と WASM 事情 WASI には 2 種類ある (Preview1 の場合) • Command (exe) • _start() が export される • _start() は引数なし、返り値なし • _start() 終了後は、その instance からexport されているメソッドを叩いてはいけない • Reactor (lib) Cloudflare Workers 的にはこちらが望ましいしかし C# 側で top-level statements 使いたい… • _initialize() が export される • _initialize() を呼び出し終えたら instance から export されているメソッドを自由に叩いてよい https://github.com/WebAssembly/WASI/blob/d8b286c697364d8bc4daf1820b25a9159de364a3/design/application-abi.md 56

Slide 58

Slide 58 text

ライブラリの API と WASM 事情 WASI には 2 種類ある (Preview1 の場合) • Command (exe) • _start() が export される • _start() は引数なし、返り値なし • _start() 終了後は、その instance からexport されているメソッドを叩いてはいけない • Reactor (lib) Cloudflare Workers 的にはこちらが望ましい加えて非同期に対応するには Reactor にするしかない (後述) しかし C# 側で top-level statements 使いたい… • _initialize() が export される • _initialize() を呼び出し終えたら instance から export されているメソッドを自由に叩いてよい https://github.com/WebAssembly/WASI/blob/d8b286c697364d8bc4daf1820b25a9159de364a3/design/application-abi.md 57

Slide 59

Slide 59 text

ライブラリの API と WASM 事情 C# の OutputType は Exe, WASM は Reactor にしたいのですが… • できます！！！ https://github.com/dotnet/runtimelab/blob/feature/NativeAOT-LLVM/src/coreclr/nativeaot/BuildIntegration/Microsoft.NETCore.Native.targets 58

Slide 60

Slide 60 text

ライブラリの API と WASM 事情ここまでで理想的な形で WASI Preview1 向けビルドが実現 59

Slide 61

Slide 61 text

WASM における Interop 事情 60

Slide 62

Slide 62 text

WASM における Interop 事情最終的な JavaScript のイメージ (あくまでイメージ) 61

Slide 63

Slide 63 text

WASM における Interop 事情最終的な JavaScript のイメージ (あくまでイメージ) V8 isolates は複数リクエストで使い回されるので WASM の instance はキャッシュ 62

Slide 64

Slide 64 text

WASM における Interop 事情最終的な JavaScript のイメージ (あくまでイメージ) V8 isolates は複数リクエストで使い回されるので WASM の instance はキャッシュリクエストを実際に処理するための WASM 側のエントリーポイント 63

Slide 65

Slide 65 text

WASM における Interop 事情最終的な JavaScript のイメージ (あくまでイメージ) V8 isolates は複数リクエストで使い回されるので WASM の instance はキャッシュリクエストを実際に処理するための WASM 側のエントリーポイントどうやって C# から WASM 側に export するか？ 64

Slide 66

Slide 66 text

WASM における Interop 事情 C# のメソッドを WASM で export する 65

Slide 67

Slide 67 text

WASM における Interop 事情 C# のメソッドを WASM で export する UnmanagedCallersOnly をつける事で export 可能 66

Slide 68

Slide 68 text

WASM における Interop 事情 C# のメソッドを WASM で export する引数は全て int UnmanagedCallersOnly をつける事で export 可能 67

Slide 69

Slide 69 text

WASM における Interop 事情 Interop どうするの？ C# のメソッドを WASM で export する引数は全て int UnmanagedCallersOnly をつける事で export 可能 68

Slide 70

Slide 70 text

WASM における Interop 事情 Interop の前に WASM Core の仕様 • 4 種類の primitive type しか存在しない • i32 / i64 / f32 / f64 • WASM では Linear memory というところでメモリ管理する • Primitive type 以外は全て Linear memory を介してやりとりする必要がある 69

Slide 71

Slide 71 text

WASM における Interop 事情 Interop 例: JavaScript 側から文字列 (not primitive) を取得する C# 70

Slide 72

Slide 72 text

WASM における Interop 事情 Interop 例: JavaScript 側から文字列 (not primitive) を取得する C# JavaScript 71

Slide 73

Slide 73 text

WASM における Interop 事情 Interop 例: JavaScript 側から文字列 (not primitive) を取得する C# instance.exports.memory.buffer が Linear memory のバッファ JavaScript 72

Slide 74

Slide 74 text

WASM における Interop 事情 Interop 例: JavaScript 側から文字列 (not primitive) を取得する C# instance.exports.memory.buffer が Linear memory のバッファ JavaScript C# 側で取得したポインタがそのまま Linear memory のバッファのインデックスとなる 73

Slide 75

Slide 75 text

WASM における Interop 事情 C# から JavaScript のメソッドを呼ぶ C# JavaScript 74

Slide 76

Slide 76 text

WASM における Interop 事情 C# から JavaScript のメソッドを呼ぶ C# DllImport + WasmImportLinkage を設定 JavaScript 75

Slide 77

Slide 77 text

WASM における Interop 事情 C# から JavaScript のメソッドを呼ぶ C# DllImport + WasmImportLinkage を設定 JavaScript Instance を new する時にバインド先を設定する 76

Slide 78

Slide 78 text

非同期対応 77

Slide 79

Slide 79 text

非同期対応非同期どうする？ • WASM のメソッドは同期 (WASI Preview1) • C# 側では非同期を実現する必要があるハンドラーは当然ながら非同期が発生する 78

Slide 80

Slide 80 text

非同期対応非同期は C# (WASM) 側と JavaScript 側を行き来させる • await できるものは基本的に JavaScript 側の Promise • WASM はシングルスレッドなので元より Task.Run とか使えない • C# 側からは Promise が完了したら呼び出される continuation を用意 • それを JavaScript 側に continuation を登録 • そして制御を JavaScript 側に戻す • JavaScript は Promise が完了したら WASM から export されているメソッドを呼び出し WASM 内で continuation を発火させる 79

Slide 81

Slide 81 text

非同期対応非同期は C# (WASM) 側と JavaScript 側を行き来させる • await できるものは基本的に JavaScript 側の Promise • WASM はシングルスレッドなので元より Task.Run とか使えない • C# 側からは Promise が完了したら呼び出される continuation を用意 • それを JavaScript 側に continuation を登録 • そして制御を JavaScript 側に戻す C# (WASM) と JavaScript を行き来するので Reactor である必要がある • JavaScript は Promise が完了したら WASM から export されているメソッドを呼び出し WASM 内で continuation を発火させる 80

Slide 82

Slide 82 text

非同期対応 C# 側で Suspend が発生した時点で JavaScript 側に戻す 81

Slide 83

Slide 83 text

非同期対応 C# 側で Suspend が発生した時点で JavaScript 側に戻す 82

Slide 84

Slide 84 text

非同期対応 C# 側で Suspend が発生した時点で JavaScript 側に戻す await しない 83

Slide 85

Slide 85 text

非同期対応非同期 await が生じたタイミングで continuation を用意する 84

Slide 86

Slide 86 text

非同期対応非同期 await が生じたタイミングで continuation を用意する 85

Slide 87

Slide 87 text

非同期対応非同期 await が生じたタイミングで continuation を用意する 86

Slide 88

Slide 88 text

非同期対応非同期 await が生じたタイミングで continuation を用意する Promise を待機させるタイミングで continuationId を発行して Promise に登録 87

Slide 89

Slide 89 text

非同期対応 Promise が完了した時点で C# (WASM) 側を呼び出す JavaScript C# 88

Slide 90

Slide 90 text

非同期対応 Promise が完了した時点で C# (WASM) 側を呼び出す JavaScript 前述の AwaitPromise で登録した continuation を発火 C# 89

Slide 91

Slide 91 text

まとめ 90

Slide 92

Slide 92 text

まとめ cloudflare-workers-dotnet を公開しました！ • C# で Cloudflare Workers 向けアプリを構築できるように！！ • 最低限必要なものは一式実装済みしかし Cloudflare の膨大なサービス全てのバインドを提供するには至らず… • 流石に物量が凄い • D1 も最低限のバインディングは提供しているが全 API には至っていない • Future work • Microsoft.Extensions 系資産の統合 Interop は全て public なのでライブラリユーザが自前実装可能なものの流石に面倒… • Future work https://github.com/nenoNaninu/cloudflare-workers-dotnet 91

Slide 93

Slide 93 text

cloudflare-workers-dotnet を用いて C# で Cloudflare Workers 向けアプリケーションを構築しよう！ https://github.com/nenoNaninu/cloudflare-workers-dotnet