起因#
大一的时候做某次课程作业,我的选题就是 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 部署