人生のゲーム

起因#

私が大学 1 年生の時、ある課題のためにライフゲームを作成しました。それ以来、自分で実装してみたいと思っていましたが、手を付けることができませんでした。最近、Rust を学んでいて、偶然にも素晴らしいチュートリアルを見つけました。これがこのプロジェクトのきっかけです。

経過#

前準備#

私は VS Code と WSL2 を使用しています。全体的に、マシンの性能制限による高いメモリ使用量以外は、非常に快適な体験でした。

ただし、プロジェクト環境のセットアップ中に 3 つの問題に遭遇しました。

npm install が失敗する

解決策：Ubuntu で npm をインストールする
参考：WSL で npm を使用できない場合

wasm-build が失敗する

解決策：

[package.metadata.wasm-pack.profile.release]
wasm-opt = false

参考：failed to download binaryen-version_90-x86-windows.tar.gz

wasm-pack test --chrome --headless が失敗する

解決策：wasm-pack test --chromeに変更する
参考： Headless Chrome test fails

コーディング#

コーディングの段階では、チュートリアルに従って順調に進みました。ただし、チュートリアルのコードはすべて一緒にまとめられているため、見た目があまり良くなく、後続のイテレーションには適していません。そのため、少しの時間をかけてコンポーネント化しました。ただし、チュートリアルの後半では、コンポーネント化しない理由も説明されています：Shrinking .wasm Size。これにより、プロジェクトの特性に基づいて最適化と変更を行う必要があることを認識しました。

デプロイ#

開発中に、shalzz/wasm-game-of-lifeがライブデモを提供していることを発見しました。これは vercel を使用してデプロイされています。以前にも vercel を使用したことがありますが、他の人のワンクリックデプロイしか使用していませんでした。それが面白そうだと思い、試してみることにしました。実際には、かなりの時間とトラブルがかかりました。以下に詳細を説明します。

最初にDeploying a WASM-Powered React App on Vercelを参考にしました。しかし、これほど面倒な手順は必要ないことに気付きました。なぜなら、すでにwasm-pack publishしているため、wasm-game-of-life-euds63 - npmを依存関係として直接インポートするだけで済むからです。これにより、Rust 関連のコンテンツをインストールする必要がなく、Webpack のみをデプロイすればよくなります。
コードを適切に変更した後、デプロイを試みました。最初にパスの問題に遭遇し、Root Directoryを www に変更しました。
この時点で vercel はデプロイに成功したと表示されますが、実際には実行できません。以前の経験から、パスの問題だと思い込んで他の場所のパスを変更し始めましたが、実際には違いました。数回の繰り返しの変更の後、間違ったパスではデプロイに成功し、正しいパスではnpm installがエラーを出すことに気付きました。最初に間違ったパスを正しいと思っていました。このステップでは、ログをよく見なかったために起こったミスだと思います。
対応するエラーに基づいて、node のバージョンの問題だとわかりました。ローカルで成功した node のバージョンは 12 でしたが、vercel は 18 と 16 のみをサポートしていました。最初は別の 12 のバージョンをインストールしようとしましたが、うまくいきませんでした。その後、試してみるという考えで 16 に変更したところ、npm installが成功しました。
npm run build後にエラーが発生しました：Missing Public Directory。Error List | Vercel Docsに従って、Output Directoryを dist に設定しました。

ドメインの設定#

サブドメインの設定方法を使用しました。以前はサブドメインの設定が非常に神秘的だと思っていました。自分で試してみると、リダイレクトのようなものだとわかりました。

まず、使用している DNS サービスプロバイダーで CNAME レコードを追加しました。

SUBDOMAIN	TYPE	VALUE	TTL, SEC
lifegame	CNAME	game-of-life-2hpx.vercel.app	86400

次に、vercel の対応するプロジェクトの Domains に lifegame.ds63.eu.org というドメインを追加しました。

最初に設定したのは SSL 証明書がない状態でした。いくつかの情報を調べた結果、vercel は自動的に SSL 証明書を提供することがわかりました。自分の設定に問題があると思っていましたが、実際にはしばらく待つ必要があるだけでした。

得られたもの#

Rust のカスタムマクロ

手順

モジュール内でカスタムマクロを定義してエクスポートする

// utils.rs
#[macro_export]
macro_rules! log {
   ( $( $t:tt )* ) => {
      web_sys::console::log_1(&format!( $( $t )* ).into());
   }
}

他のモジュールで使用する

// lib.rs
#[macro_use]
mod utils;

mod universe;

// universe.rs
use crate::utils;
// 直接使用
log!("This is a log message: {}", some_variable);

常にプロファイリングに焦点を当てるべき
- パフォーマンスの測定ツール
  1. Edge 開発者ツール -> パフォーマンス
  2. cargo benchcmp
  3. perf
- Time Profiling - Rust and WebAssemblyの章は何度も読む価値があります
vercel のデプロイ

参考文献#

Rust and WebAssembly
Play John Conway’s Game of Life 最高のライフゲーム実装の 1 つを発見しました
shalzz/wasm-game-of-life: Game of Life implementation using Rust, Javascript and WebAssembly!
Projects Overview | Vercel Docs