今更ながらWebAssembly触ってみました

発端

昔Rust触ったときは(個人的に馴染まないという意味で)微妙な感じがしたのですぐやめてしまったのですが、Linuxカーネル開発においてもRustが採用されるなど、非常に興味深いのでいつか勉強しなおそうと思っていました
普段Web系のプログラマーとして働いており、Web系の技術としてWebAssemblyも気にはなっていましたが手を出していなかったのですが、Rustでwasm作れるじゃん？ということでこの度ちょっと環境を整えてみました

やったこと

ほぼコレの前半部分

ソースコード一式

Dockerでサクっと見れるようにしてみました
Docker初心者なのでより良いDockerfileの書き方ありましたら教えてください

wasmビルド手順

Dockerfile見ると明確です
やることまとめておけて便利ですね

具体的な手順としてはRust環境整えたら(今回これはDockerのRustイメージ使ってるので省略)

cargo install wasm-pack

して

cargo new --lib /path/to/somewhere

みたいな感じでプロジェクトの雛形を生成します

今回はDockerfileで上記をやった後にホスト側にあるコードをコピーするようにしています
コードを書いたら

wasm-pack build --target web

でビルドします
ビルドすると /path/to/somewhere/pkg というディレクトリに色々生成されており、このビルド成果物がブラウザから呼び出されます

Webサーバー構築

これもDockerでサクっとやっちゃいます
nginxのイメージを使います

nginxのイメージのデフォルトのドキュメントルートは /usr/share/nginx/html になってるようなので、先程の成果物をドキュメントルート以下に配置し、ブラウザでアクセスできるようにします

mkdir /usr/share/nginx/html/wasm
cp /path/to/somewhere/pkg/prj_bg.wasm /usr/share/nginx/html/wasm/
cp /path/to/somewhere/pkg/prj.js /usr/share/nginx/html/wasm/

みたいなことをやりますが、今回Dockerのマルチステージビルドを使ってるので先にビルドしたところからコピーしてます

動作確認

docker-compose up --build

上記コマンドで無事にコンテナが起動したら http://localhost:20080 にアクセスしてみます

無事にアラートが表示されました
JavaScriptからRustで記載したgreetメソッドを実行し、RustのgreetメソッドからはJavaScriptのalertメソッドを実行してブラウザにアラートが表示されています

ちなみにRustの方で alert となってるところを confirm に書き換えればブラウザにconfirmのダイアログが表示されます！

最後に

これで簡単にRustを使ってWebAssemblyの確認を行う環境が手に入ったので、色々弄ってみようと思います
Dockerfileにwasmerのインストール工程が入ってますが今回使ってないので、wasmerも調べてみようと思います

---

それでは良いwasmライフを