Slide 1

Slide 1 text

Envoy Meetup Tokyo #2 Ryuma Yoshida @ryysud WebAssembly Hub と WASM OCI Image Specification について

Slide 2

Slide 2 text

Ryuma Yoshida @ryysud Software Engineer at Z Lab Corporation

Slide 3

Slide 3 text

WebAssembly Hub について

Slide 4

Slide 4 text

WebAssembly Hub について ▶ Wasm Module を OCI イメージとして 管理/配布 するためのプラットフォーム + Solo.io が Google と Istio コミュニティと協⼒して開発した + Envoy の Wasm Filter の 作成/共有/デプロイ を簡略化するのが⽬的 + イメージの仕様は WASM OCI Image Specification で標準化されている + https://webassemblyhub.io ▶ Wasm イメージは wasme という CLI を利⽤することで Docker コンテナと同じくらい簡単に扱える + wasme で Wasm イメージの Build/Push/Pull/Envoy への Deploy などの操作が可能 + https://github.com/solo-io/wasme ▶ Wasm イメージは Envoy の Wasm Filter としてデプロイできる + デプロイには wasme を利⽤する + Wasme Operator を利⽤して Istio 内の Envoy に CRD ベースで Wasm Filter をデプロイすることも可能 + https://docs.solo.io/web-assembly-hub/latest/tutorial_code/wasme_operator/

Slide 5

Slide 5 text

wasme の利⽤⽅法 ▶ wasme init(Wasm Filter プロジェクトの初期化) ▶ wasme build(Wasm イメージのビルド) ▶ wasme tag(Wasm イメージのタグ付け) ▶ wasme list(Wasm イメージの⼀覧表⽰) ▶ wasme login(Wasm イメージレジストリへのログイン) ▶ wasme push(Wasm イメージのプッシュ) ▶ wasme pull(Wasm イメージのプル) ▶ wasme deploy(Wasm Filter を Envoy にデプロイ) ▶ wasme undeploy(Wasm Filter を Envoy から削除) ※ Version 0.0.20 でサポートされているコマンド

Slide 6

Slide 6 text

WASM OCI Image Specification について

Slide 7

Slide 7 text

WASM OCI Image Specification について ▶ Wasm Module を OCI イメージとしてバンドルするための仕様 + ⼀般的な仕様のため使⽤⽤途は限定されておらずあらゆる種類の Wasm Module に対応 + Envoy の Wasm Filter やブラウザ拡張など + Wasm Module を使⽤するアプリに特化して設計された OCI イメージ仕様の拡張という位置づけ + https://github.com/solo-io/wasm-image-spec ▶ Wasm OCI Image は以下のファイルから構成される + Wasm バイナリファイル(Wasm Module) + Wasm ランタイムで利⽤される JSON 形式の設定ファイル(Runtime Configuration) + JSON 形式の Wasm バイナリファイルのメタデータ ▶ Envoy は Wasm OCI Image を ローカルディスクまたは http でロードして Wasm Filter として実⾏する + WebAssembly Hub から Pull してローカルにキャッシュして Wasm ランタイムで実⾏するイメージ

Slide 8

Slide 8 text

Wasm Filter を Envoy にデプロイする⽅法

Slide 9

Slide 9 text

Wasm Filter を Envoy にデプロイする⽅法 ▶ wasme を利⽤して Istio または Gloo により展開された Envoy に Wasm Filter をデプロイできる + Istio へのデプロイでは Wasm Filter を Envoy で使⽤する設定を EnvoyFilter リソースとして作成する + Gloo の場合も同じようにカスタムリソースを作成する仕組み + 開発⽤途でローカル環境に Wasm Filter がセットアップされた Envoy を起動することも可能 ▶ wasme でデプロイを実⾏すると Wasm Filter をキャッシュするためのコンテナがデプロイされる + Kubernetes クラスタ内に wasme cache container が DaemonSet としてデプロイされる + Envoy は cache container によってキャッシュされた Wasm イメージを hostPath でマウントして利⽤する + https://github.com/solo-io/wasme/tree/v0.0.20/pkg/cmd/cache ▶ Wasme Operator を利⽤して Istio 内の Envoy に CRD ベースで Wasm Filter をデプロイすることも可能 + Wasm Filter を本番運⽤する場合に Operator を利⽤して設定などを CR で GitOps 的に管理するのが良い + Operator で利⽤する CR は FilterDeployment リソース + https://github.com/solo-io/wasme/blob/v0.0.20/operator/install/wasme/crds/wasme.io_v1_crds.yaml

Slide 10

Slide 10 text

wasme を利⽤して Istio により展開された Envoy に Wasm Filter をデプロイ

Slide 11

Slide 11 text

wasme cache container のデプロイ

Slide 12

Slide 12 text

wasme cache container によって K8s Worker Nodes にキャッシュされた Wasm イメージを Envoy コンテナに hostPath でマウントするために Istio 仕様の Annotation をアプリの Deployment に追加 sidecar.istio.io/userVolume: '[{"name":"cache-dir","hostPath":{"path":"/var/local/lib/wasme-cache"}}]' sidecar.istio.io/userVolumeMount: '[{"mountPath":"/var/local/lib/wasme-cache","name":"cache-dir"}]'

Slide 13

Slide 13 text

Wasm Filter を Envoy で使⽤する設定を定義した EnvoyFilter リソースを作成

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

まとめ

Slide 17

Slide 17 text

まとめ ▶ WebAssembly Hub は Wasm Module を OCI イメージとして         管理/配布 するためのプラットフォーム ▶ Wasm イメージの仕様は WASM OCI Image Specification で標準化されている ▶ wasme または Wasme Operator を使⽤することで Istio, Gloo によって展開さ れた Envoy に Wasm イメージを Wasm Filter としてデプロイできる

Slide 18

Slide 18 text

https://qiita.com/ryysud/items/f4faa4e92cb925ebbfce

Slide 19

Slide 19 text

https://qiita.com/ryysud/items/bf4139edc8165f991045

Slide 20

Slide 20 text

WE ARE HIRING! https://zlab.co.jp

Slide 21

Slide 21 text

Thank you!