起因#
大一的時候做某次課程作業,我的選題就是 life of game。從那時候就想自己實現一個。但一直擱置著沒有動手,最近在學 Rust,並正好看到了篇很不錯的教程。這便是這個項目的起因。
歷程#
前期準備#
我使用的環境是 vecode+wsl2。整體下來除了因為機器性能限制導致內存佔用過高,體驗還是很可以的。
但在搭建項目環境時踩了三個坑。
- 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提供了一個 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);
- 在一個模塊中定義並導出自定義宏
- 步驟
- Always let profiling guide your focus
- 一些檢測性能工具
- edge 開發者工具 -> 性能
cargo benchcmp
perf
- Time Profiling - Rust and WebAssembly這章值得再讀幾次
- 一些檢測性能工具
- vercel 部署