Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@stnao

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のサーバを起動し、ホスト端末からアクセスする

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

再度、試してみる。

コマンド
npm run start

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

参考にした記事

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

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

dockerコンテナ上でnode.jsのサーバを起動し、ホスト端末からアクセスする

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
stnao

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?