【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
- 1. 04:00 PM - 04:40 PM
Tetsuro Takao
Blazor WebAssemblyと
JavaScriptのインターオペラビリティ
- 2. Microsoft Developers Day 2022.02.03
Profile
システム構築のプロセス評価、改
善、策定、開発フレームワークの設
計、実装管理、プリセールスやプロ
ジェクトの立ち上げなど
ブログ : http://blog.processtune.com
プロフィール : Facebook, Twitter or MVP
コミュニティ : .NETラボの運営スタッフ
Microsoft MVP : July 2010 ~ Jun 2022
Current expertise : MVP for Developer Technologies
- 5. WebAssemblyが動くしくみ
セクション1 : WebAssemblyとは
X86, 64, Arm,
RISC, …
IDE
Compiler
ActionScript, Ada, C#, Common Lisp,
PicoLisp, Crystal, CUDA, D, Delphi,
Dylan, Forth, Fortran, Graphical G,
Halide, Haskell, Java bytecode, Julia,
Kotlin, Lua, Objective-C, OpenCL,
PostgreSQL's SQL and PLpgSQL, Ruby,
Rust, Scala, Swift, XC, Xojo and Zig.
プログラム
Mono(includes Roslyn)
Mono LLVM, Clang, Gollvm
rustc_codegen_llvm2
rustc_codegen_cranelift
GCC(G++, GCJ, GNAT)
フロントエンド
LLVM※, Cranelift
Singlepass
GCC(ツールの一部分)
バックエンド
Emscripten, Cloud ABI
TynyGo
WASMターゲット
なバックエンド
Node.js 、Wasmtime 、Wasmer
Lucet、WebAssembly Micro Runtime
WAVM、 Wasm3
(Portable WebAssembly system interface)
Runtime on Browser
マルチ・プラットフォーム
WebAssembly JavaScript API
JavaScript
Process
WASM
Browser
(WebAssembly system interface)
(WebAssembly)
※Low-level Virtual Machine
WebAssembly
Language
Go
Compile
Gollvm
Includes
WebAssembly
Runtime
JavaScript
System call
Runtime
C/C++
System call
Language
Go
Compile
Gollvm
Runtime
LLVM
System call
WASM
PWSIX
- 6. WebAssemblyの役割
セクション1 : WebAssemblyとは
X86, 64, Arm,
RISC, …
IDE
Compiler
ActionScript, Ada, C#, Common Lisp,
PicoLisp, Crystal, CUDA, D, Delphi,
Dylan, Forth, Fortran, Graphical G,
Halide, Haskell, Java bytecode, Julia,
Kotlin, Lua, Objective-C, OpenCL,
PostgreSQL's SQL and PLpgSQL, Ruby,
Rust, Scala, Swift, XC, Xojo and Zig.
プログラム
Mono(includes Roslyn)
Mono LLVM, Clang, Gollvm
rustc_codegen_llvm2
rustc_codegen_cranelift
GCC(G++, GCJ, GNAT)
フロントエンド
LLVM※, Cranelift
Singlepass
GCC(ツールの一部分)
バックエンド
Emscripten, Cloud ABI
TynyGo
WASMターゲット
なバックエンド
Node.js 、Wasmtime 、Wasmer
Lucet、WebAssembly Micro Runtime
WAVM、 Wasm3
(Portable WebAssembly system interface)
PWSIX
Runtime on Browser
マルチ・プラットフォーム
WASM
WebAssembly JavaScript API
JavaScript
Process
WASM
Browser
(WebAssembly system interface)
(WebAssembly)
※Low-level Virtual Machine
WebAssembly
Language
Go
Compile
Gollvm
Includes
WebAssembly
Runtime
JavaScript
System call
Runtime
C/C++
System call
Language
Go
Compile
Gollvm
Runtime
LLVM
System call
WebAssemblyは
1. 既存機能をWebで再利用
2. さまざまなアーキテクチャで形成される巨大なエコシステムのパズル
本日のお話は、WebAssemblyというアーキテクチャがパズルとしての
役割を果たして、JavaScriptとRust、C#を相互運用した巨大なエコ
システムを形成する例を解説します。
- 8. エコシステム
CD/CIレイヤー
エコシステム形成(仮想化)
セクション2 : Azure Static Web Apps
Azure
C# Ecosystem
Container
Rust Ecosystem
On-premise
JavaScript Ecosystem
WebAssembly
WebAssembly
System Interface
WebAssembly
Blazor WebAssembly
MongoDB
Azure
Storage
Azure Static Web Apps
相互運用アーキテクチャ
Node.js + Express
Web app
development environment
C#
Web mashup
development environment
Rust
Stable function & data
storage
外部APIをマッシュアップして
スタティックコンテンツを提供
するAzure Webアプリ
メッシュエンドポイントを形成
安定稼働が検証できているコ
ンポーネント化された既存のプ
ログラム・ナレッジリソース
開発が常に進行している継
続的インテグレーション開発
環境
- 9. エコシステム
CD/CIレイヤー
エコシステム形成(仮想化)
セクション2 : Azure Static Web Apps
Azure
C# Ecosystem
Container
Rust Ecosystem
On-premise
JavaScript Ecosystem
WebAssembly
WebAssembly
System Interface
WebAssembly
Blazor WebAssembly
MongoDB
Azure
Storage
Azure Static Web Apps
相互運用アーキテクチャ
Node.js + Express
Web app
development environment
C#
Web mashup
development environment
Rust
Stable function & data
storage
外部APIをマッシュアップして
スタティックコンテンツを提供
するAzure Webアプリ
メッシュエンドポイントを形成
安定稼働が検証できているコ
ンポーネント化された既存のプ
ログラム・ナレッジリソース
開発が常に進行している継
続的インテグレーション開発
環境
- 10. エコシステム
CD/CIレイヤー
エコシステム形成(仮想化)
セクション2 : Azure Static Web Apps
Azure
C# Ecosystem
Container
Rust Ecosystem
On-premise
JavaScript Ecosystem
WebAssembly
WebAssembly
System Interface
WebAssembly
Blazor WebAssembly
MongoDB
Azure
Storage
Azure Static Web Apps
相互運用アーキテクチャ
Node.js + Express
Web app
development environment
C#
Web mashup
development environment
Rust
Stable function & data
storage
外部APIをマッシュアップして
スタティックコンテンツを提供
するAzure Webアプリ
メッシュエンドポイントを形成
安定稼働が検証できているコ
ンポーネント化された既存のプ
ログラム・ナレッジリソース
開発が常に進行している継
続的インテグレーション開発
環境
- 11. CD/CIレイヤー
外部APIを利用するAzure Static Web Appを作成する
セクション2 : Azure Static Web Apps
Azure
C# Ecosystem
Container
Rust Ecosystem
On-premise
JavaScript Ecosystem
WebAssembly
WebAssembly
System Interface
WebAssembly
Blazor WebAssembly
MongoDB
Azure
Storage
Azure Static Web Apps
相互運用アーキテクチャ
Node.js + Express
Web app
development environment
C#
Web mashup
development environment
Rust
Stable function & data
storage
外部APIをマッシュアップして
スタティックコンテンツを提供
するAzure Webアプリ
メッシュエンドポイントを形成
安定稼働が検証できているコ
ンポーネント化された既存のプ
ログラム・ナレッジリソース
開発が常に進行している継
続的インテグレーション開発
環境
Azure Static Web App
- 12. WebAssembly
WebAssemblyのホストとグルーコード
セクション2 : Azure Static Web Apps
Azure
C# Ecosystem
Blazor WebAssembly
Azure
Storage
Azure Static Web Apps
HTML、Images、CSS
JavaScript、TypeScript
Geolocation API、MediaDevices、
Storage API…
UIスレッド
.NETランタイム
blazor.webassembly.js
依存
ファイル
HTML、Images、CSS
JavaScript、TypeScript
Geolocation API、MediaDevices、
Storage API…
UIスレッド
Rustランタイム
%appname%_bg.wasm
%appname%_bg.wasm.d.ts
%appname%.d.js
%appname%.js
glue code
- 14. Visual Studio Codeで作業
セクション2 : Azure Static Web Apps
フォルダーを開くダイアログボックスで作業ディレクトリを
作成して「Ctrl+@」でターミナルを開き「dotnet new
blazorwasm」でプロジェクトを作成します。
ファイルが自動生成されます
- 28. CD/CIレイヤー
セルフWebホストするRust WebAssemblyを作成する
セクション3 : エコシステムの作成例
Azure
C# Ecosystem
Container
Rust Ecosystem
On-premise
JavaScript Ecosystem
WebAssembly
WebAssembly
System Interface
WebAssembly
Blazor WebAssembly
MongoDB
Azure
Storage
Azure Static Web Apps
相互運用アーキテクチャ
Node.js + Express
Web app
development environment
C#
Web mashup
development environment
Rust
Stable function & data
storage
外部APIをマッシュアップして
スタティックコンテンツを提供
するAzure Webアプリ
メッシュエンドポイントを形成
安定稼働が検証できているコ
ンポーネント化された既存のプ
ログラム・ナレッジリソース
開発が常に進行している継
続的インテグレーション開発
環境
Rust Web API
- 29. Visual Studio Code Extensionsの準備
セクション3 : エコシステムの作成例
Rust
Teams Toolkit
Deploy Teams apps
with Microsoft Graph,
and in Azure and M365
Azure Static Web Apps
Create and manage
Azure Static Web Apps directly
Remote Development
Remote SSH
Remote Containers
Remote WSL
Docker
Containerization tool
Language support
Thunder Client
API Client Extention
MongoDB for VS Code
for working with MongoDB,
whether your own instance or in MongoDB Atlas.
Microsoft.AspNetCore.Ra
zor.VSCode.BlazorWasm
DebuggingExtension
- 34. RustのWeb AssemblyをAPIでサービスする
セクション3 : エコシステムの作成例
Container
Rust Ecosystem
WebAssembly
WebAssembly
MongoDB
Rust
Stable function & data
storage
Rustで実装
他Webサービス
!Point
RustはWebサービス構築に向いてない
と言われています。.NETなどに比べ認
証、ルーティング、SDKなどが充実して
いないなど…
マイクロサービスでは各サービスにサイド
カーを用意したりサービスメッシュであれ
ばメッシュエンドポイントに認証やロギン
グロードバランシングなどのデータプレーン
が配置されますので、マイクロサービスに
おけるサーバーレス・ファンクションを提供
するためのWeb API機能であれば
Rustで十分作れます。
- 36. WSLとdocker
セクション3 : エコシステムの作成例
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
echo "deb [arch=arm64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] ¥
https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
$ sudo apt-get install apt-transport-https ca-certificates curl gnupg lsb-release
初めてWSLを使う場合はツール群をインストール
docker ce(community edition)がインストールされていない場合
GNU Privacy Guard (GnuPG, GPG)キーの取得と配置
$ sudo apt-get update
$ sudo apt-get install docker-ce docker-ce-cli containerd.io
$ apt-cache madison docker-ce
インストールできるdocker ceの確認
$ sudo apt-get install docker-ce=5:20.10.8~3-0~ubuntu-focal docker-ce-cli=5:20.10.8~3-0~ubuntu-focal containerd.io
docker ceのインストール
- 37. Ubuntuでdocker環境を作成する(Armの方向け)
セクション3 : エコシステムの作成例
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
echo "deb [arch=arm64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] ¥
https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
$ sudo apt-get install apt-transport-https ca-certificates curl gnupg lsb-release
初めてWSLを使う場合はツール群をインストール
docker ce(community edition)がインストールされていない場合
GNU Privacy Guard (GnuPG, GPG)キーの取得と配置
$ sudo apt-get update
$ sudo apt-get install docker-ce docker-ce-cli containerd.io
$ apt-cache madison docker-ce
インストールできるdocker ceの確認
$ sudo apt-get install docker-ce=5:20.10.8~3-0~ubuntu-focal docker-ce-cli=5:20.10.8~3-0~ubuntu-focal containerd.io
docker ceのインストール
- 38. MongoDBオフィシャル・イメージにRust追加
セクション3 : エコシステムの作成例
$ sudo docker pull mongo
$ sudo docker run -d -p 7878:7878 -p 27017:27017 --init --name svgqrcodedb mongo:latest
$ sudo docker exec -it svgqrcodedb /bin/bash
# echo "nameserver 8.8.8.8" | tee /etc/resolv.conf > /dev/null
# apt update && apt upgrade -y
# apt install curl
# curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
--インストーラー
>[return] --リターンで既定のインストールを選択
--インストール終了後、Rustランタイム(&パッケージマネージャー)のパスを設定
# source $HOME/.cargo/env
--コンパイラーインストール
# apt install build-essential
>[y] --yでインストールを開始
--コンパイラーインストール終了
# mkdir /home/rust
# mkdir /home/rust/QRCodeCreation
# chmod 777 /home/rust/QRCodeCreation
# cd /home/rust/QRCodeCreation
DockerのMongoDBオフィシャルイメージ
以降は以下の方法でプルグラムを作成できます
1.GitHubでLinux側へ共有
2.Visual Studio Code(要Docker Desktop)で編集
3.ソースをコピペ(Windows Arm向け)
ポート2つ持つコンテナを起動
Bashでコンテナ内を操作
Rustのインストール
- 39. Rustの実行とWindows側のプログラムの移植
セクション3 : エコシステムの作成例
# mkdir src
# cd src
# touch main.rs
# apt install vim
--インストーラー
>[y] --yでインストールを選択
--インストール終了
# vim main.rs
--vim
~[i] --iで挿入モード編集開始
fn main() {
println!("Hello World!");
}
~[esc][:][w][enter] --[:][w][enter]で保存
~[:][q][enter] --[:][q][enter]で終了
--vim終了後、コンパイルと実行
# rustc main.rs
# ./main
# vim main.rs
…--main.rsとCargo.tomlの中身をvimでコピーする
/home/rust/QRCodeCreation# cargo run
- 40. ブラウザでQRコードのWebAssemblyを表示する
セクション3 : エコシステムの作成例
$ sudo docker run -d --network host -p 7878:7878 -p 27017:27017 --init --name svgqrcodedb svgqrcodedb:v0.2
$ sudo docker exec -it svgqrcodedb /bin/bash
# apt update && apt upgrade -y
--# apt install pkg-config(入っていなかったら入れる)
# rustup target add aarch64-unknown-linux-gnu
# rustup toolchain install stable-aarch64-unknown-linux-gnu
# cd /home/rust/QRCodeCreation
--以下のどちらかを実行(この段階ではWebAssemblyではない。以下はCD/CIの運用設計によって変わる)
# cargo build --bin create_qrcode_svg --target aarch64-unknown-linux-gnu --release
or
# rustup default stable-aarch64-unknown-linux-gnu
# cargo build --bin create_qrcode_svg --release
--
# cargo run --release
- 42. CD/CIレイヤー
JavaScriptとの通信を作成する
セクション4 : JavaScriptとの相互運用
Azure
C# Ecosystem
Container
Rust Ecosystem
On-premise
JavaScript Ecosystem
WebAssembly
WebAssembly
System Interface
WebAssembly
Blazor WebAssembly
MongoDB
Azure
Storage
Azure Static Web Apps
相互運用アーキテクチャ
Node.js + Express
Web app
development environment
C#
Web mashup
development environment
Rust
Stable function & data
storage
外部APIをマッシュアップして
スタティックコンテンツを提供
するAzure Webアプリ
メッシュエンドポイントを形成
安定稼働が検証できているコ
ンポーネント化された既存のプ
ログラム・ナレッジリソース
開発が常に進行している継
続的インテグレーション開発
環境
既存JavaScriptコード
ライブラリ等
- 48. ◼ 本書に記載した情報は、本書各項目に関する発行日現在の Microsoft の見解を表明するものです。Microsoftは絶えず変化する市場に対応しなければならないため、ここに記載した情報に
対していかなる責務を負うものではなく、提示された情報の信憑性については保証できません。
◼ 本書は情報提供のみを目的としています。 Microsoft は、明示的または暗示的を問わず、本書にいかなる保証も与えるものではありません。
◼ すべての当該著作権法を遵守することはお客様の責務です。Microsoftの書面による明確な許可なく、本書の如何なる部分についても、転載や検索システムへの格納または挿入を行うこと
は、どのような形式または手段(電子的、機械的、複写、レコーディング、その他)、および目的であっても禁じられています。これらは著作権保護された権利を制限するものではあり
ません。
◼ Microsoftは、本書の内容を保護する特許、特許出願書、商標、著作権、またはその他の知的財産権を保有する場合があります。Microsoftから書面によるライセンス契約が明確に供給さ
れる場合を除いて、本書の提供はこれらの特許、商標、著作権、またはその他の知的財産へのライセンスを与えるものではありません。
◼ Microsoft, Windows, その他本文中に登場した各製品名は、Microsoft Corporation の米国およびその他の国における登録商標または商標です。
その他、記載されている会社名および製品名は、一般に各社の商標です。