手元でWebAssemblyを動かす方法【ローカルWebサーバー構築】
WebAssemblyに興味があってとりあえず動かしてみたいという方向けの内容になります。
ローカル環境で即席のWebサーバーを作りWebAssemblyサンプルを動かす手順について紹介します。
WebAssemblyを動かすのにサーバーが必要な理由
MozzilaのMDNが作成したサンプルを以下からダウンロードできます。
https://github.com/mdn/WebAssembly-examples/
サンプルからわかる通り、WebAssembly（wasm）はhtmlやjsファイルと一緒に利用します。
ただ、htmlやjsファイルとは異なり、ローカルファイルとしてブラウザで開いても
正しく読み込むことができません。
先ほどのサンプルにある、wasmを利用しているhtmlファイルを開くと
次のエラーがブラウザで発生します。
URL scheme must be "http" or "https" for CORS requestエラー内容は「httpもしくはhttps経由でWebAssemblyを利用してください」ですね。
このため、手元でWebAssemblyを動かすにはWebサーバ－が必要になります。
Webサーバ構築の準備【nodeとexpressのインストール】
それではwebサーバーを作ってみましょう。今回はnodeを用いてサーバーを構築します。
まずは土台となるnodeのインストールはこちらから
https://nodejs.org/ja/
node --versionでバージョンが表示されればWebサーバの土台は完成です。
つぎに、expressというWebサーバーを簡単に作るツールを
nodeにインストールしておきます。
npm install -g express-generatornodeと同様にインストールできたかの確認をバージョン表示でします。
npx express --versionWebサーバー構築
準備が整いましたのでWebサーバーを作成します。
作成したいディレクトリで以下のコマンドを打ちます。
npx express --no-viewpublicフォルダが生成されていればOKです。
このpublicフォルダがwebサーバー 127.0.0.1 のドキュメントルートになります。
そして次のコマンドで必要なモジュールを生成しましょう。
npm installWebAssemblyにはapplication/wasm有効化が必要
ここで注意点の紹介です。
生成されたpackage.jsonでバージョンを確認してください。
“express” : “X.XX.X”
もし「4.17.1」より低いバージョンであれば
“express” : “^4.17.1”
と変更してください。
バージョンを変更し終わったら
npm updateで適用します。
何故この作業をするかといいますと、
wasmがcontent-typeとしてapplication/wasmを必要とするためです。
今回使用しているexpressのバージョンが4.17.1未満では、
デフォルトでapplication/wasmが有効になっておらず、
ブラウザ側でエラーが発生しWebAssemblyが動きません。
その場合ブラウザ側で次のようなエラーがでます。
Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.そこで、バージョンを4.17.1以上にすることで、application/wasmを利用できるようにしました。
もし、生成されたexpressのバージョンが4.17.1以上であればこの作業は不要です。
Webサーバーの起動
npm startコマンドを打ちましたら、「http://127.0.0.1:3000/」にアクセスしてみましょう。
expressと表示されていれば無事サーバーが動いています。
もしポートが使用されているとなりましたら
bin/www ファイルの
var port = normalizePort(process.env.PORT || ‘3000’);
を見てください。
‘3000’となっている箇所を変更しましょう。
サンプルを配置し動かしてみる
サーバーが出来あがりましたのでサンプルを配置して実際に動かします。
こちらからソースコードをダウンロードします。
https://github.com/mdn/WebAssembly-examples/
ダウンロードできましたら、js-api-examplesのディレクトリを
そのままpublicフォルダにコピーし、ブラウザからアクセスします。
http://127.0.0.1:3000/js-api-examples/index.html
ブラウザのコンソールに数字が出力されていることが確認できましたでしょうか。
できていればWebAssemblyを動かすことに成功です。
おわりに
以上で、WebAssemblyを手元で動かすための環境構築は終了になります。
とりあえずサンプル動かしてみたいといった方の参考になればうれしいです。
他にもWebAssemblyのサンプルはほかにもありますので、いろいろ配置して動かして遊べますね。
WebAssemblyは2019年に策定と日が浅いですけども、
jsよりもパフォーマンスが良くなる可能性を秘めているため、今後の利用が楽しみです。
では。
