人生のゲーム

起因#

大学 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 現時点で最も優れたライフゲームの実装を発見しました
shalzz/wasm-game-of-life: Game of Life implementation using Rust, Javascript and WebAssembly!
Projects Overview | Vercel Docs