👋

ハンズオンWebAssemblyを読んではじめてみる

2023/02/04に公開

はじめに

いまさらながらオライリーの「ハンズオンWebAssembly」を読みながら入門したのでメモ．

Emscriptenが必要なので，homebrewでインストール．

brew install emscripten

helloworld.cというファイルを作成して以下のコードを記述．

int main() {
  printf("Hello world! \n")
}

Emscriptenでコンパイル．

emcc helloworld.c -o html_template.html

出力ファイルとして，html_template.html，html_template.js，html_template.wasmの3つのファイルが生成される．

$ ls
helloworld.c      html_template.html      html_template.js        html_template.wasm

Webサーバを起動してブラウザで確認する．

$ python -m http.server 8080

ブラウザでlocalhost:8080にアクセスして画面で確認できる．

WebAssemblyの利点の1つにポータビリティがあるので，コンテナでも動かしてみる．

Emscriptenでwasmモジュールのみを生成する．

emcc helloworld.c -o hello.wasm

以下のような最小構成のDockerfileを作成．

FROM scratch

COPY helloworld.wasm /opt/wasm_test/helloworld.wasm

ENTRYPOINT [ "/opt/wasm_test/helloworld.wasm" ]

コンテナイメージを作成する．

docker image build --platform=wasi/wasm32 -t wasm-hello:1 .

コンテナを起動する．

docker run --runtime=io.containerd.wasmedge.v1 --platform=wasi/wasm32 wasm-hello:1

標準出力にHello world!が表示されたら成功．

ブラウザとコンテナで同じコードが動いて何が嬉しいのかユースケースがまだイマイチわからないけど，さわってみないと始まらないのでとりあえず読み進めてハンズオンしていく．