Zenn
Closed16

Remix + Rust/wasm-bindgenのテンプレートを作りたい話

numekudinumekudi

ルールは次っぽい。

  • セルには0から9の10パターンの数字が入る
  • 自身のセルの左上、真上、右上を参照し、その合計に対して新たな値をテーブルから引く
numekudinumekudi

top level await対応のためにビルドをesnextに変更。
vite-plugin-wasmも当てるとこうなる。
ビルド通るかはチェックしたほうがいいね。

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import wasm from "vite-plugin-wasm";

declare module "@remix-run/node" {
  interface Future {
    v3_singleFetch: true;
  }
}

export default defineConfig({
  plugins: [
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
        v3_singleFetch: true,
        v3_lazyRouteDiscovery: true,
      },
    }),
    tsconfigPaths(),
    wasm()
  ],
  build: {
    target: "esnext"
  }
});
numekudinumekudi

本来はバックエンドを持たないアプリなのでviteのみでやるべきものではある。
フルスタックアプリ&モノレポのデプロイは初めてなので悩む。

numekudinumekudi

コールドスタートは気にしないのでFaaSでもいいが、Lambdaアダプターをかませるのが面倒。
AWS AppRunnerは常に一つはインスタンスが建ってしまうのでGCP Cloud Runかな。

numekudinumekudi

いや、GCPはプロジェクトを建てることがもう面倒なんよな。

numekudinumekudi

ローカルでnpm run buildしたものをコンテナにコピーする、いわゆるローカルビルドが楽だな。
プロダクトではGithub Actionsを使ったほうがいいけど、npm linkで開発したものをそのまま出荷できるお手軽感がいい。

FROM node:20
WORKDIR /app
COPY ./frontend .
RUN npm install
EXPOSE 3000
CMD [ "npx", "remix-serve", "build/server/index.js" ]
numekudinumekudi

npm run buildするの忘れそーーーーだけどnpm run deployのスクリプトに仕込めばいいか。

numekudinumekudi

肝心のwasm部分。
wasm自体早いとはいえrgba_buffer.extendをループするのは遅いかもしれない。

#[wasm_bindgen]
pub fn get_image(gene: Vec<i32>, seed: Vec<i32>, w: i32, h: i32) -> Vec<u8> {
    let width = w as usize;
    let height = h as usize;

    let mut buffer: Vec<i32> = vec![0; width * height];
    buffer[0..width].copy_from_slice(&seed);

    for y in 0..height {
        for x in 0..width {
            if y == 0 {
                continue;
            }
            let left = (x + width - 1) % width;
            let right = (x + 1) % width;
            let top_row = (y - 1) * width;
            let left_top = buffer[top_row + left];
            let top = buffer[top_row + x];
            let right_top = buffer[top_row + right];
            let sum = left_top + top + right_top;
            println!("{}, {}, {}", top, right_top, left_top);
            let new_value = gene[sum as usize];
            buffer[y * width + x] = new_value;
        }
    }
    let mut rgba_buffer: VecDeque<u8> = VecDeque::new();
    for x in buffer {
        rgba_buffer.extend([(x * 25) as u8, (x * 25) as u8, (x * 25) as u8, 255]);
    }
    rgba_buffer.into()
}
numekudinumekudi

普通に動くね

11-16-2024 11:15:25 AM [remix-serve] http://localhost:3000 (http://169.254.172.2:3000)
11-16-2024 11:21:13 AM GET / 200 - - 111.276 ms
11-16-2024 11:22:01 AM [remix-serve] http://localhost:3000 (http://169.254.172.2:3000)
11-16-2024 11:24:51 AM GET / 200 - - 70.478 ms
11-16-2024 11:24:51 AM GET / 200 - - 97.391 ms
11-16-2024 11:24:51 AM GET / 200 - - 8.069 ms
11-16-2024 11:29:07 AM GET / 200 - - 6.590 ms
11-16-2024 11:31:52 AM npm error path /app
11-16-2024 11:31:52 AM npm error command failed
11-16-2024 11:31:52 AM npm error signal SIGTERM
11-16-2024 11:31:52 AM npm error command sh -c remix-serve build/server/index.js
11-16-2024 11:31:52 AM npm error A complete log of this run can be found in: /root/.npm/_logs/2024-11-16T02_15_18_988Z-debug-0.log
11-16-2024 11:35:09 AM GET / 200 - - 6.428 ms
11-16-2024 11:35:28 AM GET / 200 - - 5.209 ms
11-16-2024 11:36:02 AM [remix-serve] http://localhost:3000 (http://169.254.172.2:3000)
11-16-2024 11:40:57 AM GET / 200 - - 61.392 ms
11-16-2024 11:41:01 AM GET / 200 - - 5.750 ms
11-16-2024 11:46:02 AM npm error path /app
11-16-2024 11:46:02 AM npm error command failed
11-16-2024 11:46:02 AM npm error signal SIGTERM
11-16-2024 11:46:02 AM npm error command sh -c remix-serve build/server/index.js
11-16-2024 11:46:02 AM npm error A complete log of this run can be found in: /root/.npm/_logs/2024-11-16T02_21_55_437Z-debug-0.log
11-16-2024 12:33:54 PM GET / 200 - - 4.288 ms
11-16-2024 12:34:00 PM GET / 200 - - 4.566 ms
11-16-2024 12:35:41 PM GET / 200 - - 4.340 ms
11-16-2024 12:35:46 PM GET / 200 - - 4.662 ms
11-16-2024 12:35:51 PM GET / 200 - - 3.208 ms
11-16-2024 12:36:02 PM GET / 200 - - 3.521 ms
11-16-2024 12:37:17 PM GET / 200 - - 3.675 ms
11-16-2024 12:38:05 PM GET / 200 - - 4.400 ms
11-16-2024 12:44:07 PM GET / 200 - - 3.267 ms
11-16-2024 01:19:30 PM GET / 200 - - 3.189 ms
11-16-2024 01:30:17 PM GET / 200 - - 2.947 ms
11-16-2024 03:13:09 PM GET / 200 - - 3.804 ms
numekudinumekudi

本当はnpmにパッケージを公開したほうが楽なんだろうか。でもソース公開はなんか恥ずかしいね。

numekudinumekudi

さすがにこのタイプの計算はwasmが早いはず。
レスポンスは早ければ早いほどいい。

このスクラップは5日前にクローズされました