SlideShare a Scribd company logo

Wasm blazor and wasi 2

•Download as PPTX, PDF•
•
T
Takao Tetsuro

describe wasm

Technology
1 of 91
Explain containerize design using WASM and Blazor, WASI WebAssemblyとBlazor 、 WebAssembly System Interfaceで コンテナライズの設計を解説（2）
Profile システム構築のプロセス評価、改善、策定、 開発フレームワークの設計、実装管理、プリ セールスやプロジェクトの立ち上げなど ブログ : http://blog.processtune.com プロフィール : Facebook, Twitter or MVP コミュニティ : .NETラボの運営スタッフ Microsoft MVP : July 2010 ～ Jun 2022 Current expertise : MVP for Developer Technologies
Containerization 01 メッセージング・ミドルウェアは、分散コンピ ューティングのアーキテクチャの一部です。 実装の形としてgRPC、Kafka、SignalR、 Azure Web PubSubなどがあります。 WASM、WASI 02 Code 03 WSLのubuntuに配置したdockerイメージ 内のnodeに実装したWebアプリから、 RustのQRコード生成プログラムを含む WebAssemblyを配信し、エッジサイドで QRコードを生成、編集します。 Conclusion 04 本セッションのまとめ Link 05 おさらい PWA（Progressive Web Application）、 WebAssembly、 WebAssembly System Interface、 Blazorの仮想化技術 本セッションの作成における 出典と追加の技術情報
Containerization 01 メッセージング・ミドルウェアは、分散コンピ ューティングのアーキテクチャの一部です。 実装の形としてgRPC、Kafka、SignalR、 Azure Web PubSubなどがあります。 WASM、WASI 02 PWA（Progressive Web Application）、 WebAssembly、 WebAssembly System Interface、 Blazorの仮想化技術 Code 03 WSLのubuntuに配置したdockerイメージ 内のnodeに実装したWebアプリから、 RustのQRコード生成プログラムを含む WebAssemblyを配信し、エッジサイドで QRコードを生成、編集します。 Conclusion 04 本セッションのまとめ Link 05 本セッションの作成における 出典と追加の技術情報 おさらい
Containerization 01 メッセージング・ミドルウェアは、分散コンピ ューティングのアーキテクチャの一部です。 実装の形としてgRPC、Kafka、SignalR、 Azure Web PubSubなどがあります。 WASM、WASI 02 PWA（Progressive Web Application）、 WebAssembly、 WebAssembly System Interface、 Blazorの仮想化技術 Code 03 WSLのubuntuに配置したdockerイメージ 内のnodeに実装したWebアプリから、 RustのQRコード生成プログラムを含む WebAssemblyを配信し、エッジサイドで QRコードを生成、編集します。 Conclusion 04 本セッションのまとめ Link 05 本セッションの作成における 出典と追加の技術情報 本日のAgenda
Containerization 01 コンテナ化とメッセージング・ミドルウェア、メッセージの方 向のパターンとコンテナライゼーションの範囲について
コンテナ化の範囲について Containerization マイクロサービスとコンテナ化のコンセプトはよく似ており、どち らもソフトウェア開発の手法として、アプリケーションをより小 さなサービスやコンポーネントの集合体に変換し、移植性、 拡張性、効率性、管理のしやすさを実現するものです。 さらに、マイクロサービスとコンテナ化は一緒に使うと効果的 です。コンテナは、従来のモノリス型やモジュラー型のマイクロ サービスに関わらず、あらゆるアプリケーションを軽量にカプセ ル化します。コンテナ内で開発されたマイクロサービスは、開 発プロセスの移植性、ベンダーとの互換性（ベンダーロック インなし）に加え、開発者の俊敏性、障害の隔離、サーバ ーの効率化、インストール、スケーリング、管理の自動化、セ キュリティの強化など、コンテナ化特有のメリットをすべて享 受することができます。
ステートフル・ミドルウェア 開発端末 Nginx （リバースプロキシ） 8080->8081 （as sample） Rust+Neo4j （サービス・コンテナ） Alpine Linux Node+MongoDB （サービス・コンテナ） Alpine Linux Node+Express （製品コンテナ） Alpine Linux Rust QR code App Node SVG free icon list App Node SVG icon coloring App 8080 8081 8082 8083 ステートフル・ミドルウェア 永続化層 永続化層 永続化層
WSLとUbuntu
dockerの準備（ARM） 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のインストール
・runに引数「--rm」をつけると作 業終了後にコンテナを削除するこ とができます 開発端末 Nginx （リバースプロキシ） 8080->8081 （as sample） Rust+Neo4j （サービス・コンテナ） Alpine Linux Node+MongoDB （サービス・コンテナ） Alpine Linux Node+Express （製品コンテナ） Alpine Linux Rust QR code App Node SVG free icon list App Node SVG icon coloring App 8080 8081 8082 8083 ステートフル・ミドルウェア 永続化層 永続化層 永続化層 Nginx $ sudo docker pull nginx $ sudo docker run -dit -p 8080:80 --init --name rproxy nginx $ sudo docker exec –it rproxy /bin/bash # apt-get install vim # vim /etc/nginx/nginx.conf conf $ sudo service docker start Dockerがスタートしてなかったら
開発端末 Nginx （リバースプロキシ） 8080->8081 （as sample） Rust+Neo4j （サービス・コンテナ） Alpine Linux Node+MongoDB （サービス・コンテナ） Alpine Linux Node+Express （製品コンテナ） Alpine Linux Rust QR code App Node SVG free icon list App Node SVG icon coloring App 8080 8081 8082 8083 ステートフル・ミドルウェア 永続化層 永続化層 永続化層 ステートフル・ミドルウェア $ sudo docker pull nginx $ sudo docker run -it -d -p 8080:80 –name rproxy nginx $ sudo docker exec –it rproxy /bin/bash # apt-get install vim # vim /etc/nginx/nginx.conf conf $ sudo service docker start Dockerがスタートしてなかったら
$ sudo docker pull node $ sudo docker run –dit –p 8081:3000 --init --name svgcoloringweb node $ sudo docker exec –it nodeweb /bin/bash # cd /home/node # apt update && apt upgrade -y # npm init # npm install –g express-generator # express # npm i --package-lock-only # npm audit fix --force # DEBUG=node:* npm start 開発端末 Nginx （リバースプロキシ） 8080->8081 （as sample） Rust+Neo4j （サービス・コンテナ） Alpine Linux Node+MongoDB （サービス・コンテナ） Alpine Linux Node+Express （製品コンテナ） Alpine Linux Rust QR code App Node SVG free icon list App Node SVG icon coloring App 8080 8081 8082 8083 ステートフル・ミドルウェア 永続化層 永続化層 永続化層 Node root@6c857308d3b7:/home/node# DEBUG=node:* npm start > node@0.0.0 start > node ./bin/www node:server Listening on port 3000 +0ms ^C root@6c857308d3b7:/home/node# Expressの既定はポート3000なので、 これが出たらいったんCtrl+Cで終了しapp.jsを編集します pug（jade） = データドリブンなホームページ・テンプレート EJS =スタンダードなJavaScriptホームページ・テンプレート Handlebars = イベント定義を簡素化したホームページ・テンプレート Hogan.js = テンプレートの動的変更が可能 Twig = PHP用のホームページ・テンプレート ・途中は既定の まま「y」で進む ・脆弱性は0に なるまで修正
$ sudo docker pull node $ sudo docker run –it –d –p 8081:3000 –name svgcoloringweb node $ sudo docker exec –it nodeweb /bin/bash # cd /home/node # apt update && apt upgrade -y # npm init # npm install –g express-generator # express # npm i --package-lock-only # npm audit fix --force # DEBUG=node:* npm start 開発端末 Nginx （リバースプロキシ） 8080->8081 （as sample） Rust+Neo4j （サービス・コンテナ） Alpine Linux Node+MongoDB （サービス・コンテナ） Alpine Linux Node+Express （製品コンテナ） Alpine Linux Rust QR code App Node SVG free icon list App Node SVG icon coloring App 8080 8081 8082 8083 ステートフル・ミドルウェア 永続化層 永続化層 永続化層 Node pug（jade） = データドリブンなホームページ・テンプレート EJS =スタンダードなJavaScriptホームページ・テンプレート Handlebars = イベント定義を簡素化したホームページ・テンプレート Hogan.js = テンプレートの動的変更が可能 Twig = PHP用のホームページ・テンプレート ・途中は既定の まま「y」で進む ・脆弱性は0に なるまで修正
Node
Node
Node
Node
Node
Node
-- current directory : /home/node # apt update && apt upgrade -y # apt install git # git config --global user.name ”tetsuro takao” # git config --global user.email ”tetsuro.takao@processtune.com” # git config --global init.defaultBranch main # apt update && apt upgrade -y # apt install vim # apt update && apt upgrade -y 開発端末 Nginx （リバースプロキシ） 8080->8081 （as sample） Rust+Neo4j （サービス・コンテナ） Alpine Linux Node+MongoDB （サービス・コンテナ） Alpine Linux Node+Express （製品コンテナ） Alpine Linux Rust QR code App Node SVG free icon list App Node SVG icon coloring App 8080 8081 8082 8083 ステートフル・ミドルウェア 永続化層 永続化層 永続化層 git
-- current directory : /home/node # exit $ sudo docker commit svgcoloringweb svgcoloringweb:v0.1 $ sudo docker save svgcoloringweb:v0.1 > /mnt/c/users/%USER NAME%/user/globalstorage/svgcoloringweb.v0.1.tar 開発端末 Nginx （リバースプロキシ） 8080->8081 （as sample） Rust+Neo4j （サービス・コンテナ） Alpine Linux Node+MongoDB （サービス・コンテナ） Alpine Linux Node+Express （製品コンテナ） Alpine Linux Rust QR code App Node SVG free icon list App Node SVG icon coloring App 8080 8081 8082 8083 ステートフル・ミドルウェア 永続化層 永続化層 永続化層 Save
開発端末 Nginx （リバースプロキシ） 8080->8081 （as sample） Rust+Neo4j （サービス・コンテナ） Alpine Linux Node+MongoDB （サービス・コンテナ） Alpine Linux Node+Express （製品コンテナ） Alpine Linux Rust QR code App Node SVG free icon list App Node SVG icon coloring App 8080 8081 8082 8083 ステートフル・ミドルウェア 永続化層 永続化層 永続化層 ログインユーザーのステート ユーザーに 紐づくステート
マイクロサービスの設計 https://domaindrivendesign.org/ コンテキスト を設計 ドメイン構成 を設計 モデル を作成
ドメイン・ドリブン・デザインの要素 ドメイン サブドメイン バウンデッド・コンテキスト エンティティ バリューオブジェクト サービス イベント バウンデッド・コンテキスト … … … … … サブドメイン バウンデッド・コンテキスト エンティティ コンテキスト固有の エンティティ インジェクションによ る亜種モデル … … ユーザー・インターフェイス アプリケーション クラウド・オンプレミス インフラストラクチャ
バウンデッド・コンテキスト QRコード情報 （ユースケース／バウンデッド・コンテキスト） ログインユーザー （バリュー・オブジェクト） SVG（エンティティ） 色（エンティティ） 履歴（エンティティ） ログイン情報 （ユースケース／バウンデッド・コンテキスト） ログインユーザー （バリュー・オブジェクト） ログイン状態（エンティティ） アイデンティティ・プロバイダー （バリュー・オブジェクト） フリーアイコン情報 （ユースケース／バウンデッド・コンテキスト） ログインユーザー （バリュー・オブジェクト） URL（エンティティ） 画像（エンティティ） 色（エンティティ） ログイン情報 （ユースケース／バウンデッド・コンテキスト） ログインユーザー （バリュー・オブジェクト） ログイン状態（エンティティ） アイデンティティ・プロバイダー （バリュー・オブジェクト） SVG色付けアプリ （ドメイン） QRコード生成機能 （サブドメイン／ユーザーストーリー） フリーアイコン色付け機能 （サブドメイン／ユーザーストーリー）
エンティティとバリューオブジェクト SVG（エンティティ） URL 画像 XML 色（エンティティ） RGB 名前 English ログインユーザー （バリュー・オブジェクト） ID 表示名 認証URL アイコンURL アイコン色 QRコード QRコード色 アイデンティティ・プロバイダー （バリュー・オブジェクト） ロゴ 認証URL アクセス・トークン リフレッシュ・トークン 発行者
サービスとイベント 開発端末 Nginx （リバースプロキシ） 8080->8081 （as sample） Rust+Neo4j （サービス・コンテナ） Alpine Linux Node+MongoDB （サービス・コンテナ） Alpine Linux Node+Express （製品コンテナ） Alpine Linux Rust QR code App Node SVG free icon list App Node SVG icon coloring App 8080 8081 8082 8083 ステートフル・ミドルウェア 永続化層 永続化層 永続化層 8081からの要 求でサービスする 8081からの要 求でサービスする
サービスリポジトリとアグリゲート、ファクトリ Node+MongoDB （サービス・コンテナ） Alpine Linux ファクトリ ステートフル・ミドルウェア 永続化層 SVG アカウントに紐づくURLへ SVGを要求 アカウントで SVGを要求 アカウント SVGを保存 … … … … … アカウントから SVGを引く https://freesvg.org/ アイコンサービス のアイコン情報 … … ログインサービス のログインモデル サービスリポジトリ ：そのサービスが扱うバウンデッドコンテキストのモデルの形で永続化する アグリゲート ：他のバウンデッドコンテキストのモデルとそのサービスが扱うバウンデッド コンテキストのモデルの形に合致させるための翻訳を行う ファクトリ ：サービスの入出力口 アグリゲート サービスリポジトリ モデルへ … … アイコンサービス のログインモデル SVGそのものか ら抜き出す SVG URL XML … … … … … アイコンサービス のアイコン情報 … … アイコンサービス の色モデル
イベント（イベントの明確化による機能要件の追加） Node+MongoDB （サービス・コンテナ） Alpine Linux ファクトリ ステートフル・ミドルウェア 永続化層 SVG アカウントに紐づくURLへ SVGを要求 SVG アカウントで SVGを要求 アカウント SVGを保存 アカウントから SVGを引く https://freesvg.org/ アグリゲート サービスリポジトリ SVGそのものか ら抜き出す 「ユーザー操作による最新情報の取得」、「常に最新の情報を取得し、取得できなかった場合に のみ永続化層のデータを使う」などの制約はマイクロサービスの可搬性、再利用性を失います。 そのため、サービスに最新の問合せを行うかどうかのオプションも設ける。
MongoDB + Node 開発端末 Nginx （リバースプロキシ） 8080->8081 （as sample） Rust+Neo4j （サービス・コンテナ） Alpine Linux Node+MongoDB （サービス・コンテナ） Alpine Linux Node+Express （製品コンテナ） Alpine Linux Rust QR code App Node SVG free icon list App Node SVG icon coloring App 8080 8081 8082 8083 ステートフル・ミドルウェア 永続化層 永続化層 永続化層 mongoの既定はポート27017、expressの既定ポートは3000なので、 mongoはそのまま、expressのapp.jsを8082に編集します。 ./bin/wwwにも同じ記述がありますので修正します。 $ sudo docker pull mongo $ sudo docker run -d -p 8082:80 -p 27017:27017 --init --name svgfreeicondb mongo:latest $ sudo docker exec -it svgfreeicondb /bin/bash # apt install -y curl # curl -fsSL https://deb.nodesource.com/setup_17.x | bash # apt install -y nodejs # npm install -g npm # apt update && upgrade -y # mkdir /home/node # chmod 777 /home/node # cd /home/node --以下node同じ手順でexpressを実行しWebアプリを作成
ポートの修正 開発端末 Nginx （リバースプロキシ） 8080->8081 （as sample） Rust+Neo4j （サービス・コンテナ） Alpine Linux Node+MongoDB （サービス・コンテナ） Alpine Linux Node+Express （製品コンテナ） Alpine Linux Rust QR code App Node SVG free icon list App Node SVG icon coloring App 8080 8081 8082 8083 ステートフル・ミドルウェア 永続化層 永続化層 永続化層 mongoの既定はポート27017、expressの既定ポートは3000なので、 mongoはそのまま、expressのapp.jsを80に編集します $ sudo docker pull mongo $ sudo docker run -d -p 8082:80 -p 27017:27017 --init --name svgfreeicondb mongo:latest $ sudo docker exec -it svgfreeicondb /bin/bash # apt install -y curl # curl -fsSL https://deb.nodesource.com/setup_17.x | bash # apt install -y nodejs # npm install -g npm # apt update && upgrade -y # mkdir /home/node # chmod 777 /home/node # cd /home/node --以下node同じ手順でexpressを実行しWebアプリを作成
MongoDBの確認 開発端末 Nginx （リバースプロキシ） 8080->8081 （as sample） Rust+Neo4j （サービス・コンテナ） Alpine Linux Node+MongoDB （サービス・コンテナ） Alpine Linux Node+Express （製品コンテナ） Alpine Linux Rust QR code App Node SVG free icon list App Node SVG icon coloring App 8080 8081 8082 8083 ステートフル・ミドルウェア 永続化層 永続化層 永続化層 mongoの既定はポート27017、expressの既定ポートは3000なので、 mongoはそのまま、expressのapp.jsを80に編集します $ sudo docker pull mongo $ sudo docker run -d -p 8082:80 -p 27017:27017 --init --name svgfreeicondb mongo:latest $ sudo docker exec -it svgfreeicondb /bin/bash # apt install -y curl # curl -fsSL https://deb.nodesource.com/setup_17.x | bash # apt install -y nodejs # npm install -g npm # apt update && upgrade -y # mkdir /home/node # chmod 777 /home/node # cd /home/node --以下node同じ手順でexpressを実行しWebアプリを作成
MongoDB for VS Code Extension
dotnet new --use-minimal-apis --no-https 開発端末 Nginx （リバースプロキシ） 8080->8081 （as sample） Rust+Neo4j （サービス・コンテナ） Alpine Linux Node+MongoDB （サービス・コンテナ） Alpine Linux Node+Express （製品コンテナ） Alpine Linux Rust QR code App Node SVG free icon list App Node SVG icon coloring App 8080 8081 8082 8083 ステートフル・ミドルウェア 永続化層 MongoDB 永続化層
dotnet new --use-minimal-apis --no-https 開発端末 Nginx （リバースプロキシ） 8080->8081 （as sample） Rust+Neo4j （サービス・コンテナ） Alpine Linux Node+MongoDB （サービス・コンテナ） Alpine Linux Node+Express （製品コンテナ） Alpine Linux Rust QR code App Node SVG free icon list App Node SVG icon coloring App 8080 8081 8082 8083 ステートフル・ミドルウェア 永続化層 MongoDB 永続化層
dotnet new --use-minimal-apis --no-https
設定ファイルと設定値の読み込み 開発端末 Nginx （リバースプロキシ） 8080->8081 （as sample） Rust+Neo4j （サービス・コンテナ） Alpine Linux Node+MongoDB （サービス・コンテナ） Alpine Linux Node+Express （製品コンテナ） Alpine Linux Rust QR code App Node SVG free icon list App Node SVG icon coloring App 8080 8081 8082 8083 ステートフル・ミドルウェア 永続化層 MongoDB 永続化層
Swagger 開発端末 Nginx （リバースプロキシ） 8080->8081 （as sample） Rust+Neo4j （サービス・コンテナ） Alpine Linux Node+MongoDB （サービス・コンテナ） Alpine Linux Node+Express （製品コンテナ） Alpine Linux Rust QR code App Node SVG free icon list App Node SVG icon coloring App 8080 8081 8082 8083 ステートフル・ミドルウェア 永続化層 MongoDB 永続化層
メッセージング部 開発端末 Nginx （リバースプロキシ） 8080->8081 （as sample） Rust+Neo4j （サービス・コンテナ） Alpine Linux Node+MongoDB （サービス・コンテナ） Alpine Linux Node+Express （製品コンテナ） Alpine Linux Rust QR code App Node SVG free icon list App Node SVG icon coloring App 8080 8081 8082 8083 ステートフル・ミドルウェア 永続化層 MongoDB 永続化層
SVG free icon list App 開発端末 Nginx （リバースプロキシ） 8080->8081 （as sample） Rust+Neo4j （サービス・コンテナ） Alpine Linux Node+MongoDB （サービス・コンテナ） Alpine Linux Node+Express （製品コンテナ） Alpine Linux Rust QR code App Node SVG free icon list App Node SVG icon coloring App 8080 8081 8082 8083 ステートフル・ミドルウェア 永続化層 MongoDB 永続化層
GitHub CLIのインストール # curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | gpg --dearmor -o /usr/share/keyrings/githubcli-archive-keyring.gpg # echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main“ | tee /etc/apt/sources.list.d/github-cli.list > /dev/null カレントディレクトリ/home/node # touch .gitignore # vim .gitignore 以下追加（「i」） node_modules/ .* 終了（「esc」「:」「w」「ent」「:」「q」「ent」） Gitを初期化 # apt update && apt upgrade –y # apt install gh # apt update && apt upgrade –y GitHub CLIのインストール GNU Privacy Guard (GnuPG, GPG)キーの取得と配置 # vim app.js 以下追加（「i」） app.set(‘port’, process.env.PORT || 80); 終了（「esc」「:」「w」「ent」「:」「q」「ent」） # exit app.jsを変更してポート3000をポート80に変更 ポートを80に直 していない場合
GitHubへコミット # git init # git add . && git commit -m "initial commit" gh auth login --ここからCLIで作業（矢印キーで操作） ? GitHub.com ? HTTPS ? y ? Login with a web browser ! [Enter] …ブラウザで作業…[Enter] # gh repo create ? Push an existing local repository to GitHub ? [Enter]（ピリオド「.」カレントディレクトリの選択） ? SVGFreeIconListingApp ? 説明は任意の文章を入れてください ? Public（今回はサンプルなので、通常の開発ではPrivateなどを選ぶ） ? y（リモートのリポジトリパスを確認） ? y（リモート名「origin」を確認） ? y（現在のブランチをリモートにコミットすることを確認） メインブランチを初期化して、ローカルを初回コミット後GitHubにログインしてCLIでリポジトリを作成
Windows側の設定 *SVGFreeIconListingApp> npm --version *SVGFreeIconListingApp> npm install *SVGFreeIconListingApp> npm install http-errors *SVGFreeIconListingApp> dotnet new .gitignore *SVGFreeIconListingApp> dotnet dev-certs https --trust *SVGFreeIconListingApp> npm i express body-parser *SVGFreeIconListingApp> npm start 1. nodeのバージョンを確認、Linuxで作成したnodeアプリのバージョンを公式インストーラーを 使ってインストール 2. .gitignoreでnode_modulesを抜いてあるので追加する。http-errorsも追加。 3. .gitignoreファイルも追加します。 4. このアプリはサービスなのでjsonを頻繁に使います。デバッグのためbody-parserと開発証 明書もインストールしておきます。 5. これをpushしてLinux側を上書きします。 6. コンテナの中で動いていたためポートは80です。https://localhost
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 Visual Studio Code Extensionsの準備 MongoDB for VS Code for working with MongoDB, whether your own instance or in MongoDB Atlas. Microsoft.AspNetCore.R azor.VSCode.BlazorWas mDebuggingExtension Version 1.23.9以上の場合
Visual Studio Codeでデバッグ環境を整備
フリーアイコンを表示 Node.js と Express を使用して Web API を構築する https://docs.microsoft.com/ja-jp/learn/modules/build-web-api-nodejs-express/
フリーアイコンを表示 Node.js と Express を使用して Web API を構築する https://docs.microsoft.com/ja-jp/learn/modules/build-web-api-nodejs-express/
フリーアイコンを表示 Node.js と Express を使用して Web API を構築する https://docs.microsoft.com/ja-jp/learn/modules/build-web-api-nodejs-express/
フリーアイコンを表示 Node.js と Express を使用して Web API を構築する https://docs.microsoft.com/ja-jp/learn/modules/build-web-api-nodejs-express/
フリーアイコンを表示 Node.js と Express を使用して Web API を構築する https://docs.microsoft.com/ja-jp/learn/modules/build-web-api-nodejs-express/
MongoDBに書き込み Node.js と Express を使用して Web API を構築する https://docs.microsoft.com/ja-jp/learn/modules/build-web-api-nodejs-express/
フリーアイコンを表示 Node.js と Express を使用して Web API を構築する https://docs.microsoft.com/ja-jp/learn/modules/build-web-api-nodejs-express/
Domain Driven Design実践 ドメイン駆動設計・開発の実践 DDD 指向マイクロサービスの設計
メッセージング・ミドルウェア 分散システム メッセージング ミドルウェア Point to Point Pub-Sub Message queue TCP (+SASL/TSL) Wire level protocol standard Advanced Message Queuing Protocol Remote Procedure Call TCP/IP (+Remote reference layer) Remote Method Invocation (RMI) CORBA ver. HTTP Dependent on server XMLHttpR equest (XHR) HTTP/2 Protocol buffers gRPC Internet InterORB Protocol (IIOP) Object Request Broker CORBA IDL WCF DCOM Point to Point Request Response Fan-out Message queue TCP Distributed Messaging (use broker) Apache Kafka WebSocket (Server Sent Events) SignalR Pub-Sub HTTP+TCP WebSocket Azure Web PubSub SignalR TCP Binary base protocol format MQTT 分散 ディレクトリ …* アーキテクチャ *分散トランザクションやリアルタイム・スケジューリングなど分散システムの実装によって複数の構成要素があります。
メッセージングの方向とコンテナ化 開発端末 Nginx （リバースプロキシ） 8080->8081 （as sample） Rust+BrightstarDB （サービス・コンテナ） Alpine Linux Node+MongoDB （サービス・コンテナ） Alpine Linux Node+Express （製品コンテナ） Alpine Linux Rust QR code App Node SVG free icon list App Node SVG icon coloring App 8080 8081 8082 8083 ステートフル・ミドルウェア 永続化層 MongoDB 永続化層 8082 8083 返答と 宛先 返答と 宛先 サービスのみ サービスのみ クライアントのみ 役割 すべてのコンテナのサービスの 方向が固定化している PubSubパターン AWS SQS Apache ActiveMQ AmazonMQ Azure PubSub MQTT Remote Procedure Call gRPC WCF CORBA コンテナ同士がサービスになっ たりクライアントになったりする ブローカーパターン Kafka RabbitMQ ブロードキャスト SignalR AMQP Apache Qpid
コンテナ化とは 可搬性、再利用性、拡張性など緻 密に設計されたのちに、サービス の方向をミドルウェアに依存させ た最小限のユースケース
WASM、WASI 02 PWA（Progressive Web Application）、 WebAssembly、 WebAssembly System Interface、Blazorの仮想化技術
https://visualstudiomagazine.com/articles/2019/09/26/blazor-future.aspx
— docker founder : Solomon Hykes “If WASM+WASI existed in 2008, we wouldn't have needed to created Docker. That's how important it is. Webassembly on the server is the future of computing. A standardized system interface was the missing link. Let's hope WASI is up to the task!” “2008年にWASM + WASIが存在していれば、 Dockerを作成する必要はありませんでした。それがど れほど重要かです。サーバー上のWebAssemblyは、 コンピューティングの未来です。” Docker Birthday #3: docker blog tweet of Solomon Hykes
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. Language Mono（includes Roslyn） Mono LLVM, Clang, Gollvm rustc_codegen_llvm2, GCC（G++, GCJ, GNAT） Frontend LLVM, Cranelift Singlepass GCC（part of tools） Backend Emscripten, Cloud ABI WASM target Backend Node.js 、Wasmtime 、Wasmer Lucet、WebAssembly Micro Runtime WAVM、 Wasm3 WASM PWSIX (portable WebAssembly system interface) Browser Multiple platforms
Webでステートを制御する State State State Stateful 接続 Stateful 接続 Stateful 双方向通信 Request State … 単一ループ State State State State Response Request Response Response Response Request
マイクロサービスで解決される側面 State State State Stateful 接続 Stateful接続 Stateful ミドルウェア マイクロサービス 双方向通信 Request State State State State State Response Request Response Response Response Request Infrastructure As Code Restore State ブルー Restore インクリメンタル デプロイ インクリメンタル デプロイ インクリメンタル デプロイ 最 小 範 囲 最 小 範 囲 クラウド（コントロールプレーンなど） グリーン
上映時間管理 ユースケースより精細な機能 State管理 Request Response スクリーン管理 States Request Response 空席管理 Screen Schedules ブルー/グリーン・テスト インクリメンタル・デプロイ 宣言型API 現在から最も早く上映さ れる映画の座席予約 Screen Seats Screen Master Request Response API開発者 Request Response 命令型API 命令型API API利用 命令型API 外部Program スクリーン=ScreenAPI(); foreachスクリーン{ スクリーン時間=SheduleAPI(s); foreachスクリーン時間{ スクリーン座席=SeatAPI(t, premier); foreachスクリーン座席{ if空いてたら{ result = 座席; break; } if座席{ break; } } } } return result; プレミアムシート 予約を機能削除 YAML プレミアムシート予約機能 が削除されました API利用側での PG改修が必須
コンテンツを配信するとは Platform データ・ プレーン ドメイン アプリケーション層 Webサーバー CDN RMI/gRPC XML-RPC <XML /> RPC 外部サービス 開発者 ブルー/グリーン・テスト インクリメンタル・デプロイ サービス サービス サービス サービス コントロール プレーン Contents Contents Contents XML Web Directory HTML Video Audio eBook HTML CSS JavaScript images State 管理 Function Data storage State 管理 機能群 Data storage Web App HTMLクライアント XMLクライアント メディアクライアント Native App HTMLクライアント XMLクライアント メディアクライアント RPCクライアント Mobile App HTMLクライアント XMLクライアント メディアクライアント RPCクライアント
スタティックWebアプリを配信する Platform Platform データ・ プレーン アプリケーション層 Webサーバー CDN RMI/gRPC XML-RPC <XML /> RPC サービス サービス サービス サービス コントロール プレーン Contents Contents Contents XML Web Directory HTML Video Audio eBook HTML CSS JavaScript images Web App HTMLクライアント XMLクライアント メディアクライアント Native App HTMLクライアント XMLクライアント メディアクライアント RPCクライアント Mobile App HTMLクライアント XMLクライアント メディアクライアント RPCクライアント HTML XML Image Video eBook Web Directory (Wget, rsync, FTP etc.) II Static Webで配信可能 AWS CloudFront* Azure CDN + Azure Front Door Service II 動的サイト アクセラレーション Akamai CDN Fastly KeyCDN Cloudflare CDN (Cloudflare Railgun) ※TCPコネクションのマルチプレキシング、 TCPコネクションのペリスタシー／プーリング、 およびTCPウィンドウサイズの最適化です CDN HTML Images CSS JavaScript Angular React Blazor Vue
リクエストレスポンス Platform アプリケーション層 サービス サービス サービス サービス HTML Images CSS JavaScript Angular React Blazor Vue CDN Webサーバー Http Request Http Response Http Request Http Response Http Request Http Response Blazor Server State 管理 Http Request Http Response
WebAssemblyの現在のWeb-platform対応状況 Platform アプリケーション層 サービス サービス サービス サービス HTML Images CSS JavaScript Angular React Blazor Vue CDN Webサーバー Http Request Http Response Http Request Http Response Http Request Http Response Blazor Server State 管理 Http Request Http Response WebAssembly Working Group
Code 03 WSLのubuntuに配置したdockerイメージ内のRustの QRコード生成プログラムを含むWebAssemblyをRust で配信し、サービス・クライアントサイドでQRコードを生 成、編集します。
RUST 開発端末 Nginx （リバースプロキシ） 8080->8081 （as sample） Rust+ Neo4j （サービス・コンテナ） Alpine Linux Node+MongoDB （サービス・コンテナ） Alpine Linux Node+Express （製品コンテナ） Alpine Linux Rust QR code App Node SVG free icon list App Node SVG icon coloring App 8080 8081 8082 8083 ステートフル・ミドルウェア Neo4j MongoDB 永続化層
QRコード https://www.sproutqr.com/blog/qr-code-minimum-size 15.24cm 30.48cm 45.72cm 目的は追加されるが決まるので 目的に応じたクエリを発行 Key-Value store 永続性選択型 分散型ワイドカラムストア Graph Graph (Labeled property) Triplestore (RDF store) Resource Description Framework 目的は変化し、目的に合わせたク レンジング後に問合せ Document JSON Relational DB Table データストアの決定の目安のひとつとして 「データ使用目的の変化の頻度」に着目した例
永続化層 関係を構造で提供するためシンプルなクエリで問合せ可能 Key-Value store 永続性 選択型 Redis Lua scripting, Modules API, 多くの プログラム言語 Cosmos DB 多くの プログラム言語向 けSDK Key-Value store 分散型 ワイドカラム ストア Cassandra Cassandra Query Language HBase Java API, REST, Avro, Thrift gateway APIs Google Bigtable BigQuery, HBase Shell, cbt command- line tool Graph BrightstarDB Entity Framework, Linq, SPARQL, RDF Client API Graph (Labeled property) neo4j Cypherクエリ, Boltバイナリ Triplestore (RDF store) Resource Description Framework OpenLink Virtuoso SPARQLクエリ Stardog SPARQLクエリ 使用時の目的をプログラム Document JSON mongoDB MongoDB Shell, 多くの プログラム言語 Relational DB Table SQL DB Transact SQL + Label OpenLink Virtuoso Open Source Edition 7.2 .NET Frameworkに対応していますが、Relational Property Graphs、つまりLabeledなTriplestore としてのGraph TerminusDB Cloud上で利用できるTurminusXのDB部分なので、 MongoDB AtlasのようなWebコンソールでの操 作のほかにPython、JavaScriptのToolkitがあります。JSONでエクスポートしてオンプレミスの TerminusDBにインポートできるので、チーム開発環境を容易に共有できます。 またスキーマカスタマイズ、ブランチ管理ができるためエンタープライズ開発向き。 BrightstarDB Entity FrameworkやLinq、SPARQLを使えるデータベースでクロスプラットフォームで利用で きます。HTTP APIも提供されています。Object Relational Mapper for Resource Description Frameworkも提供されているため低レベルから高レベルなストア操作が可能 今回はクエリにGremlinを使えるNeo4jのインストールを紹介します。
Neo4j + Rust 開発端末 Nginx （リバースプロキシ） 8080->8081 （as sample） Rust+Neo4j （サービス・コンテナ） Alpine Linux Node+MongoDB （サービス・コンテナ） Alpine Linux Node+Express （製品コンテナ） Alpine Linux Rust QR code App Node SVG free icon list App Node SVG icon coloring App 8080 8081 8082 8083 ステートフル・ミドルウェア MongoDB 永続化層 $ sudo docker pull neo4j $ sudo docker run -it -d -p 7474:7474 -p 8083:7687 --env NEO4J_AUTH=none --network host --init --name svgqrcodeneo neo4j $ sudo docker exec -it svgqrcodeneo /bin/bash # 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 Neo4j # 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 DockerのNeo4jコンテナに Rustのインストール完了 RustのHello world完了
稼働検証が終わっているRustを再利用する 以降は以下の方法でプルグラムを作成できます 1.GitHubでWindows側へ共有 2.Visual Studio Code（要Docker Desktop）で編集 3.ソースをコピペ（Windows Arm向け）
Windows側でRustを編集する
コンポーネント化とデバッグモード
リリース実行時にWeb出力する
RustのWeb AssemblyをAPIでサービスする WebAssembly Rustで実装 他Webサービス !Point RustはWebサービス構築に向いてない と言われています。.NETなどに比べ認 証、ルーティング、SDKなどが充実して いないなど… マイクロサービスでは各サービスにサイド カーを用意したりサービスメッシュであれ ばメッシュエンドポイントに認証やロギン グロードバランシングなどのデータプレーン が配置されますので、マイクロサービスに おけるサーバーレス・ファンクションを提 供するためのWeb API機能であれば Rustで十分作れます。
ブラウザで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
RustのWeb AssemblyをAPIでサービスする セクション3 : エコシステムの作成例
まとめ 04 今回は前編としてコンテナライゼーションの考え方とマ イクロサービスの設計およびコーディングによるコンテナラ イゼーションのサービスの基盤であるメッセージングミドル ウェアのお話をしました。 後編ではRustプログラミングの考え方をお話します。
まとめ 04 今回は後編としてコンテナライゼーションのコーディング 時に巨大なエコシステムを利用するお話をしました。 非常にプロダクティビティの高い開発／運用ができる 時代になってきました。
CRÉDITOS: este modelo de apresentação foi criado pelo Slidesgo, inclui ícones da Flaticon e infográficos e imagens da Freepik Thank you 今後ともよろしくお願いします。 tetsuro.takao@processtune.com mvp.microsoft.com/en-us/PublicProfile/4029060 blog.processtune.com 83
Link ● slidesgo : 本プレゼンテーションのテンプレートWebサイト（本プレゼンテーションのURL） https://slidesgo.com/ (theme/eu-energy-strategy-business-meeting#search-space&position-2&results-73) ● GraalVM https://www.graalvm.org/ ● Install Docker CE on Ubuntu 20.04 https://lindevs.com/install-docker-ce-on-ubuntu/ ● Differences between GitHub Apps and OAuth Apps https://docs.github.com/en/developers/apps/getting-started-with-apps/differences-between-github-apps-and-oauth-apps ● pksunkara/octonode https://github.com/pksunkara/octonode ● Installing gh on Linux and BSD https://github.com/cli/cli/blob/trunk/docs/install_linux.md ● A Possible New Backend for Rust https://jason-williams.co.uk/a-possible-new-backend-for-rust ● EJS https://ejs.co/ ● pug https://pugjs.org/api/getting-started.html ● Handlebars https://jason-williams.co.uk/a-possible-new-backend-for-rust
Link ● Hogan.js http://twitter.github.io/hogan.js/ ● Twig https://twig.symfony.com/ ● Using template engines with Express https://expressjs.com/en/guide/using-template-engines.html ● openlink/virtuoso-opensource-7 https://hub.docker.com/r/openlink/virtuoso-opensource-7
slidesgo : 本プレゼンテーションのテンプレートWebサイト（本プレゼンテーションのURL） https://slidesgo.com/ (theme/eu-energy-strategy-business-meeting#search-space&position-2&results-73) Cloud Native Computing Foundation (CNCF) : https://www.cncf.io/ Introducing gRPC, a new open source HTTP/2 RPC Framework : https://developers.googleblog.com/2015/02/introducing-grpc-new-open-source-http2.html Announcing HTTP/2 support in Azure App Service : https://azure.microsoft.com/ja-jp/blog/announcing-http-2-support-in-azure-app-service/ WHATWG : https://whatwg.org/ The LLVM Compiler Infrastructure : https://llvm.org/ llvm-project : GitHub https://github.com/llvm/llvm-project Configure options for the ASP.NET Core Kestrel web server : https://docs.microsoft.com/en-us/aspnet/core/fundamentals/servers/kestrel/options?view=aspnetcore-5.0#http2-limits WebSocket : https://docs.microsoft.com/ja-jp/windows/uwp/networking/websockets Azure Web PubSub : https://azure.microsoft.com/en-us/services/web-pubsub/ Reference Links 1
Azure SignalR サービスとは : https://docs.microsoft.com/ja-jp/azure/azure-signalr/signalr-overview Cloud Native Apps (monthly resource) : https://github.com/microsoft/monthlyresources/?ocid=AID303759 HTTP/2 in Windows 10: Browser, Apps and Web Server : https://channel9.msdn.com/Events/Build/2015/3-88 Server Events : https://docs.servicestack.net/server-events#server-event-clients Azure Web PubSub Serviceを触ってみた : https://www.slideshare.net/ssuser293809/azure-web-pubsub-service Microservices and the First Law of Distributed Objects : https://martinfowler.com/articles/distributed-objects-microservices.html OASIS Message Queuing Telemetry Transport (MQTT) TC : https://www.oasis-open.org/committees/tc_home.php?wg_abbrev=mqtt Use streaming in ASP.NET Core SignalR : https://docs.microsoft.com/en-us/aspnet/core/signalr/streaming?view=aspnetcore-5.0 Azure Web PubSub : GitHub https://github.com/Azure/azure-webpubsub gRPC services with ASP.NET Core : Visual Studio https://docs.microsoft.com/en-us/aspnet/core/grpc/aspnetcore?view=aspnetcore-5.0&tabs=visual-studio Reference Links 2
High-performance Services with gRPC: What's new in .NET 5 : https://channel9.msdn.com/events/dotnetConf/2020/High-performance-Services-with-gRPC-Whats-new-in-NET- 5?term=gRPC%20HTTP2&pubDate=year&lang-ja=true&lang-en=true gRPC Web with .NET : https://channel9.msdn.com/Shows/On-NET/gRPC-Web-with-NET?term=gRPC%20HTTP2&pubDate=year&lang- en=true&pageSize=15 .NET Core での gRPC のトラブルシューティング : https://docs.microsoft.com/ja-jp/aspnet/core/grpc/troubleshoot?view=aspnetcore-5.0 APACHE KAFKA : https://kafka.apache.org/ Quickstart: Create a serverless simple chat application with Azure Functions and Azure Web PubSub service : https://docs.microsoft.com/en-us/azure/azure-web-pubsub/quickstart-serverless?tabs=javascript NET での gRPC でサポートされているプラットフォーム : https://docs.microsoft.com/ja-jp/aspnet/core/grpc/supported-platforms?view=aspnetcore-5.0 Cloud Endpoints for gRPC : https://cloud.google.com/endpoints/docs/grpc/about- grpc#:~:text=gRPC%20is%20a%20high%20performance,create%20distributed%20applications%20and%20services. Using Docker in WSL 2 : https://code.visualstudio.com/blogs/2020/03/02/docker-in-wsl2 docker docs : https://docs.docker.com/ Reference Links 3
How to Deal with Lock Holder Preemption : https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.369.9589&rep=rep1&type=pdf Steve Jobs, 1955-2011 : https://www.theverge.com/2011/10/05/steve-jobs-1955-2011-2 Linux Kernel 5.15 Released with New NTFS File System, In-Kernel SMB Server, and More : https://9to5linux.com/linux-kernel-5-15-released-with-new-ntfs-file-system-in-kernel-smb-server-and-more Xerox Corp. v. Apple Computer, Inc., 734 F. Supp. 1542 (N.D. Cal. 1990) : https://law.justia.com/cases/federal/district-courts/FSupp/734/1542/1461830/ Apple Computer Inc. v. Microsoft Corp., 759 F. Supp. 1444 (N.D. Cal. 1991) : https://law.justia.com/cases/federal/district-courts/FSupp/759/1444/1472666/ Inflation Calculator : https://www.in2013dollars.com/us/inflation/1997?amount=1 U.S. Dollar to Japanese Yen Spot Exchange Rates for 1997 from the Bank of England : https://www.poundsterlinglive.com/bank-of-england-spot/historical-spot-exchange-rates/usd/USD-to-JPY-1997 Information Anxiety 2 (Hayden/Que) 2nd Edition : https://www.amazon.com/Information-Anxiety-2-Hayden- Que/dp/0789724103/ref=sr_1_1?ie=UTF8&qid=1341674668&sr=8-1&keywords=Information+Anxiety+2 それは「情報」ではない。―無情報爆発時代を生き抜くためのコミュニケーション・デザイン : Amazon Link Software Development for Small Teams : Google Books Google Book Link Reference Links 4
What Is Domain-Driven Design? : O'Reilly https://www.oreilly.com/library/view/what-is-domain-driven/9781492057802/ch04.html Steve Jobs, 1955-2011 : https://www.theverge.com/2011/10/05/steve-jobs-1955-2011-2 Wasmtime：A small and efficient runtime for WebAssembly & WASI https://wasmtime.dev/ Fastly のネイティブ WebAssembly コンパイラ & ランタイム「Lucet」を発表 https://www.fastly.com/blog/announcing-lucet-fastly-native-webassembly-compiler-runtime WebAssembly Micro Runtime(WAMR)：組み込み向け軽量ランタイム（JIT除く） https://github.com/bytecodealliance/wasm-micro-runtime WASMER https://wasmer.io/ WebAssembly System Interface (WASI)： Node.js v17.1.0 documentation https://nodejs.org/api/wasi.html Azure Active Directory Domain Services のマネージド ドメインのグループ ポリシーを管理する https://docs.microsoft.com/ja-jp/azure/active-directory-domain-services/manage-group-policy 移動ユーザー プロファイルの展開 https://docs.microsoft.com/ja-jp/windows-server/storage/folder-redirection/deploy-roaming-user-profiles#step-4- optionally-create-a-gpo-for-roaming-user-profiles UBUNTU 12.04 ACTIVE DIRECTORY AUTHENTICATION http://koo.fi/blog/2013/01/06/ubuntu-12-04-active-directory-authentication/ Reference Links 5
Ubuntu Linux 仮想マシンを Azure Active Directory Domain Services のマネージド ドメインに参加させる https://docs.microsoft.com/ja-jp/azure/active-directory-domain-services/join-ubuntu-linux-vm Android で MSAL を使用してクロス アプリ SSO を有効にする : Microsoft Docs https://docs.microsoft.com/ja-jp/azure/active-directory/develop/msal-android-single-sign-on Containers in the enterprise：Results from research conducted in 2020 by IBM Market Development & Insights https://www.ibm.com/downloads/cas/VG8KRPRM Reference Links 6

Recommended

WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説Takao Tetsuro
 
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること 【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること 日本マイクロソフト株式会社
 
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデート
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデートデモで楽しむ Visual Studio 2022 & .NET 6 最新アップデート
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデートAkira Inoue
 
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ 【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ 日本マイクロソフト株式会社
 
【BS7】GitHubをフル活用した開発
【BS7】GitHubをフル活用した開発【BS7】GitHubをフル活用した開発
【BS7】GitHubをフル活用した開発日本マイクロソフト株式会社
 
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NETAkira Inoue
 
ASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さSho Okada
 
[DO02] Jenkins PipelineとBlue Oceanによる、フルスクラッチからの継続的デリバリ
[DO02] Jenkins PipelineとBlue Oceanによる、フルスクラッチからの継続的デリバリ[DO02] Jenkins PipelineとBlue Oceanによる、フルスクラッチからの継続的デリバリ
[DO02] Jenkins PipelineとBlue Oceanによる、フルスクラッチからの継続的デリバリde:code 2017
 

Recommended

WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説Takao Tetsuro
 
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること 【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること 日本マイクロソフト株式会社
 
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデート
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデートデモで楽しむ Visual Studio 2022 & .NET 6 最新アップデート
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデートAkira Inoue
 
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ 【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ 日本マイクロソフト株式会社
 
【BS7】GitHubをフル活用した開発
【BS7】GitHubをフル活用した開発【BS7】GitHubをフル活用した開発
【BS7】GitHubをフル活用した開発日本マイクロソフト株式会社
 
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NETAkira Inoue
 
ASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さSho Okada
 
[DO02] Jenkins PipelineとBlue Oceanによる、フルスクラッチからの継続的デリバリ
[DO02] Jenkins PipelineとBlue Oceanによる、フルスクラッチからの継続的デリバリ[DO02] Jenkins PipelineとBlue Oceanによる、フルスクラッチからの継続的デリバリ
[DO02] Jenkins PipelineとBlue Oceanによる、フルスクラッチからの継続的デリバリde:code 2017
 
【BS13】チーム開発がこんなにも快適に！コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
【BS13】チーム開発がこんなにも快適に！コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発【BS13】チーム開発がこんなにも快適に！コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
【BS13】チーム開発がこんなにも快適に！コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発日本マイクロソフト株式会社
 
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...Shotaro Suzuki
 
【BS2】.NET 6 最新アップデート
【BS2】.NET 6 最新アップデート【BS2】.NET 6 最新アップデート
【BS2】.NET 6 最新アップデート日本マイクロソフト株式会社
 
【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介
【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介 【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介
【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介 日本マイクロソフト株式会社
 
【BS10】Microsoft と GitHub の開発エコシステムで、開発にドライブをかけよう！
【BS10】Microsoft と GitHub の開発エコシステムで、開発にドライブをかけよう！【BS10】Microsoft と GitHub の開発エコシステムで、開発にドライブをかけよう！
【BS10】Microsoft と GitHub の開発エコシステムで、開発にドライブをかけよう！日本マイクロソフト株式会社
 
.NET の過去、現在、そして未来 ～ .NET 最新アップデート
.NET の過去、現在、そして未来 ～ .NET 最新アップデート.NET の過去、現在、そして未来 ～ .NET 最新アップデート
.NET の過去、現在、そして未来 ～ .NET 最新アップデートAkira Inoue
 
【BS12】Visual Studio 2022 40分一本勝負！
【BS12】Visual Studio 2022 40分一本勝負！【BS12】Visual Studio 2022 40分一本勝負！
【BS12】Visual Studio 2022 40分一本勝負！日本マイクロソフト株式会社
 
【BS6】 マイクロソフトの GitHub との取り組み
【BS6】 マイクロソフトの GitHub との取り組み 【BS6】 マイクロソフトの GitHub との取り組み
【BS6】 マイクロソフトの GitHub との取り組み 日本マイクロソフト株式会社
 
【BS9】モダン & クラウドネイティブなソフトウエア開発はじめよう ~ Azure DevOps & GitHub を使ったアプリ開発 DevOps 101
【BS9】モダン & クラウドネイティブなソフトウエア開発はじめよう ~ Azure DevOps & GitHub を使ったアプリ開発 DevOps 101 【BS9】モダン & クラウドネイティブなソフトウエア開発はじめよう ~ Azure DevOps & GitHub を使ったアプリ開発 DevOps 101
【BS9】モダン & クラウドネイティブなソフトウエア開発はじめよう ~ Azure DevOps & GitHub を使ったアプリ開発 DevOps 101 日本マイクロソフト株式会社
 
祝GA、 Service Fabric 概要
祝GA、 Service Fabric 概要祝GA、 Service Fabric 概要
祝GA、 Service Fabric 概要Takekazu Omi
 
Relationship betweenddd and mvc
Relationship betweenddd and mvcRelationship betweenddd and mvc
Relationship betweenddd and mvcTakao Tetsuro
 
.NET 5 勉強会 ～.NET Framework から .NET へ～
.NET 5 勉強会 ～.NET Framework から .NET へ～.NET 5 勉強会 ～.NET Framework から .NET へ～
.NET 5 勉強会 ～.NET Framework から .NET へ～Fujio Kojima
 
【BS4】時は来たれり。今こそ .NET 6 へ移行する時。
【BS4】時は来たれり。今こそ .NET 6 へ移行する時。 【BS4】時は来たれり。今こそ .NET 6 へ移行する時。
【BS4】時は来たれり。今こそ .NET 6 へ移行する時。 日本マイクロソフト株式会社
 
What's Azure DevOps
What's Azure DevOpsWhat's Azure DevOps
What's Azure DevOpsKazushi Kamegawa
 
Java によるクラウドネイティブ の実現に向けて
Java によるクラウドネイティブ の実現に向けてJava によるクラウドネイティブ の実現に向けて
Java によるクラウドネイティブ の実現に向けてShigeru Tatsuta
 
.NET 最新ロードマップと今押さえておきたい技術要素
.NET 最新ロードマップと今押さえておきたい技術要素.NET 最新ロードマップと今押さえておきたい技術要素
.NET 最新ロードマップと今押さえておきたい技術要素Akira Inoue
 
20190201 Cloud Native Kansai AKS Azure
20190201 Cloud Native Kansai AKS Azure20190201 Cloud Native Kansai AKS Azure
20190201 Cloud Native Kansai AKS AzureIssei Hiraoka
 
Try! Visual Studio 209 git feature
Try! Visual Studio 209 git featureTry! Visual Studio 209 git feature
Try! Visual Studio 209 git featureTakayoshi Tanaka
 
Building asp.net core blazor and elasticsearch elasticsearch using visual stu...
Building asp.net core blazor and elasticsearch elasticsearch using visual stu...Building asp.net core blazor and elasticsearch elasticsearch using visual stu...
Building asp.net core blazor and elasticsearch elasticsearch using visual stu...Shotaro Suzuki
 
.NET の今と今後に思うこと
.NET の今と今後に思うこと.NET の今と今後に思うこと
.NET の今と今後に思うことAkira Inoue
 
Docker Swarm モード にゅうもん
Docker Swarm モード にゅうもんDocker Swarm モード にゅうもん
Docker Swarm モード にゅうもんMasahito Zembutsu
 
Docker ComposeでMastodonが必要なものを梱包する話
Docker ComposeでMastodonが必要なものを梱包する話Docker ComposeでMastodonが必要なものを梱包する話
Docker ComposeでMastodonが必要なものを梱包する話Masahito Zembutsu
 

More Related Content

What's hot

【BS13】チーム開発がこんなにも快適に！コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
【BS13】チーム開発がこんなにも快適に！コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発【BS13】チーム開発がこんなにも快適に！コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
【BS13】チーム開発がこんなにも快適に！コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発日本マイクロソフト株式会社
 
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...Shotaro Suzuki
 
【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介
【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介 【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介
【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介 日本マイクロソフト株式会社
 
【BS10】Microsoft と GitHub の開発エコシステムで、開発にドライブをかけよう！
【BS10】Microsoft と GitHub の開発エコシステムで、開発にドライブをかけよう！【BS10】Microsoft と GitHub の開発エコシステムで、開発にドライブをかけよう！
【BS10】Microsoft と GitHub の開発エコシステムで、開発にドライブをかけよう！日本マイクロソフト株式会社
 
.NET の過去、現在、そして未来 ～ .NET 最新アップデート
.NET の過去、現在、そして未来 ～ .NET 最新アップデート.NET の過去、現在、そして未来 ～ .NET 最新アップデート
.NET の過去、現在、そして未来 ～ .NET 最新アップデートAkira Inoue
 
【BS9】モダン & クラウドネイティブなソフトウエア開発はじめよう ~ Azure DevOps & GitHub を使ったアプリ開発 DevOps 101
【BS9】モダン & クラウドネイティブなソフトウエア開発はじめよう ~ Azure DevOps & GitHub を使ったアプリ開発 DevOps 101 【BS9】モダン & クラウドネイティブなソフトウエア開発はじめよう ~ Azure DevOps & GitHub を使ったアプリ開発 DevOps 101
【BS9】モダン & クラウドネイティブなソフトウエア開発はじめよう ~ Azure DevOps & GitHub を使ったアプリ開発 DevOps 101 日本マイクロソフト株式会社
 
祝GA、 Service Fabric 概要
祝GA、 Service Fabric 概要祝GA、 Service Fabric 概要
祝GA、 Service Fabric 概要Takekazu Omi
 
Relationship betweenddd and mvc
Relationship betweenddd and mvcRelationship betweenddd and mvc
Relationship betweenddd and mvcTakao Tetsuro
 
.NET 5 勉強会 ～.NET Framework から .NET へ～
.NET 5 勉強会 ～.NET Framework から .NET へ～.NET 5 勉強会 ～.NET Framework から .NET へ～
.NET 5 勉強会 ～.NET Framework から .NET へ～Fujio Kojima
 
Java によるクラウドネイティブ の実現に向けて
Java によるクラウドネイティブ の実現に向けてJava によるクラウドネイティブ の実現に向けて
Java によるクラウドネイティブ の実現に向けてShigeru Tatsuta
 
.NET 最新ロードマップと今押さえておきたい技術要素
.NET 最新ロードマップと今押さえておきたい技術要素.NET 最新ロードマップと今押さえておきたい技術要素
.NET 最新ロードマップと今押さえておきたい技術要素Akira Inoue
 
20190201 Cloud Native Kansai AKS Azure
20190201 Cloud Native Kansai AKS Azure20190201 Cloud Native Kansai AKS Azure
20190201 Cloud Native Kansai AKS AzureIssei Hiraoka
 
Try! Visual Studio 209 git feature
Try! Visual Studio 209 git featureTry! Visual Studio 209 git feature
Try! Visual Studio 209 git featureTakayoshi Tanaka
 
Building asp.net core blazor and elasticsearch elasticsearch using visual stu...
Building asp.net core blazor and elasticsearch elasticsearch using visual stu...Building asp.net core blazor and elasticsearch elasticsearch using visual stu...
Building asp.net core blazor and elasticsearch elasticsearch using visual stu...Shotaro Suzuki
 
.NET の今と今後に思うこと
.NET の今と今後に思うこと.NET の今と今後に思うこと
.NET の今と今後に思うことAkira Inoue
 

What's hot (20)

【BS13】チーム開発がこんなにも快適に！コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
【BS13】チーム開発がこんなにも快適に！コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発【BS13】チーム開発がこんなにも快適に！コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
【BS13】チーム開発がこんなにも快適に！コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
 
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
 
【BS2】.NET 6 最新アップデート
【BS2】.NET 6 最新アップデート【BS2】.NET 6 最新アップデート
【BS2】.NET 6 最新アップデート
 
【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介
【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介 【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介
【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介
 
【BS10】Microsoft と GitHub の開発エコシステムで、開発にドライブをかけよう！
【BS10】Microsoft と GitHub の開発エコシステムで、開発にドライブをかけよう！【BS10】Microsoft と GitHub の開発エコシステムで、開発にドライブをかけよう！
【BS10】Microsoft と GitHub の開発エコシステムで、開発にドライブをかけよう！
 
.NET の過去、現在、そして未来 ～ .NET 最新アップデート
.NET の過去、現在、そして未来 ～ .NET 最新アップデート.NET の過去、現在、そして未来 ～ .NET 最新アップデート
.NET の過去、現在、そして未来 ～ .NET 最新アップデート
 
【BS12】Visual Studio 2022 40分一本勝負！
【BS12】Visual Studio 2022 40分一本勝負！【BS12】Visual Studio 2022 40分一本勝負！
【BS12】Visual Studio 2022 40分一本勝負！
 
【BS6】 マイクロソフトの GitHub との取り組み
【BS6】 マイクロソフトの GitHub との取り組み 【BS6】 マイクロソフトの GitHub との取り組み
【BS6】 マイクロソフトの GitHub との取り組み
 
【BS9】モダン & クラウドネイティブなソフトウエア開発はじめよう ~ Azure DevOps & GitHub を使ったアプリ開発 DevOps 101
【BS9】モダン & クラウドネイティブなソフトウエア開発はじめよう ~ Azure DevOps & GitHub を使ったアプリ開発 DevOps 101 【BS9】モダン & クラウドネイティブなソフトウエア開発はじめよう ~ Azure DevOps & GitHub を使ったアプリ開発 DevOps 101
【BS9】モダン & クラウドネイティブなソフトウエア開発はじめよう ~ Azure DevOps & GitHub を使ったアプリ開発 DevOps 101
 
祝GA、 Service Fabric 概要
祝GA、 Service Fabric 概要祝GA、 Service Fabric 概要
祝GA、 Service Fabric 概要
 
Relationship betweenddd and mvc
Relationship betweenddd and mvcRelationship betweenddd and mvc
Relationship betweenddd and mvc
 
.NET 5 勉強会 ～.NET Framework から .NET へ～
.NET 5 勉強会 ～.NET Framework から .NET へ～.NET 5 勉強会 ～.NET Framework から .NET へ～
.NET 5 勉強会 ～.NET Framework から .NET へ～
 
【BS4】時は来たれり。今こそ .NET 6 へ移行する時。
【BS4】時は来たれり。今こそ .NET 6 へ移行する時。 【BS4】時は来たれり。今こそ .NET 6 へ移行する時。
【BS4】時は来たれり。今こそ .NET 6 へ移行する時。
 
What's Azure DevOps
What's Azure DevOpsWhat's Azure DevOps
What's Azure DevOps
 
Java によるクラウドネイティブ の実現に向けて
Java によるクラウドネイティブ の実現に向けてJava によるクラウドネイティブ の実現に向けて
Java によるクラウドネイティブ の実現に向けて
 
.NET 最新ロードマップと今押さえておきたい技術要素
.NET 最新ロードマップと今押さえておきたい技術要素.NET 最新ロードマップと今押さえておきたい技術要素
.NET 最新ロードマップと今押さえておきたい技術要素
 
20190201 Cloud Native Kansai AKS Azure
20190201 Cloud Native Kansai AKS Azure20190201 Cloud Native Kansai AKS Azure
20190201 Cloud Native Kansai AKS Azure
 
Try! Visual Studio 209 git feature
Try! Visual Studio 209 git featureTry! Visual Studio 209 git feature
Try! Visual Studio 209 git feature
 
Building asp.net core blazor and elasticsearch elasticsearch using visual stu...
Building asp.net core blazor and elasticsearch elasticsearch using visual stu...Building asp.net core blazor and elasticsearch elasticsearch using visual stu...
Building asp.net core blazor and elasticsearch elasticsearch using visual stu...
 
.NET の今と今後に思うこと
.NET の今と今後に思うこと.NET の今と今後に思うこと
.NET の今と今後に思うこと
 

Similar to Wasm blazor and wasi 2

Docker Swarm モード にゅうもん
Docker Swarm モード にゅうもんDocker Swarm モード にゅうもん
Docker Swarm モード にゅうもんMasahito Zembutsu
 
Docker ComposeでMastodonが必要なものを梱包する話
Docker ComposeでMastodonが必要なものを梱包する話Docker ComposeでMastodonが必要なものを梱包する話
Docker ComposeでMastodonが必要なものを梱包する話Masahito Zembutsu
 
はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入Yu Nobuoka
 
Docker入門-基礎編 いまから始めるDocker管理【2nd Edition】
Docker入門-基礎編 いまから始めるDocker管理【2nd Edition】Docker入門-基礎編 いまから始めるDocker管理【2nd Edition】
Docker入門-基礎編 いまから始めるDocker管理【2nd Edition】Masahito Zembutsu
 
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejsTakayoshi Tanaka
 
成長を加速する minne の技術基盤戦略
成長を加速する minne の技術基盤戦略成長を加速する minne の技術基盤戦略
成長を加速する minne の技術基盤戦略Hiroshi SHIBATA
 
ラズパイ2で動く Docker PaaS
ラズパイ2で動く Docker PaaSラズパイ2で動く Docker PaaS
ラズパイ2で動く Docker PaaSnpsg
 
～ Cloud First から Cloud Optimized へ ～ .NET on Cloud が描くモダナイゼーション
～ Cloud First から Cloud Optimized へ ～ .NET on Cloud が描くモダナイゼーション～ Cloud First から Cloud Optimized へ ～ .NET on Cloud が描くモダナイゼーション
～ Cloud First から Cloud Optimized へ ～ .NET on Cloud が描くモダナイゼーションAkira Inoue
 
.NET の今と未来 ～ デバイス＆クラウド ネイティブを目指して
.NET の今と未来 ～ デバイス＆クラウド ネイティブを目指して.NET の今と未来 ～ デバイス＆クラウド ネイティブを目指して
.NET の今と未来 ～ デバイス＆クラウド ネイティブを目指してAkira Inoue
 
Cld018 コンテナ go_～あなた
Cld018 コンテナ go_～あなたCld018 コンテナ go_～あなた
Cld018 コンテナ go_～あなたTech Summit 2016
 
Cld018 コンテナ go_～あなた
Cld018 コンテナ go_～あなたCld018 コンテナ go_～あなた
Cld018 コンテナ go_～あなたTech Summit 2016
 
Node.jsアプリの開発をモダン化するために取り組んできたこと
Node.jsアプリの開発をモダン化するために取り組んできたことNode.jsアプリの開発をモダン化するために取り組んできたこと
Node.jsアプリの開発をモダン化するために取り組んできたことbitbank, Inc. Tokyo, Japan
 
20170329 container technight-第一回勉強会
20170329 container technight-第一回勉強会20170329 container technight-第一回勉強会
20170329 container technight-第一回勉強会Minehiko Nohara
 
20170329 container technight-第一回勉強会
20170329 container technight-第一回勉強会20170329 container technight-第一回勉強会
20170329 container technight-第一回勉強会Minehiko Nohara
 
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発Yuta Matsumura
 
今だからこそ知りたい Docker Compose/Swarm 入門
今だからこそ知りたい Docker Compose/Swarm 入門今だからこそ知りたい Docker Compose/Swarm 入門
今だからこそ知りたい Docker Compose/Swarm 入門Masahito Zembutsu
 
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...Shotaro Suzuki
 

Similar to Wasm blazor and wasi 2 (20)

Docker Swarm モード にゅうもん
Docker Swarm モード にゅうもんDocker Swarm モード にゅうもん
Docker Swarm モード にゅうもん
 
Docker ComposeでMastodonが必要なものを梱包する話
Docker ComposeでMastodonが必要なものを梱包する話Docker ComposeでMastodonが必要なものを梱包する話
Docker ComposeでMastodonが必要なものを梱包する話
 
はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入
 
Docker入門-基礎編 いまから始めるDocker管理【2nd Edition】
Docker入門-基礎編 いまから始めるDocker管理【2nd Edition】Docker入門-基礎編 いまから始めるDocker管理【2nd Edition】
Docker入門-基礎編 いまから始めるDocker管理【2nd Edition】
 
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
 
成長を加速する minne の技術基盤戦略
成長を加速する minne の技術基盤戦略成長を加速する minne の技術基盤戦略
成長を加速する minne の技術基盤戦略
 
ラズパイ2で動く Docker PaaS
ラズパイ2で動く Docker PaaSラズパイ2で動く Docker PaaS
ラズパイ2で動く Docker PaaS
 
～ Cloud First から Cloud Optimized へ ～ .NET on Cloud が描くモダナイゼーション
～ Cloud First から Cloud Optimized へ ～ .NET on Cloud が描くモダナイゼーション～ Cloud First から Cloud Optimized へ ～ .NET on Cloud が描くモダナイゼーション
～ Cloud First から Cloud Optimized へ ～ .NET on Cloud が描くモダナイゼーション
 
.NET の今と未来 ～ デバイス＆クラウド ネイティブを目指して
.NET の今と未来 ～ デバイス＆クラウド ネイティブを目指して.NET の今と未来 ～ デバイス＆クラウド ネイティブを目指して
.NET の今と未来 ～ デバイス＆クラウド ネイティブを目指して
 
Cld018 コンテナ go_～あなた
Cld018 コンテナ go_～あなたCld018 コンテナ go_～あなた
Cld018 コンテナ go_～あなた
 
Cld018 コンテナ go_～あなた
Cld018 コンテナ go_～あなたCld018 コンテナ go_～あなた
Cld018 コンテナ go_～あなた
 
Node.jsアプリの開発をモダン化するために取り組んできたこと
Node.jsアプリの開発をモダン化するために取り組んできたことNode.jsアプリの開発をモダン化するために取り組んできたこと
Node.jsアプリの開発をモダン化するために取り組んできたこと
 
20170329 container technight-第一回勉強会
20170329 container technight-第一回勉強会20170329 container technight-第一回勉強会
20170329 container technight-第一回勉強会
 
20170329 container technight-第一回勉強会
20170329 container technight-第一回勉強会20170329 container technight-第一回勉強会
20170329 container technight-第一回勉強会
 
コンテナーによるIT基盤変革 - IT infrastructure transformation -
コンテナーによるIT基盤変革 - IT infrastructure transformation -コンテナーによるIT基盤変革 - IT infrastructure transformation -
コンテナーによるIT基盤変革 - IT infrastructure transformation -
 
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
 
[Japan Tech summit 2017] DEP 005
[Japan Tech summit 2017] DEP 005[Japan Tech summit 2017] DEP 005
[Japan Tech summit 2017] DEP 005
 
今だからこそ知りたい Docker Compose/Swarm 入門
今だからこそ知りたい Docker Compose/Swarm 入門今だからこそ知りたい Docker Compose/Swarm 入門
今だからこそ知りたい Docker Compose/Swarm 入門
 
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
 
20201127 .NET 5
20201127 .NET 520201127 .NET 5
20201127 .NET 5
 

More from Takao Tetsuro

Small Language Model Local Launch on AI Tour Tokyo
Small Language Model Local Launch on AI Tour TokyoSmall Language Model Local Launch on AI Tour Tokyo
Small Language Model Local Launch on AI Tour TokyoTakao Tetsuro
 
local launch small language model of AI.
local launch small language model of AI.local launch small language model of AI.
local launch small language model of AI.Takao Tetsuro
 
Implementation Approach of Artifical Intelligence
Implementation Approach of Artifical IntelligenceImplementation Approach of Artifical Intelligence
Implementation Approach of Artifical IntelligenceTakao Tetsuro
 
MAUIGraphicsNamespace.pptx
MAUIGraphicsNamespace.pptxMAUIGraphicsNamespace.pptx
MAUIGraphicsNamespace.pptxTakao Tetsuro
 
Polyglot Persistence and Graph Schema
Polyglot Persistence and Graph SchemaPolyglot Persistence and Graph Schema
Polyglot Persistence and Graph SchemaTakao Tetsuro
 
ServiceMeshEndpointWithMinimalAPIPublish.pptx
ServiceMeshEndpointWithMinimalAPIPublish.pptxServiceMeshEndpointWithMinimalAPIPublish.pptx
ServiceMeshEndpointWithMinimalAPIPublish.pptxTakao Tetsuro
 
OptonsPatternDotNet.pptx
OptonsPatternDotNet.pptxOptonsPatternDotNet.pptx
OptonsPatternDotNet.pptxTakao Tetsuro
 
ASP.NETCoreOptionsPattern.pptx
ASP.NETCoreOptionsPattern.pptxASP.NETCoreOptionsPattern.pptx
ASP.NETCoreOptionsPattern.pptxTakao Tetsuro
 
Layout isfirstprocessofatomicdesign
Layout isfirstprocessofatomicdesignLayout isfirstprocessofatomicdesign
Layout isfirstprocessofatomicdesignTakao Tetsuro
 
Interoperability of webassembly with javascript
Interoperability of webassembly with javascriptInteroperability of webassembly with javascript
Interoperability of webassembly with javascriptTakao Tetsuro
 
Interactive connection2
Interactive connection2Interactive connection2
Interactive connection2Takao Tetsuro
 
M365VM_PowerFX_takao-matsumoto_matsui_kojima
M365VM_PowerFX_takao-matsumoto_matsui_kojimaM365VM_PowerFX_takao-matsumoto_matsui_kojima
M365VM_PowerFX_takao-matsumoto_matsui_kojimaTakao Tetsuro
 
OpenStreetMap and Mapbox
OpenStreetMap and MapboxOpenStreetMap and Mapbox
OpenStreetMap and MapboxTakao Tetsuro
 
Excel on OneDrive is not a file
Excel on OneDrive is not a fileExcel on OneDrive is not a file
Excel on OneDrive is not a fileTakao Tetsuro
 
Development toolsforteamdevelopment
Development toolsforteamdevelopmentDevelopment toolsforteamdevelopment
Development toolsforteamdevelopmentTakao Tetsuro
 
React Helmet navigates SPA
React Helmet navigates SPAReact Helmet navigates SPA
React Helmet navigates SPATakao Tetsuro
 
Reacthelmetcontrolesspa
ReacthelmetcontrolesspaReacthelmetcontrolesspa
ReacthelmetcontrolesspaTakao Tetsuro
 

More from Takao Tetsuro (20)

Small Language Model Local Launch on AI Tour Tokyo
Small Language Model Local Launch on AI Tour TokyoSmall Language Model Local Launch on AI Tour Tokyo
Small Language Model Local Launch on AI Tour Tokyo
 
local launch small language model of AI.
local launch small language model of AI.local launch small language model of AI.
local launch small language model of AI.
 
Implementation Approach of Artifical Intelligence
Implementation Approach of Artifical IntelligenceImplementation Approach of Artifical Intelligence
Implementation Approach of Artifical Intelligence
 
MAUIGraphicsNamespace.pptx
MAUIGraphicsNamespace.pptxMAUIGraphicsNamespace.pptx
MAUIGraphicsNamespace.pptx
 
Polyglot Persistence and Graph Schema
Polyglot Persistence and Graph SchemaPolyglot Persistence and Graph Schema
Polyglot Persistence and Graph Schema
 
ServiceMeshEndpointWithMinimalAPIPublish.pptx
ServiceMeshEndpointWithMinimalAPIPublish.pptxServiceMeshEndpointWithMinimalAPIPublish.pptx
ServiceMeshEndpointWithMinimalAPIPublish.pptx
 
OptonsPatternDotNet.pptx
OptonsPatternDotNet.pptxOptonsPatternDotNet.pptx
OptonsPatternDotNet.pptx
 
ASP.NETCoreOptionsPattern.pptx
ASP.NETCoreOptionsPattern.pptxASP.NETCoreOptionsPattern.pptx
ASP.NETCoreOptionsPattern.pptx
 
gRPCurlDotNet.pptx
gRPCurlDotNet.pptxgRPCurlDotNet.pptx
gRPCurlDotNet.pptx
 
Layout isfirstprocessofatomicdesign
Layout isfirstprocessofatomicdesignLayout isfirstprocessofatomicdesign
Layout isfirstprocessofatomicdesign
 
Team development
Team developmentTeam development
Team development
 
Interoperability of webassembly with javascript
Interoperability of webassembly with javascriptInteroperability of webassembly with javascript
Interoperability of webassembly with javascript
 
Interactive connection2
Interactive connection2Interactive connection2
Interactive connection2
 
M365VM_PowerFX_takao-matsumoto_matsui_kojima
M365VM_PowerFX_takao-matsumoto_matsui_kojimaM365VM_PowerFX_takao-matsumoto_matsui_kojima
M365VM_PowerFX_takao-matsumoto_matsui_kojima
 
OpenStreetMap and Mapbox
OpenStreetMap and MapboxOpenStreetMap and Mapbox
OpenStreetMap and Mapbox
 
Excel on OneDrive is not a file
Excel on OneDrive is not a fileExcel on OneDrive is not a file
Excel on OneDrive is not a file
 
Development toolsforteamdevelopment
Development toolsforteamdevelopmentDevelopment toolsforteamdevelopment
Development toolsforteamdevelopment
 
React Helmet navigates SPA
React Helmet navigates SPAReact Helmet navigates SPA
React Helmet navigates SPA
 
Reacthelmetcontrolesspa
ReacthelmetcontrolesspaReacthelmetcontrolesspa
Reacthelmetcontrolesspa
 
One drivesettings
One drivesettingsOne drivesettings
One drivesettings
 

Recently uploaded

TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案sugiuralab
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdftaisei2219
 
【早稲田AI研究会　講義資料】3DスキャンとTextTo3Dのツールを知ろう！(Vol.1)
【早稲田AI研究会　講義資料】3DスキャンとTextTo3Dのツールを知ろう！(Vol.1)【早稲田AI研究会　講義資料】3DスキャンとTextTo3Dのツールを知ろう！(Vol.1)
【早稲田AI研究会　講義資料】3DスキャンとTextTo3Dのツールを知ろう！(Vol.1)Hiroki Ichikura
 
論文紹介：Semantic segmentation using Vision Transformers: A survey
論文紹介：Semantic segmentation using Vision Transformers: A survey論文紹介：Semantic segmentation using Vision Transformers: A survey
論文紹介：Semantic segmentation using Vision Transformers: A surveyToru Tamaki
 
論文紹介：Automated Classification of Model Errors on ImageNet
論文紹介：Automated Classification of Model Errors on ImageNet論文紹介：Automated Classification of Model Errors on ImageNet
論文紹介：Automated Classification of Model Errors on ImageNetToru Tamaki
 
論文紹介：Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介：Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介：Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介：Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...Toru Tamaki
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Yuma Ohgami
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものですSOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものですiPride Co., Ltd.
 

Recently uploaded (8)

TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
 
【早稲田AI研究会　講義資料】3DスキャンとTextTo3Dのツールを知ろう！(Vol.1)
【早稲田AI研究会　講義資料】3DスキャンとTextTo3Dのツールを知ろう！(Vol.1)【早稲田AI研究会　講義資料】3DスキャンとTextTo3Dのツールを知ろう！(Vol.1)
【早稲田AI研究会　講義資料】3DスキャンとTextTo3Dのツールを知ろう！(Vol.1)
 
論文紹介：Semantic segmentation using Vision Transformers: A survey
論文紹介：Semantic segmentation using Vision Transformers: A survey論文紹介：Semantic segmentation using Vision Transformers: A survey
論文紹介：Semantic segmentation using Vision Transformers: A survey
 
論文紹介：Automated Classification of Model Errors on ImageNet
論文紹介：Automated Classification of Model Errors on ImageNet論文紹介：Automated Classification of Model Errors on ImageNet
論文紹介：Automated Classification of Model Errors on ImageNet
 
論文紹介：Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介：Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介：Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介：Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものですSOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
 

Wasm blazor and wasi 2

Editor's Notes

  1. 前回に引き続き、コンテナライズの設計についてお話します。ドメインドリブンデザインについては前回お話したので、今回はコンテナライゼーションの実装例として、RustでWebサービスするRust WebAssembly、Node + Expressでサービスする非同期Web APIで生産性を高めるエコシステムの構成例をご紹介します。Azure Static Web AppsでサービスするBlazor WebAssemblyについては2月3日のMicrosoft Developer Dayでお話していますので、本日は軽く触れます。【クリック】井上章さんのキーノートもありますのでぜひ登録ください。またWebAssembly System Interfaceについても実装例ではなく仕組みのお話をします。いずれのアーキテクチャもコンテナライゼーションによるバーチャライゼーション・テクノロジーの効果に言及します。
  2. 【読む】
  3. 前回はコンテナの設計の話をしました。基盤を抽象化するときに必要なメッセージングという概念と、メッセージング・ミドルウェアの実装時の製品選定にブローカーの有無やメッセージングの方向が重要で、ソリューションアーキテクチャが設計されなければ実装時に余計なコーディングを行う必要があるというお話をしました。 また、KafkaやSignalR、AMQTのように双方向のメッセージングができるものやgRPCのように直接機能を呼び出すものについても、製造コストの低減やプロダクティビティの向上の一例として、マイクロサービスをドメインドリブンアーキテクチャで設計していくといった方法を紹介しました。
  4. マイクロサービスがコンテナライゼーションにマッチしている理由は、ステートフルミドルウェアという概念でステートの一貫性（Consistency）や不可分性（Atomicity）、永続性（Durability）や独立性（Isolation）を確保しようとしているため、このACIDがサービスで完結しコンポーネント化可能で、WebAssemblyはそのコンポーネント化の実装例のひとつになりうることをお話ししました。その解説として仮想化技術の視点からWebAssemblyにアプローチしました。
  5. 今回の話はCodeの部分についてAlpine linuxやnode、Rust、永続化層のお話をします。
  6. ここからおさらいです。
  7. このWebページはIBMの記事ですが、コンテナライゼーションの基礎を非常にわかりやすく解説しています。このページの中でマイクロサービスとコンテナライゼーションの親和性の話をしています。【クリック】【読む】 コンテナの設計で重要なことはその範囲の定義です。たとえばNginxでサービスエンドポイントを構成し、リバースプロキシやロードバランサーを作って、マイクロサービスのひとつのWebサービスをNodeで作った場合、それぞれをDockerイメージで作成することもできますし、同じコンテナで構成することもできます。この際のNginxはサイドカーの役割を果たしますのでNodeのサービスのサイドカーの役割であれば同じコンテナで設計しても正しい設計と言えますし、Nginxはルートの役割を果たしているのだからサービスメッシュ設計パターンであれば別々のDockerイメージでも正しいと言えます。つまり、コンテナライゼーションの範囲の定義は、マイクロサービスの設計に依存します。マイクロサービスの設計の結果、そのサービス単位でコンテナを構成することで、クラウドネイティブなソリューションの活用の最も近道となります。
  8. マイクロサービスは個別の永続化層を持ちスケーラビリティを行う設計なのでステートフル・ミドルウェアを構成する必要があります。【クリック】ステートフル・ミドルウェアは各サービス固有の永続化層から取り出した各ステートを必要に応じて適正に合成してユーザーに提供する手法です。ステートフル・ミドルウェアの説明のため、非常にシンプルな例ですが、Nginxのリバースプロキシから一番右のSVGアイコン色付けのWebアプリに飛ばすようなアプリを例にしています。このアプリはSVGファイルを色付けするアプリで、左の2つのサービスを利用しています。一番左はRust言語で作成されたQRコードを生成するサービス、真ん中はSVGのフリーのアイコンを取得するサービスです。 このサンプルはすごく簡単に作れますのでぜひやってみてください。
  9. コンテナライゼーションはプログラムの基盤仮想化なので、Windows上でLinuxを使った開発/デバッグ/デプロイ/運用を行うことは、CD/CIの計画に非常に有用です。 WSLはMicrosoftストアからUbuntuをダウンロードして設定するとWSLが使えるようになります。UbuntuはLTSなのでエンタープライズReadyなディストリビューションです。保守コストを考慮すると企業や学校などではLTSは欠かせないと思います。 WSLのの設定が終わったらWindowsターミナルからUbuntuを起動します。
  10. WSLを設定してubuntuをストアからインストールします。その後、ubuntuにdockerを作る作業を行います。 最初にツールはhttps（HTTPS接続）とca-certificates（SSL接続）、gnupgp（鍵暗号化、複合化、署名ツール）、lsb-release（バージョン確認）、curl（通信クライアント）を入れておきます。 次にDockerをインストールするためにキーの取得を行います。最後にインストールできるイメージを確認してインストールします。
  11. NginxやNodeはDockerからオフィシャルイメージが提供されていますので、pullしてrunしてコンフィグを編集するという所要時間5分の作業でNginxの設定は終わります。
  12. confファイルをvimで開いてhttpブロックのServerセクションを追加するだけでリバースプロキシは設定できます。実環境ではホスト側のファイアーウォールの設定が必要です。このサービスエンドポイント内でもファイアーウォールの設定は「ufw enable」「ufw allow」「ufw default deny」の数行で設定できますが、サービス同士が通信するパターンではなく、サービスメッシュを設計する場合各サービスからサービスメッシュエンドポイントにサイドカーの機能を移動させる必要がありますので、それなりのセキュリティ設計が必要になります。可搬性を意識してこのタイミングではファイアウォールやロードバランシングを設定をしません。コンテナを実際に配置する際に設定するようにします。
  13. Nodeも同じくDockerからオフィシャルイメージが提供されていますので、pullしてrunしてexpressをインストールするという所要時間5分の作業でホームページが表示できます。【クリック】ただ、この段階では既定の3000ポートでホームページを表示しますので、後程80に変更して8081ポートがDocker内部の80ポートに飛ぶようにします。【クリック】
  14. 実際の画面でも3スクロール半程度でホームページを表示できます。
  15. pullは最初の一回だけでいいのでやっておいてrunします。【クリック】コンテナに入ります【クリック】/home/nodeに移動してAlpine linixを最新にします【クリック】
  16. Nodeのパッケージマネージャーは、最初の一度だけ初期化します。【クリック】ここではリターンキーで進んでいますが、必要に応じてパッケージ名や説明、作成者などを入力しパッケージ情報を作成します。書き込み場所の確認とjsonファイルに書き込まれる内容が表示されます。
  17. Jsonファイルに書き込むNodeパッケージマネージャーの情報の内容に「y」で確認すると、新しいバージョンがあることを警告しますが、無視してexpress-generatoテンプレートをインストールします。【クリック】 カレントディレクトリでテンプレートを使ったWebページを作成します。作成の確認に「y」で作成を開始します。
  18. テンプレートでリソースを作成し終えたらNodeのバージョン間の競合を解決します。【クリック】脆弱性の警告が出るので監査内容を修正します。
  19. 脆弱性が「0」になってWebをスタートさせると3000ポートでWebリクエストを待ち受けていることが表示されます。
  20. ブラウザから8081→Docker→nodeに要求が転送されていることを確認できます。
  21. 続けてgitも入れてしまいます。Gitのインストールははさらに簡単です。ここで作成したホームページをGitHubにコミットする方法は後述します。コミットはGit CLIを使いますので、いったんCtrl+CでWebを終了しAlpine linuxを最新にしてgitをインストール、再度Alpine linuxを最新にした後に.gitignoreファイルも編集するのでここでvimも入れておきます。最後にもう一度Alpine linuxを最新にしておきます。この状態でDockerイメージを保存しておきます。
  22. 保存にはコンテナの保存とイメージの保存がありますが、今回のコンテナライズはプロジェクトに新規開発メンバーが入った時の開発環境配布についてもCD/CIと同様に考慮すべき点と思いますので、ここではイメージの保存を行います。新規メンバーがチームに入った時にすぐにコーディングに取り掛かってもらうことが理想です。プロジェクトのコストのほとんどが人件費なので、このような工数の削減は非常に重要です。Dockerコンテナから抜けて、現在のnodeイメージの状態をアプリケーション名でリポジトリ名、バージョン名でタグ名を指定したイメージとして作成するためnodeコンテナをコミットします。pullしたnode:latestイメージが別のイメージとしてリポジトリ名、タグ名になって保存されます。その後コピーした方のイメージをtarファイルとして保存して、プロセスをKillしてコンテナを廃棄します。後述しますが、nodeの方を使ってQRコードアプリとSVGフリーアイコンリストアプリを作成します。それでは、実際にステートフルミドルウェアを設計します。
  23. ログインユーザーがどのようなQRコードを生成しどのような色付けしたかは8081でなく8083に永続化されます。またどのようなフリーアイコンを選びどのように色付けされたのかは8082に永続化されます。8081には、そのアイデンティティがログインしているかどうかだけが永続化されます。8081は、ユーザーがログインしている場合に8082や8083に問合せを行います。このように必要な時に必要な情報のみを参照してコンテキストを生成する手法をステートフルミドルウェアと言います。 このステートフル・ミドルウェアは8081が制御するパターンもありますが、エンタープライズ・ソリューションではメッセージング・ミドルウェアを構成してステートフル・ミドルウェアを実装していくケースが多くあります。
  24. 先ほどのログインユーザーのステートはマイクロサービスとして設計します。この設計のプロセスの一例としてドメインドリブンデザインでの設計を解説します。 ドメインドリブンデザインでは、大きくドメインを構成して、コンテキストを設計しモデルを作成します。 ここで注意していただきたいのは、ステートフルミドルウェアを8081が制御するように実装する方法であっても、メッセージングミドルウェアを使って実装する方法であってもステートフルミドルウェアの設計プロセスは同じということです。
  25. DDDの入り口としてドメインやサブドメインを構成する複数（または単一）のバウンデッド・コンテキストを説明する4つの設計概念（エンティティ、バリューオブジェクト、サービス、イベント）の関係性をお話しします。 問題解決領域であるドメインは複数のサブドメインで構成されます。このサブドメインはユーザーストーリーから作成することができます。この方法がDDDのすべてではありませんが、DDDを最も理解しやすい方法なので、まずはこの方法で習得してからほかのアプローチを検討してみてください。 ログインユーザーがQRコードを生成するというユーザーストーリーにはログインするというユースケースとQRコードを生成するというユースケースがあります。たとえばQRコードを生成するというユースケースで扱う情報をバウンデッドコンテキストといいます。QRコードを生成するためのバウンデッドコンテキストにはQRコードそのものを表すエンティティとログインユーザーを表現するエンティティがあります。エンティティとして表現する方法のほかの表現としてバリューオブジェクトという表現方法があります。設計によって、どちらで表現しても構いませんが、ログインユーザーのIDが異なれば別のユーザーと判別できますからバリューオブジェクトとして定義できるかもしれません。バリューオブジェクトとは複数のデータの塊の形が同じで、そのうちのいくつか（またはひとつ）が異なると別物であると一意に決まるログインユーザーのようなものを表現するときに設計に利用できる概念です。
  26. バウンデッドコンテキストはユースケースとして設計する方法があります。ドメイン・ドリブン・デザインでは、サブドメインとして分割された問題解決領域で必要な情報はそれぞれが関連しているのかどうかを明示する必要があります。図でいうところのログインユーザーというバリューオブジェクトは、サブドメインの中でバウンデッドコンテキスト間に共通する情報です。このようにユースケースごとに共通するエンティティを明示していく作業をコンテキストマッピングと言います。
  27. SVGエンティティや色エンティティにはIDのようなものはありません。一意である必要が無いからです。色はログインユーザーが決定する情報なのでログインユーザーにはアイコンとアイコンの色、QRコードとQRコードの色があります。また、アイコンもQRコードもSVGで取り扱いますのでログインユーザーにはそれぞれコードを生成するソースの文字列とフリーアイコンのアドレスの属性を持ちます。ログインユーザーのアイデンティティプロバイダーの認証URLは、ユーザーがログインに使用したものになります。
  28. このサービスとイベントによってメッセージングの方向が決まりますので、コンテナの範囲が決まります。解説を簡略化するためコンテナを先に説明しましたが、本来はドメインからサブドメインに分割していきます。つまり、SVGアイコン色付けドメインのSVGフリーアイコンのリスティングユースケースに分離設計して、このユースケースのバウンデッドコンテキストをモデリングしていくという流れです。SVGフリーアイコンのWebサイトから取得したSVGを一覧するサービスですが、SVGフリーアイコンのWebサイトに問い合わせるのはこのサービスが呼ばれた時になります。そして、呼ばれるときにアカウントに紐づけられたアイコンをSVGフリーアイコンのWebサイトに問い合わせます。そして、何かしらのエラーが返ってきたときに予備的な何等かの画像を返すようにしないと、このサービスを呼び出した元は直接SVGフリーアイコンのWebサイトに問い合わせるのと変わりません。このサービスにはアカウントとアカウントに紐づいたSVGアイコンのURL、SVGアイコン画像、アカウントが編集した色が永続化されます。この永続化層とサービスの入出力口をつなぐ部分がサービスリポジトリと言います。
  29. このサービスにはアカウントとアカウントに紐づいたSVGアイコンのURL、SVGアイコン画像、アカウントが編集した色が永続化されます。この永続化層とサービスの入出力口をつなぐ部分をサービスリポジトリと言います。サービスリポジトリはこのサービスのバウンデッドコンテキストのログインユーザーモデルを持っています。今回はたまたま同じ形をしたログインユーザーモデルがログインサービス側にいます。バウンデッドコンテキストが異なると関連するエンティティやバリューオブジェクトは異なることが重要です。ユースケースによって関心ごとや構成する属性が異なるからです。解説は割愛しますが、たとえばシネマコンプレックスのスクリーン情報はユーザーにとってはいつ何が上映されているかに関心があると思いますが、シネコン側からすればそれに加えキャパシティや車いすの席数も必要です。このようなケースでバリューオブジェクトを設計するとドメイン内で余計な情報を持ち歩くアプリケーションを作成してしまいます。もちろんスペックやセキュリティの側面から好ましいとは言えません。そのため、サービスリポジトリではそのサービスが扱うバウンデッドコンテキストのモデルの形で永続化することになり、それを他のバウンデッドコンテキストのモデルと合致させるための翻訳はファクトリが行うことになります。外部ソースやそのサービスの永続化層のからのデータなどを紐づけして、そのサービスのモデルのインスタンスに格納していく作業を行うのはアグリゲートです。
  30. ドメインドリブンデザインによってサービスを構成するサービスリポジトリ、ファクトリ、アグリゲートの役割が明確化するとイベントの発生タイミングとイベント同士の関連、守られなければならない順が明確化します。このサービスでは呼び出されたタイミングで発生するイベントがトリガーになり、永続化層にアカウントのURLを問合せて、取得したURLへリクエストを投げます。そのリクエストの返答がないと永続化層へ結果を書き込めません。また、返答後にステートフルミドルウェアへの最新のSVG情報を提供します。このようにイベントの発生タイミングと順番を明示しておくことが重要です。【クリック】ただし、ステートフルミドルウェアに情報提供するタイミングについてフリーアイコンサイトに問合せの返答を待つ場合は一度のリクエストレスポンスですが、待たない場合はフリーアイコンサイトへの問合せの返答が来たら情報を更新するので、レスポンスは2回になります。この部分はメッセージングミドルウェアを利用するか、このサービスを利用する側で最新の情報の取得を待つ必要があります。 制約をつけて「ユーザー操作による最新情報の取得」、「常に最新の情報を取得し、取得できなかった場合にのみ永続化層のデータを使う」などの対応はありますが、マイクロサービスにそのような制約を設けるとマイクロサービスの可搬性、再利用性を失います。そのため、このサービスには最新の問合せを行うかどうかのオプションも設ける必要があります。
  31. 開発環境では、永続化層はJSONをテキストファイルに書き込む程度でも問題ありませんがコンテナの外部のストレージをマウントするとコンテナの可搬性が失われます。そこで、SVGフリーアイコンリスト・アプリのコンテナにはmongoを仕込みます。nodeと同じようにmongoもDockerからオフィシャルイメージが提供されていますので、mongoのコンテナにnodeをインストールするという非常に簡単な作成方法があります。【読む】【クリック】ポート【クリック】今回はnodeはインストールされていませんので、curlでnodeを取得してインストールします。curlも入っていないのでこの4行でnodeをインストールします。【クリック】後はnodeのときと同じです。
  32. expressでWebアプリの作成が終わったら今度はapp.jsを編集してポートを80に直します。同じように8081の3000も80に直します。「sudo docker exec -it svgfreeicondb /bin/bash」で中に入って「vim app.js」でapp.jsをvimで開きます。【クリック】「i」で編集できるようになりますから、この1行をapp.setの一番下に追加して「esc」「:」「w」で保存して「:」「q」でvimを終了します。
  33. ここでmongoshと打ちます。【クリック】現在のmongoの状態が表示できますので、接続情報の場所を覚えておきます。【クリック】
  34. Visual Studio CodeのExtentionで先ほどの接続情報を使ってdockerのmongoに接続できていることを確認してください。【クリック】
  35. では、この3つの動きを確認してみましょう。ステートフルミドルウェアは後に様々なメッセージングミドルウェアに移植できるように簡単なwebアプリをひとつ作って各コンテナからのメッセージを受け付けて、宛先にバイパスして、返答が返って来たら待ってるコンテナに返すだけのシンプルなものを用意します。今度はDockerをホストしているWSLのホストのWindows側に小さなアプリを作ります。
  36. こちらも非常に簡単です。3行で開発に入ることができます。開発証明書を入れても4行なので非常に簡単です。開発証明書は「dotnet dev-certs https --trust」で入れます。
  37. その状態でVisual Studio Codeを開きProgram.csを開きます。このapp.MapGetの部分がルーティングになりますので、先ほどの「http://localhost:5268」の「/weatherforecast」をブラウザで閲覧します。 動作が確認出来たら、このapp.MapGetの部分をコピーしてメッセージングミドルウェアのプロトタイプを作ります。このステートフルミドルウェアが稼働するのは.NETフレームワークが入っているサーバーということに注意してください。メッセージングミドルウェアを実装する場合には、Apache Kafka、RabbitMQのようなブローカーにメッセージを送るタイプ、ブローカーを意識しないPaaS系のAzure PubSubのようなメッセージングの方向が決まっているもの、双方向に直接メッセージングが可能で受信側が送信元になれるSignalRのようなもの、受信側が固定化されたAWS SQSやApache ActiveMQ、そのマネージドサービスであるAmazonMQ、AMQP対応のApache Qpidなどものすごい量のアーキテクチャを選択できます。ソリューション内のサービスの方向を整理して設計するので、設計に必要なメッセージングミドルウェアのプロトタイプは必ずシンプルなものを実装します。
  38. appsettings.jsonにサービスエンドポイントを定義します。キーは特にポートと同じでなくても良いです。【クリック】この設定値の情報は、minimalテンプレートにはswaggerが付いてますので、このAPI利用者用に情報提供のAPIも作っておきます。【クリック】
  39. swaggerは「/swagger」にルーティングされています。【クリック】settingsInfoを開き【クリック】Try it outを選択して【クリック】Executeを実行します【クリック】設定値を確認することができます。【クリック】
  40. エラーなども用意していますがメッセージング部はいたってシンプルです。【クリック】デバッグのため、受け取った文字を返していますが取得できていることが確認できるので、後程コメントアウトして引数で指定された送信先にメッセージを転送するようにします。
  41. 8082はリクエストを受けて、アカウントがアイコンを設定していなければ、設定してもらうようにある程度の量のアイコンを返してやる必要があります。また、あればそのアイコンひとつを返してやります。最初にMongoDBに問い合わせる、無かったら10個程度フリーアイコンサイトから取ってきてそのまま返す、あったらそのアイコンをフリーアイコンサイトから取ってきてDBに保存し返すようにします。常に最新のアイコンを返します。アイコン取得時のエラー時にはDBのものを返すのですが、この一連の作業は呼び出し側から制御できるようにして、オプションとして「最新を問い合わせない」、「エラーをそのまま返す」等の選択ができるようにします。最後に、いったん8082のコンテナに入ってWebアプリをGitHubにアップします。こちらも簡単な作業ですので実際にやってみてください。
  42. GitHubは組織でチーム開発ができます。そのためGitHubの組織アカウントをお持ちの方もAzure Active Directoryの方も開発に参加できます。コミット等の操作はCLIで行いますのでGitHub CLIをインストールします。dockerと同じようにキーを取得後ダウンロードしてインストールします。ただし、今度はdocker内のAlpine Linuxで行いますのでsudoは使いません。
  43. すでにコンテナ内のAlpine Linuxにはアプリのスケルトンはできているので、そのままgitを初期化してGitHubにコミットします。GitHub Cliでは、GitHubにリポジトリの無いローカルリポジトリを作成する手順を例にしていますのでログイン後「create repo」を行っています。【クリック】ログインでブラウザでログインを選ぶとブラウザが起動して画面に表示されたワンタイムのコードを入力するように促されます。【クリック】コードを入力すると認可の画面が出てきます。【クリック】アプリケーションが代行する権限を確認したらパスワードを入力します。【クリック】成功するとコンソールの方にも同じく成功が通知されます。【クリック】コンソールにGitHub Cliの設定情報が表示されるのでEnterで進みます。【クリック】ログイン情報が表示されます。【クリック】GitHub側でリポジトリが作成された事を確認できます。
  44. 作業効率の良い環境で作業してください。私はWindowsのVisual Studio Codeでの作業に慣れているのでGitHubからダウンロードして作業をしています。Windows側では、まずnodeのバージョンを確認して必要に応じてインストールしてください。【クリック】…【クリック】linux側と同じなら問題ありません。また、node_modulesフォルダ、.gitignoreファイルやhttp-errorのnodeモジュール、expressのbody-parserや開発証明書も追加します。【クリック】.gitignoreファイルはdotnet newで作ります。【クリック】実際この6行打つだけで画面が出ます。
  45. 今度はWindows側で開発するのでVisual Studio CodeのExtensionを追加しておきます【画面説明】
  46. GitHubからダウンロードしてきたフォルダをVisual Studio Codeで開いてデバッグペインを開くとデバッグ方法の選択肢が表示されます。【クリック】Run and Debugで選択ツールバーが表示しますので、EdgeかChromeを選択します。【クリック】launch.jsonが開くのでurlのポートを80に直してAdd configurationを選びます。【クリック】選択肢が表示されますので、リストの一番下まで移動し「Run “npm start” in a debug terminal」を選択します。【クリック】最後に出来上がった2つをcompaundsでつなげてデバッグリストの名前を選択して実行します。【クリック】terminalで200、スタックにブラウザとnpmが起動していることを確認します。終了はデバッグのツールバーで2つのスタックを終了させます。
  47. マイクロソフトlearnにそのものズバリのコンテンツがありますので、詳細はそちらを参照してください。【クリック】まずapp.jsにPOSTとGETの入り口を作ります。body-parserを定義してjsonメソッドを呼び出します。【クリック】リクエストのjsonの解析はbody-parserで行うことができます。【クリック】
  48. GETはアドレス「/freeIcons」にアカウントの有無で、返すsvgの個数を変更する処理を行ってから、ひとつであればmongoに保存してレスポンスを返すという処理です。【クリック】ポイントは「req」「res」「next」でそれらをコントロールできる点です。【クリック】リクエストはそのままクエリストリングをシンプルに指定できますし、【クリック】nextキーワードによって同期処理が保証されます。 ドメインドリブンデザインのサービスとイベントで定義された処理順がそのまま実装できます。【クリック】nextキーワードで次の処理に行くとフリーアイコンが取得できたことが保証されているのでmongoに保存、およびレスポンスの設定ができます。ここでもレスポンスにはendメソッドがあるのでヘッダーの書き込みは必ずレスポンスを返す前に行われることが保証されます。
  49. 今回はAPIなのでViewは持ちません。デバッグはThunder Clientを使います。【クリック】Thunder Clientを一番最初に使うときはアイコンは表示されていないので「Ctrl+Shft+P」でコマンドバーを起動してThunder Clientを選択してください。【クリック】デバッグでブラウザを表示してから、Thunder ClientでNew RequestでGet、localhost/freeIconsでSendボタンをクリックするとレスポンスが返ってきます。【クリック】また、アカウントをクエリストリングで指定するとひとつだけレスポンスが返ってきます。【クリック】【クリック】
  50. POSTはもう少し簡単です。【クリック】urlを指定したapp.postメソッドにリクエストのbodyを取得するようにするだけです。body-parserによってJSONを非常に簡単に操作できます。【クリック】GETと同じようにThunder Clientでデバッグします。今度はヘッダのContent-TypeとBodyのJSONを設定してPOSTでlocalhost/seticonをsendします。
  51. SVGを取得する部分を作成します。【クリック】外部APIリクエストにaxiosとSVGのXML部分を抜き出すのにexpress-xml-bodyparserを使うのでVisual Studio Codeのターミナルを使ってインストールします。また、今回は使いませんが「npm i svgson」でインストールしておくとオブジェクトとしてSVGを扱えるのでSVGアイコンの色付けなどが簡単に行えるようになります。【クリック】外部Webサイトにリクエストを投げる部分とレスポンスを取得する部分は、10個と1個の違いなのでほぼ同じですが、axiosの使い方に少し工夫します。【クリック】svgを受け取る際に同期処理としてresponse.dataを待ちます。また、Expressサーバーが次の処理に進むのはファンクションの中で10個取得したかどうかを判定しています。【クリック】実行するとThunder Clientで、ひとつ取得と10個取得ができていることを確認できます。さきほどsvgsonを今回やらないと言いましたがこのSVGのXMLはサニタイズされているので後処理が必要です。その後処理を行うためにsvgsonを使うので後述します。これをGutHubにコミットしてコンテナ側と同期することができます。
  52. 次にmongoです。【クリック】Dockerの8082のデータベースを起動しておいてVisual Studio CodeでMongoDB Extentionを起動します。先ほど作成したコネクションを選択して、Add Databeseを選択します。Playgroundが開きますので、編集してDBを作成して行きます。【クリック】database「SVGServiceDB」、collection「UsersState」、createCollectionはそのままで「db.UsersState.Insert」を追加します。フィールドはaccountとurlだけ入れておきます。値は好きなものを入れておきます。先ほど設計した内容では、既定で「アイコンを取ってきてからDBに書き込み」です、また最新を問い合わせるオプションはまだ実装していないので、この状態でプログラムの開発準備が整いました。実行します。【クリック】Resultが表示されますので、Playgroundの3点リーダーを使って画面を操作します。【クリック】追加されたことを確認します。
  53. npm I mongodbでインストールした後にrequireでインポートしてコードで使用します。【クリック】処理ではmongoClientの接続、アカウントの有無確認アップデートまたは追加の処理を追加するだけです。
  54. 処理の構築でソリューションエンジニアやプロジェクトマネージャはソースコードを読む必要はありません。品質を保証するのは設計と設計に合致したサービスの方向とタイミング、実行順です。特にマイクロサービスの場合、これまで見てきたように非常にシンプルな作業でコンテナ化が可能です。コンテナライゼーション時代のマイクロサービス設計がドメインドリブンデザインによって品質保証を行うことができることが確認できたと思います。実際に今回のような実践は様々な情報として提供されています。
  55. ドメインドリブンデザインのサービスとイベントで各サービスがどの相手と通信するのかが明確になりますから、サービス単位に設計されたコンテナのメッセージングの方向が稼働するミドルウェアを決める動機になりえます。この時にステートフルミドルウェアを構成するサービスが稼働するメッセージングミドルウェアを正しく選択する必要があります。バズワードに惑わされることなく、メッセージングモデルの特性を知っておくことが重要です。 現在利用されている代表的なアーキテクチャはメッセージングミドルウェアという概念から派生しています。メッセージングミドルウェアの概念として、ポイント・ツー・ポイント、ファンアウト、リクエスト／レスポンスなどがありますが組み合わせて使うことが一般的で、各クラウドベンダーサーバーレスアーキテクチャとして用意するコントロールプレーンやサービスで実装されていますし自作することもできます。【クリック】Kafkaはブローカーモデルなので、パブサブパターンやキューを実装できますし、SignalRはPubSubパターンを実装できます。またAdvanced Message Queuing Protocolはポイント・ツー・ポイント、パブサブパターンやキューを実装できます。
  56. 今回8081のSVGカラーリングアプリがSVGを呼びました。また後程QRCodeを呼び出します。このステートフルミドルウェアのアーキテクチャ選定はドメインドリブンデザインの設計時に決定できます。今回の場合、どちらのサービスも一方向です。サービスクライアントである8081のインスタンスは複数なので、複数のサービスインスタンスと複数のクライアントインスタンスがやり取りを行うので、ブローカーを使うアーキテクチャの方が向いています。サービスメッシュエンドポイントのようにインスタンスのルーティングによって管理できるのであればgRPCのような直接のコールでも構いませんが、8082の外部Web APIを呼び出すSVGフリーアイコンのサービスは、やはりブローカーを使うPub/Subパターンの方が安全と考えます。【クリック】もちろんKafkaやRabbitMQでもかまいませんが、サービスとクライアントが決まっているので双方向メッセージングミドルウェアはオーバースペックのように感じます。
  57. コンテナ化の目指すところはユースケース別のサービスと同じく機能別にも考慮されています。
  58. これは2019年の記事ですが、コンテナ化の考え方が拡張されてきた経緯などが書かれています。Server-side Blazorはサービスの方でハンドリングされるのでユーザー操作と永続化層へのコミットが密接に結びついている決済確定処理などに向いています。確定の前までのユーザー操作と決済確定のページ（またはコンポーネント）は遷移を分けておき、決済確定の画面ではサービス側へのコミットとユーザー操作が確実に結びつくようにしておきます。 そのほかにブラウザー側で実行するタイプのBlazorとOSにインストールするタイプのBlazorがあり、オフラインでの実行に有用です。これらは、UI のレンダリングに Web 技術を使うのかデバイスのネイティブ コントロールを使うのかの違いです。デバイスのネイティブコントロールはユーザーにデバイスの操作の違和感を与えません。同じように、Web技術を使う場合はWebアプリケーションの遷移の中で違和感なくネイティブの機能を使うことができます。 .NET Coreを使ったElectron Blazorは.NET 6におけるWebAssemblyのマルチプラットフォームのグルーコードを生成することができるため、ブラウザの機能を利用することなくネイティブの機能を使うことができます。さらにElectronを使うことなく直接ネイティブの機能を使うためのSystem Interfaceを備えたWASIの技術も現在進行形で進んでいます。
  59. コンテナライゼーションの本質を言い表すためには、ドッカーの創始者のソロモン・ハイクスのツイートが最も有名かもしれません。
  60. プラットフォームから配信するコンテンツがスタティックなコンテンツであれば、サービスサイドの動的なコンテンツ作成を必要とることなくAzure CDNなどのContents Delivery Network（CDN）を利用することができます。【クリック】また、CDNの中には動的サイトアクセラレーション（DSA）というサービスサイドレンダリングを行う機能（サービスサイドプログラムや外部Web APIを利用したサービスサイドマッシュアップによってコンテンツを動的に生成する方式）をサポートするCDNサービスプロバイダーがあります。Azureの場合、Front Door Serviceが動的サイトアクセラレーションを行います。
  61. プラットフォームから配信するコンテンツがスタティックなコンテンツであれば、サービスサイドの動的なコンテンツ作成を必要とることなくAzure CDNなどのContents Delivery Network（CDN）を利用することができます。【クリック】また、CDNの中には動的サイトアクセラレーション（DSA）というサービスサイドレンダリングを行う機能（サービスサイドプログラムや外部Web APIを利用したサービスサイドマッシュアップによってコンテンツを動的に生成する方式）をサポートするCDNサービスプロバイダーがあります。Azureの場合、Front Door Serviceが動的サイトアクセラレーションを行います。
  62. WebAssemblyはGoogleのDerek SchuffとFastlyのLuke Wagnerがチェアマンを務めるW3C WebAssembly WGが策定したブラウザで稼働するバイナリ仕様です。業務トランザクションのどの部分をブラウザ側で行い、どの部分をサービス側で行うかを柔軟に設計できます。 たとえば、映画のチケットの予約であれば自分が席を決めるまでは他の人は空いている席をどこでも予約できますが、自分が席を決めてチケットの支払いが終わるまでは、その席をロックされます。一方コンサートのチケット予約では、チケットが最後の1枚だったとしても、その支払いが終わるまでは、他の人が購入できるようにチケットのロックは行いません。サービス側にチケット売買のステータス変更を要求するタイミングが異なりますので、たとえチケット販売の業務フローが同じであってもWebAssemblyが行う業務トランザクションの範囲が異なるというわけです。 【クリック】この仕様のうち、各ブラウザがどのくらいサポートしているかを逐次レポートしてくれています。WGの[Testing]-[Web Platform browser tests]でかなり細かな機能まで確認することができます。
  63. RustのQRコード作成のサービスを作ります。QRコードサービスは指定された文字をQRコード化するだけですので永続化層は必要ありませんが、文字列が有効かどうかを管理することができるのでサービスを拡充させることができます。たとえば、YoutubeのアドレスのQRコードを作ったとして、そのURLが有効かどうかはサービスを利用する側で判断すれば良いのですが、オプションでURL文字列のアドレスが404や500を返してきてないかを検証する機能を後から追加することもできます。ドメインドリブンデザインのバウンダリーコンテキストの問題なので、皆さんの設計に合わせて永続化層を設けてください。今回は後からどうにでも拡張できるようにを入れておきます。このようなケースで永続化層のアーキテクチャにドキュメントDBを使うのか？KeyValueを使うのか？で迷ったら、目安の一つとして列ファミリやGraphのようなスキーマをKey-Value storeで作成すると後から目的に応じたクエリを発行することができます。目的は変化するのでドキュメントDBでとりあえず保持しておいて目的が明確になった時にデータクレンジングを行うための源泉として使うといった方法もありますので、データ使用時の目的の変化の頻度が目安になります。
  64. QRコードは大きさや保持するデータ量が異なります。そのため、目的によって作る粒度を変化させる必要があります。この場合、キーと値の組み合わせのみを保持するKeyValueは述語を保持しません。単に属性として扱えるので利用の自由度が広がります。これによりプログラムが述語を定義するのでプログラム工数が必要になります。目的が決まっているのであれば、Triplestoreを使えますが、今回のQRコード作成サービスの場合、目的は変化するため定型的なクエリで結果を返すことはできません。かといって理想的なQRコードを右の表のようにプログラムしておくことはサービスの利用者が事前にサービスの目的の種類を知っておいて、目的にあった引数を設定してサービスを呼ぶということになります。APIサービスの多くはSwaggerなどで事前にサービス利用のための引数のセットを作成することができます。しかしながら、サービス側の拡張柔軟性低減と利用側のメンテナンスコストは増加は否めません。目的が決まっていないがやることは決まっている場合、ラベルドグラフやグラフが有効になります。理由は、やることが決まっている場合主語と結び付けたいのは結果との関係です。一方やることとその目的が決まっている場合は列ファミリやTriplestoreが向いています。DocumentDBやRelational DBはやることが決まっていない、決めたくない場合に向いています。インタラクティブなデータのドリルダウンなどです。Graphスキーマは関係を調べるのに最も適したスキーマです。Key-Valueにスキーマを定義し属性同士の関係を探ります。これをリアルタイムでやりたい場合は一般的なGraphより比較的高速に処理できるラベルドプロパティ／ネームドプロパティと言われるGraphが向いています。正確には頂点グラフとエッジグラフがありTriplestoreのプロパティに名前を付けたGraphはエッジグラフを指しますが、一般的なラベルドグラフは頂点グラフを指しますので、一般的なプログラミングにおける複数のエッジラベルで構成されるラベリングはラベルドプロパティと明言するほうが良いかもしれません。今回はGraphスキーマであることが重要なのでTriplestoreのプロパティに名前を付けたGraphをラベルドグラフという言い方をしています。今回は関係の探索をリアルタイムに行うわけではありません。
  65. .NET Frameworkで開発しやすいGraphスキーマはOpenLink Virtuosoですが、今回はGraphストレージを使うneo4jを例にお話しします。また、Graphスキーマ対応のものはDataStax Enterprise Graphなどの製品もありますので必要に応じて調査して下さい。
  66. 手順はMongoDBの時と同じです。Neo4jのオフィシャルイメージをDockerからpullしてrustをインストール、rustの簡単なプロジェクトを作成してVisual Studio Codeで作成していきます。RustアプリケーションではTerminusDBを使った方が楽かもしれませんが、今回はlinux/arm64/v8のオフィシャルイメージがあるNeo4jを使っています。Neo4jはDBにアクセスするWebコンソールも付いていますので特に難しい手順はありません。【クリック】【Neo4j + Rust手順】【クリック】【Hello world手順】【クリック】プログラムが動くことが確認できたので、残りはWindowsの方のVisual Studio Codeで作成します。Neoの動作も確認します【クリック】コンテナは動いてますのでブラウザで確認するだけです【クリック】ポート7474がWebコンソール、7687がDBのAPIです。認証無しで接続します。【クリック】接続が完了したらお気に入りのHello Worldをクリックします。【クリック】
  67. RustのHello WorldをWindows側に持っていく方法はいくつかあります。Windowsで編集したものは最終的にRustのサービスとして同期させなければいけないのでDocker Hubなどのリポジトリを使うことをお勧めします。【選択肢を説明】【クリック】Rustを初めて触る方はマイクロソフトのドキュメントとRustのページを参照してください。環境の設定からHello worldまで簡単に設定できます。
  68. RustアプリケーションをWindows側に持ってきたら、プロジェクトを改修してQRコードを生成するプログラムを作成します。プログラムができたらRustの機能をRustでWebホストするという手順です。【クリック】プログラムとしては2行でターミナルで「cargo run」と打つとターミナルにQRコードのXMLが表示されます。【クリック】これはQRコードのXMLです。
  69. RustのメインスレッドでQRコードを書き出しているので、文字列を渡してQRコードのSVGを返すようにします。これで、このファンクションにアトリビュートをつけてwasmの関数にする準備が整います。ついでにデバッグ時だけターミナルに出力するようにします。【クリック】そうすると、「cargo run」でコンソールでデバッグ、ファンクションを直接API提供といったことが可能になります。
  70. いくつかのライブラリをエコシステムから利用できます。【クリック】次にリリース時にローカルの7878ポートをListenしてリクエストストリームを処理するWebサーバーを作ります。【クリック】処理の中身はストリームの読み書きです。【クリック】読み込んでリクエスト別に処理を分けるのですが、今回はそのままストリームに書き込みを行います。書き込む内容は与えられた文字からQRコードSVGを作成し、SVGのXMLを書き込みます。【クリック】ターミナルで「cargo run --release」をタイプし、ブラウザで7878ポートを参照するとバーコードが表示されます。【クリック】ブラウザのデバッグツールではレスポンスヘッダやステータスコードが設定どおりに送信されていることを確認できます。
  71. マイクロサービスの各サービスは固有の永続化層を持つのが理想です。そのため、永続化層はMongoDBでなくとも良いのですが、コンテナの中に必ずサービスの永続化層を構築してください。手順は非常にシンプルなので30分程度で作成できます。 SVGのファンクションはメインスレッドから分離してありますので、DockerのMongoDBオフィシャルイメージにRustを入れてAPIサービスを構築します。 皆さんお気づきのように、このRustアプリはすでにWebサービスを構成してあります。ただし、NodeやNginx、Rocketを使ってもかまいません。いずれも数行のコマンドと30分程度の作業で構築できます。 実際は500番台までのHTTPステータスコードを設定したりミドルウェアを構成するのは非常に工数を要します。必要に応じてルーティングやストリームの得意なフレームワークを使うといいと思います。ただし、マイクロサービスを構築する目的であればRustでサービスを提供するために十分な言語です。【読む】
  72. 次は「--release」でブラウザに表示させたいのでWebAssemblyを表示できるようにします。 WindowsのRustアプリはWindws OSで管理されていましたが、Dockerの中のRustアプリはAlpine Linuxで管理されています。そのため、ちょっとした変更が必要になります。 まず、Dockerのコンテナは「--network host」をつけて起動します。次に中に入ったら「rustup」を設定します。これはWindows側でVisual Studio CodeがやっていたことをLinux側であるためにLinkerの働きをするtoolchainという機能の設定になります。また、Dockerはコンテナでハードウェアを仮想化しているのでコンパイル・ターゲットはARM64用のLinuxのGNU C Libraryを使うようにしています（https://doc.rust-lang.org/rustc/platform-support.html）。【クリック】開発環境に合わせてください。【クリック】 設定ができたらビルドして実行します。実行時にターゲットを指定するか、コンテナの既定ターゲットを設定してビルドするかは運用設計によって異なります。PoCなどのようにデプロイ先の環境を決めないで可搬性を優先させるとか、プロダクション環境のスケールベースなどのように開発者のミスを軽減したいとか、運用設計によって変更してください。「--release」で実行するとホスト側のWindowsでブラウザやVisual Studio Codeからアクセスできます。【クリック】
  73. デバッグのためにちょっとした変更を加えます。【クリック】WebAssemblyのコンパイラとグルーコードのジェネレーターや文字列操作のライブラリを参照設定します。【クリック】そのためにtomlファイルにパッケージングするライブラリを追加します。【クリック】リクエスト処理の部分では、すでにリクエストストリームをbufferに読み込んであるのでutf8文字列としてコンバートします。これを行ごとに取得するとリクエストヘッダやボディをパースできます。【クリック】最後にちょっと整形したHTMLを返すようにします。【クリック】今度はこれをDockerイメージに仕込みます。
  74. 【クリック】最後に