EuDs

EuDs

EuDs's Blog
twitter
github

game of life

起因#

大一的时候做某次课程作业,我的选题就是 life of game。从那时候就想自己实现一个。但一直搁置着没有动手,最近在学 Rust,并正好看到了篇很不错的教程。这便是这个项目的起因。

历程#

前期准备#

我使用的环境是 vecode+wsl2。整体下来除了因为机器性能限制导致内存占用过高,体验还是很可以的。

但在搭建项目环境时踩了三个坑。

  1. npm install 失败
  1. wasm-build 失败
  1. wasm-pack test --chrome --headless 失败

编码#

编码阶段跟着教程来,还算顺利。但教程中的代码是全部堆放在一起的。这看起来不太舒服,也不太适合我后续的迭代。我花了些时间将其组件化。但教程的后面也有说明没有组件化的理由:Shrinking .wasm Size。这让我意识到还是要根据项目的特点来去做对应的优化和修改。

部署#

开发时,我发现shalzz/wasm-game-of-life提供了一个 live demo。是使用 vercel 进行部署的。vercel 之前我也有使用过,但只是用的别人的一键部署。我觉得蛮有意思的,于是决定也试试。着实花了些时间,踩了不少坑。这里展开说下过程。

  1. 一开始参考Deploying a WASM-Powered React App on Vercel。后来发现不需要这么麻烦,因为我已经wasm-pack pulish了,可以直接将wasm-game-of-life-euds63 - npm作为依赖引入。这样就只需要部署 webpack,而不用再去安装 Rust 相关的内容。
  2. 对代码进行对应的修改后。我开始尝试部署。先是遇到路径问题,我将Root Directory修改为 www。
  3. 这时候 vercel 显示部署成功了,但实际上是运行不了的。我因着之前的经验,惯性地以为也是路径问题。开始修改其他地方的路径。但实际上不是。反复修改几次后我发现:错误的路径会导致部署成功,而正确的路径反而会使npm install报错。而我一开始以为的错误路径是正确的。 这一步我觉得还是我没有好好去看 log 导致的。
  4. 根据相应的报错发现是 node 版本问题。我本地运行成功的 node 版本是 12,而 vercel 只支持 18 和 16,我一开始的想法是另外安装一个 12 的版本,未果。后来报着试一试的念头改为 16,惊喜的是npm install成功了。
  5. npm run build后报错:Missing Public Directory。根据Error List | Vercel Docs尝试将Output Directory设为 dist,解决。

配置域名#

我使用了子域名的方式进行配置。之前觉得配置子域名蛮神奇的。自己尝试后发现,似乎是相当于一个 redirect?

我先在我使用的 DNS 服务提供商处添加了一条 CNAME 记录。

SUBDOMAINTYPEVALUETTL, SEC
lifegameCNAMEgame-of-life-2hpx.vercel.app86400

然后在 vercel 的对应项目中的 Domains 新增域名 lifegame.ds63.eu.org。

一开始设置好的是没有 ssl 证书。网上查了些资料,发现 vercel 是会自动提供 ssl 证书的。还以为是自己哪里设置出问题了。结果是得等一会儿才行。

收获#

  1. Rust 自定义宏
    • 步骤
      1. 在一个模块中定义并导出自定义宏
        // utils.rs
        #[macro_export]
        macro_rules! log {
           ( $( $t:tt )* ) => {
              web_sys::console::log_1(&format!( $( $t )* ).into());
           }
        }
        
      2. 在其他模块中使用
        // lib.rs
        #[macro_use]
        mod utils;
        
        mod universe;
        
        // universe.rs
        use crate::utils;
        // 直接使用
        log!("This is a log message: {}", some_variable);
        
  2. Always let profiling guide your focus
  3. vercel 部署

参考#

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。