在 Vercel 上部署 WASM 支持的 React 应用程序
在 Vercel 上部署 WASM 支持的 React 应用程序
将您的 WASM-react 应用程序推向世界的分步指南！
image by author
在过去的几周里，我一直在构建一个使用 Rust 编写的函数来增强的 React 应用程序。现在，首先，有一点背景……
什么是 Web 组装？
根据webassembly.org，定义如下
WebAssembly（缩写 瓦斯姆 ) 是基于堆栈的虚拟机的二进制指令格式。 Wasm 被设计为编程语言的可移植编译目标，支持在 Web 上部署客户端和服务器应用程序。
简而言之，您可以使用静态编译语言（如 C++、Rust 或 Go）将高性能代码编译为 Web 汇编格式。它具有高度的可移植性，并有望以本机速度执行。
不用说，我对这项相对较新的技术感到非常兴奋。因此，我创建了一个使用 Web 汇编代码作为“伪后端”的 React 应用程序。虽然在我的情况下，有人可能会说这是一种矫枉过正，但它仍然是一个很好的学习机会。
现在让我们开始使用指南。
目录结构
源/
└── 组件
├── ComposePrompt
├── 控制
├── 边缘
├── 节点
└── 款式
wasm解析器/
└── src/
如您所料，我们在项目中有两个不同的子包：
- create-react-app 创建的包。它由 npm 管理，并且会有一个关联的
包.json. - 该库由 cargo — wasm-parser 创建和管理。在这个目录中，可以指定需要编译成 web 程序集的 Rust 代码。
在 React 上调用 WASM 函数
各种详细 文章 解释如何从 javascript 调用 Web 程序集编译函数，反之亦然。无论如何，我将总结广泛的细节。
货物库 — wasm解析器
功能 生成配置 从 React 客户端调用。函数前使用的宏—— wasm_bindgen — 启用 JS 和 WASM 编译代码之间的高级交互。
编译为 WASM
Rust 库可以使用名为 wasm-pack 的工具编译成 WASM。构建命令可以直接添加到 npm 包.json 为方便起见。
此外，需要将编译后的包指定为节点包的依赖项。
反应客户端
在客户端，可以通过从添加到 包.json 提前存档。
部署到 Vercel
现在是部署应用程序的有趣部分，让每个人都可以享受它。对于此示例，我使用 Vercel 作为平台来设置持续部署管道，然后部署我的应用程序的生产版本。为了避免供应商锁定，可以按照相同的程序将其部署到其他平台上。
创建一个 Vercel 帐户
- 第一步是在 Vercel 上创建一个帐户并将其链接到 GitHub .这可确保最新更改反映在已部署的版本中。 笔记 ：这不一定是生产中的最佳选择，但对于业余项目来说就足够了。
- 从 Vercel 上生成的存储库列表中添加您的 GitHub 项目。
- 根据您的前端客户端所基于的框架选择模板。就我而言，我使用了 create-react-app 模板。
修改构建步骤
我们需要覆盖默认的构建步骤来构建 WASM 编译的代码并将其链接到您的 React 客户端。为了促进和标准化构建步骤，我创建了一个自定义 bash 脚本，可以运行该脚本来完成生产构建。我将在下面解释每个步骤：
安装 Rust
Vercel 使用 亚马逊 Linux 2 作为其环境的基础映像。在我们编译为 WASM 之前，必须在环境中安装 Rustup。
安装 wasm-pack
构建 WASM 包
完成生产构建
瞧！你完成了。
如果构建日志是干净的并且您没有任何错误，那么现在应该部署您的 WASM 驱动的 React 应用程序！
**想要连接？** 感谢您阅读我的文章。你也可以找到我[ 领英](https://www.linkedin.com/in/mukkundsunjii/) 和我的工作[ GitHub](https://github.com/mukkund1996) .
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
