Rust,Wasm,Dockerで"hello world"をする
Mac OS でRust,Wasmの環境を作ろうとしたのですが、
コマンド
cargo install cargo-generate
がエラーになり進めなかったため、dockerで環境構築しました。
環境構築の方法についてはこちら↓で記事にしております。
今回は、ここから更に、簡単なwebページを作成して"hello world"するまでを解説いたします。
参考にした記事はこちら↓です。
ゼロからRust+WasmをFirebaseでデプロイするまでを簡単に
上記の記事をそのままやろうとしても上手くできないので、詰まったポイントについて解説いたします。
環境構築
こちらの記事で解説しています。
テンプレートを取ってくる
コマンド
cargo generate --git https://github.com/rustwasm/wasm-pack-template
Project Name: wasm-lesson
src/lib.rs の内容を書き換える
元の関数名が「greet」なのを「aisatsu」に変更
src/lib.rs
mod utils;
use wasm_bindgen::prelude::*;
// When the `wee_alloc` feature is enabled, use `wee_alloc` as the global
// allocator.
#[cfg(feature = "wee_alloc")]
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
#[wasm_bindgen]
extern {
fn alert(s: &str);
}
#[wasm_bindgen]
//pub fn greet() { ここを変更しています。
pub fn aisatsu() {
alert("Hello, wasm-lesson!");
}
プロジェクトをビルド
コマンド
wasm-pack build
webページテンプレートを取ってくる
コマンド
npm init wasm-app www
index.jsを書き換える
wasm.greet()を「wasm.aisatsu()」に変更します。
index.js
import * as wasm from "hello-wasm-pack";
//www.greet() これを変更します。
wasm.aisatsu();
npmで依存関係を解決
コマンド
cd www
npm install
Wasmを index.html が読み込めるようにする
www/package.jsonのdependenciesにディレクトリを追加する。
package.json
{
//...
"devDependencies": {
"wasm-lesson": "file:../pkg", // 追加
// ...
}
}
再び依存関係を解決します。
コマンド
npm install
実行するもエラーになる
ここでサーバーを立ち上げます
コマンド
npm run start
しかしブラウザを立ち上げてlocalhost:8080 するとエラーになってしまいます。
サーバーの設定ファイルを変更する
サーバーのホストとポートを変更するために、設定ファイルを開きます。
コマンド
vim node_modules/webpack-dev-server/bin/options.js
すると、host,portについての記載部分があるのでこちらを次のように変更します。
options.js
//~~省略~~
port:{
default:'8080', //これを追記
describe:'The port',
group:CONNECTION_GROUP,
}
//~~省略~~
host:{
type:'string',
// default:'localhost',
default:'172.17.0.2', //これを追記
//~~省略~~
こうすることでホストのブラウザでも実行を確認できるようになります。
こちら↓の記事を参考にしました。
dockerコンテナ上でnode.jsのサーバを起動し、ホスト端末からアクセスする
もし、まだエラーになっている場合、dockerのポート設定が8080ではないか、
または172.17.0.2以外を指定する必要があるかもしれません。
上記のポストが参考になると思いますので参照してください。
再度、試してみる。
コマンド
npm run start
今度は成功です。ブラウザで動作を確認できるようになりました。