EuDs

EuDs

EuDs's Blog
twitter
github

生命遊戲

起因#

大一的時候做某次課程作業,我的選題就是 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 部署

參考#

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。