👋

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

2023/02/04に公開

はじめに

いまさらながらオライリーの「ハンズオンWebAssembly」を読みながら入門したのでメモ.
https://www.oreilly.co.jp/books/9784814400102/

環境構築

Emscriptenが必要なので,homebrewでインストール.

brew install emscripten

ブラウザでHello Worldをやってみる

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

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

Emscriptenでコンパイル.

emcc helloworld.c -o html_template.html

出力ファイルとして,html_template.htmlhtml_template.jshtml_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!が表示されたら成功.

おわりに

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

Discussion