生命遊戲 - EuDs

起因#

大一的時候做某次課程作業，我的選題就是 life of game。從那時候就想自己實現一個。但一直擱置著沒有動手，最近在學 Rust，並正好看到了篇很不錯的教程。這便是這個項目的起因。

我使用的環境是 vecode+wsl2。整體下來除了因為機器性能限制導致內存佔用過高，體驗還是很可以的。

但在搭建項目環境時踩了三個坑。

解決

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

編碼階段跟著教程來，還算順利。但教程中的代碼是全部堆放在一起的。這看起來不太舒服，也不太適合我後續的迭代。我花了些時間將其組件化。但教程的後面也有說明沒有組件化的理由：Shrinking .wasm Size。這讓我意識到還是要根據項目的特點來去做對應的優化和修改。

開發時，我發現shalzz/wasm-game-of-life提供了一個 live demo。是使用 vercel 進行部署的。vercel 之前我也有使用過，但只是用的別人的一鍵部署。我覺得蠻有意思的，於是決定也試試。着實花了些時間，踩了不少坑。這裡展開說下過程。

一開始參考Deploying a WASM-Powered React App on Vercel。後來發現不需要這麼麻煩，因為我已經wasm-pack pulish了，可以直接將wasm-game-of-life-euds63 - npm作為依賴引入。這樣就只需要部署 webpack，而不用再去安裝 Rust 相關的內容。
對代碼進行對應的修改後。我開始嘗試部署。先是遇到路徑問題，我將Root Directory修改為 www。
這時候 vercel 顯示部署成功了，但實際上是運行不了的。我因著之前的經驗，慣性地以為也是路徑問題。開始修改其他地方的路徑。但實際上不是。反復修改幾次後我發現：錯誤的路徑會導致部署成功，而正確的路徑反而會使npm install報錯。而我一開始以為的錯誤路徑是正確的。這一步我覺得還是我沒有好好去看 log 導致的。
根據相應的報錯發現是 node 版本問題。我本地運行成功的 node 版本是 12，而 vercel 只支持 18 和 16，我一開始的想法是另外安裝一個 12 的版本，未果。後來報著試一試的念頭改為 16，驚喜的是npm install成功了。
npm run build後報錯：Missing Public Directory。根據Error List | Vercel Docs嘗試將Output Directory設為 dist，解決。

我使用了子域名的方式進行配置。之前覺得配置子域名蠻神奇的。自己嘗試後發現，似乎是相當於一個 redirect？

我先在我使用的 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);