Rust,Wasm,Dockerで"hello world"をする MacOs catalina

#Rust,Wasm,Dockerで"hello world"をする

Mac OS でRust,Wasmの環境を作ろうとしたのですが、

コマンド

cargo install cargo-generate

がエラーになり進めなかったため、dockerで環境構築しました。

環境構築の方法についてはこちら↓で記事にしております。

Rust,Wasmの環境をDockerで作る MacOS

今回は、ここから更に、簡単なwebページを作成して"hello world"するまでを解説いたします。

参考にした記事はこちら↓です。
ゼロからRust+WasmをFirebaseでデプロイするまでを簡単に

上記の記事をそのままやろうとしても上手くできないので、詰まったポイントについて解説いたします。

##環境構築

こちらの記事で解説しています。

Rust,Wasmの環境をDockerで作る MacOS

#テンプレートを取ってくる

コマンド

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のサーバを起動し、ホスト端末からアクセスする
]
(https://qiita.com/hotdrop_77/items/a2ca316c97ba4b748d9a)

もし、まだエラーになっている場合、dockerのポート設定が8080ではないか、
または172.17.0.2以外を指定する必要があるかもしれません。
上記のポストが参考になると思いますので参照してください。

#再度、試してみる。

コマンド

npm run start

今度は成功です。ブラウザで動作を確認できるようになりました。

#参考にした記事

Rust,Wasmの環境をDockerで作る MacOS

ゼロからRust+WasmをFirebaseでデプロイするまでを簡単に

[dockerコンテナ上でnode.jsのサーバを起動し、ホスト端末からアクセスする
]
(https://qiita.com/hotdrop_77/items/a2ca316c97ba4b748d9a)