如何使 Rust Game of Life WebAssembly 作为静态网站运行？

Posted 2023-02-19

【中文标题】如何使 Rust Game of Life WebAssembly 作为静态网站运行？

【英文标题】：How to make the Rust Game of Life WebAssembly work as a static website?

【发布时间】：2020-12-02 21:44:12

【问题描述】：

我已经阅读了 Rust Game of Life 的教程，并且在 Web 浏览器中有一个可以运行的游戏，但它只能在随附的演示 Web 服务器上运行。我可以使用npm start 启动服务器，它在端口 8080 上运行 webpack-dev-server。当我通过该端口访问该站点时，它工作正常。但是，如果我尝试将该站点复制到 Apache 之类的 Web 服务器，它就无法正确加载。我目前从中得到的错误是：

Error importing `index.js`: TypeError: Error resolving module specifier “wasm-game-of-life”. Relative module specifiers must start with “./”, “../” or “/”. bootstrap.js:5:23
<anonymous> http://www.north-winds.org/gol/bootstrap.js:5

根据教程，网站的根目录是存储库中名为 www/ 的文件夹，从 Rust 程序生成的 wasm 模块放在 pkg/ 下。有一个来自www/node_modules/wasm-game-of-life 的符号链接指向../../pkg/，我已将该符号链接替换为***pkg/ 文件夹的实际副本，以便网站完全包含在www/ 文件夹中，并且然后将该文件夹放在我的网站上http://www.north-winds.org/gol/，但是，访问它会返回上面的错误。我需要修改什么才能使其独立运行？

据我了解，这个 WebAssembly Game-of-Life 基本上是一个独立的客户端应用程序，除了可以提供带有适当 mime 类型的静态文件的 Web 服务器之外，不需要任何东西。我看不出有什么特别的要求。我确实在某处看到提到 WebSockets，但我不知道为什么这个应用程序需要这样做。我将它与来自https://webassembly.org/ 的 C 的“Hello, World”WebAssembly 示例进行了比较，它最终得到了一个从 C 源代码生成的 .wasm 文件，以及一个用于执行它的 javascript 和 html 支持文件。当简单地复制到静态 Web 服务器位置时，这些文件可以正常工作。这就是我想要的 Rust 示例。

Rust Game-of-Life 中的一些相关代码如下。*** HTML 文件包括以下几行：

<script src="./bootstrap.js"></script>

引导 JavaScript 文件仅包含以下内容：

import("./index.js")
  .catch(e => console.error("Error importing `index.js`:", e));

并且它引用的 index.js 文件在 Wasm 的其他粘合逻辑中包含以下内容：

import  Universe, Cell  from "wasm-game-of-life";                             
                                                                            
// Import the WebAssembly memory at the top of the file.                        
import  memory  from "wasm-game-of-life/wasm_game_of_life_bg";                

让这项工作独立工作缺少什么？

【参考方案1】：

www 和 pkg 文件夹包含您需要的源文件，但您还没有静态站点。 create-wasm-app 模板使用 Webpack，因此您需要通过在 www 文件夹中运行 npm run build 来构建最终输出。这将创建一个名为 dist 的子文件夹，其中包含可以放置在 Web 服务器上的实际静态文件。

【讨论】：

就是这样！我什至使用纯静态 Web 服务器 darkhttpd 运行它，只需要确保它呈现正确的 mime 类型即可。令人惊讶的是，与模板文件夹的开头相比，文件名有多么不同。