Rust WASM API 作成、Nodeから実行

 概要Rust WASM + node , API 作成する試作的な内容になります。
[ 公開 2025/06/20 ]

 関連https://developer.mozilla.org/ja/docs/WebAssembly/Guides/Rust_to_Wasm

 環境rustc 1.87.0
cargo 1.87.0
wasm-pack
ubuntu 22 (windows WSL)
node 20
express.js

 書いたコードhttps://github.com/kuc-arc-f/wasm-handler-1/tree/main/handler-wasm-1
wasm-pack install
cargo install wasm-pack
start
npm i
npm run build:wasm
npm run dev
handler-wasm-1/src/index.js
GETの場合 / の場合、文字レスポンスを返却
https://github.com/kuc-arc-f/wasm-handler-1/blob/main/handler-wasm-1/src/index.js
const wasm = require('./wasm_module'); // wasm-pack の出力を参照

app.post('/greet', (req, res) => {
  const name = req.body.name || 'Anonymous';
  const message = wasm.greet(name);
  res.send({ message });
});
app.get('/', (req, res) => {
  const message = wasm.greet("WASM");
  res.send(message);
});

 Vercel デプロイ , Rust WASM API今回は、Github経由でデプロイする例です。
vercel.json使います。
npm i
npm run build:wasm
npm run dev
node_modules , target フォルダ以外は、 pushします。
vercelから、インポートすると、デプロイできました。

knaka Tech-Blog

 ルーティング、Rust WASM APIルーティング設定の内容になります、

 環境rustc 1.87.0
cargo 1.87.0
wasm-pack
ubuntu 22 (windows WSL)
node 20

 書いたコードhttps://github.com/kuc-arc-f/wasm-handler-1/tree/main/handler-wasm-2
start
npm i
npm run build:wasm
npm run dev
handler-wasm-2/src/lib.rs
expressから、pathnameを渡す。
GETの場合、get_handlerで、分岐処理
一致する場合、handler関数を実行
一致しない場合、404 扱い。
https://github.com/kuc-arc-f/wasm-handler-1/blob/main/handler-wasm-2/src/lib.rs
#[wasm_bindgen]
pub fn get_handler(pathname: &str) -> String {
    println!("path={}", pathname);
    let mut ret = "";
    if pathname == "/foo" {
        let r1 = get_foo_handler(pathname);
        ret = &r1;
        return ret.to_string();
    }
    let data = MyData {
        data: "NOT FOUND".to_string(),
        ret: 404,
    };
    serde_json::to_string(&data).unwrap()
}

pub fn get_foo_handler(pathname: &str) -> String {
    println!("get_foo_test.path={}", pathname);
    let data = MyData {
        data: "get_foo_handler".to_string(),
        ret: 200,
    };
    serde_json::to_string(&data).unwrap()
}

knaka Tech-Blog

 reqwest , Rust WASM 外部通信reqwest　外部通信のメモです。
フロントから指定エンドポイント呼ばれる Rust関数です。
http client 的な機能です。
Google Spread のシートデータと連携します。
database　使いません。
Google Spread sheet 接続設定、こちら
https://zenn.dev/link/comments/35a958a75b16fe

 環境reqwest
rustc 1.87.0
cargo 1.87.0
wasm-pack
ubuntu 22 (windows WSL)
node 20

 書いたコードhttps://github.com/kuc-arc-f/wasm-handler-1/tree/main/handler-wasm-3
start
npm i
npm run dev
.env
GOOGLE_AUTH_API_KEY: API_KEY
SPREADSHEET_ID_1: SPREAD sheet_id
GOOGLE_AUTH_API_KEY=""
SPREADSHEET_ID_1=""
handler-wasm-3/Cargo.toml
https://github.com/kuc-arc-f/wasm-handler-1/blob/main/handler-wasm-3/Cargo.toml
[package]
name = "wasm_module"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
wasm-bindgen = "0.2"
wasm-bindgen-futures = "0.4"
serde = { version = "1.0.188", features = ["derive"] }
serde_json = "1.0.140"
serde-wasm-bindgen = "0.4"
reqwest = { version = "0.11", features = ["json"] }
js-sys = "0.3"

handler-wasm-3/src/lib.rs
Promise 使います。
Google Spread APIの、apikey, sheetId は、node側から渡す。
https://github.com/kuc-arc-f/wasm-handler-1/blob/main/handler-wasm-3/src/lib.rs
        if pathname == "/get_sheet_list" {
            println!("get_sheet_list_handler.path= {}", pathname);
            let urlparam3 = "/values/シート1!A1:C100?key=";
            let urlparam4 = apikey;
            let url = format!("{}{}{}{}", "https://sheets.googleapis.com/v4/spreadsheets/", sheet_id, urlparam3, urlparam4);
            let resp = reqwest::get(url)
            .await?
            .text()
            .await?;
            let data = GenericResponse {
                data: resp.to_string(),
                ret: 200,
            };
            let out = serde_json::to_string(&data).unwrap();
            return Ok(JsValue::from_str(&out))
        }
        let data = GenericResponse {
            data: "NOT FOUND".to_string(),
            ret: 404,
        };
        let out = serde_json::to_string(&data).unwrap();
        Ok(JsValue::from_str(&out))

knaka Tech-Blog

 React + Rust WASM 構成React　追加して。バック側 WASM 通信等の試作です。

 書いたコードhttps://github.com/kuc-arc-f/wasm-handler-1/tree/main/wasm-6

 環境rustc 1.87.0
cargo 1.87.0
wasm-pack
ubuntu 22 (windows WSL)
node 20
node/express
start
npm i
npm run dev
wasm-6/Cargo.toml
https://github.com/kuc-arc-f/wasm-handler-1/blob/main/wasm-6/Cargo.toml
[package]
name = "wasm_module"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
wasm-bindgen = "0.2"
wasm-bindgen-futures = "0.4"
serde = { version = "1.0.188", features = ["derive"] }
serde_json = "1.0.140"
serde-wasm-bindgen = "0.4"
reqwest = { version = "0.11", features = ["json"] }
js-sys = "0.3"

wasm-6/src-ts/client.tsx
front 側
https://github.com/kuc-arc-f/wasm-handler-1/blob/main/wasm-6/src-ts/client.tsx
import ReactDOM from 'react-dom/client'
import React from 'react'

function App() {
  return (
  <div>
    <h1 className="text-3xl font-bold">hello!</h1>
    <hr />
    <span>Hi , WASM + React</span>
  </div>
  );
}
ReactDOM.createRoot(document.getElementById('app')).render(
    <App />
)
console.log('createRoot')


 デプロイ , vercelnpm run build
node_modules , target フォルダ以外は、 pushします。
vercelから、インポートすると、デプロイできました。