服务器端渲染

本文将探索如何在服务器上使用 WasmEdge 来渲染 Web UI。我们选择使用，因为它在服务端渲染以及混合开发)领域较为成熟。Percy 同样提供了一个服务端渲染的。我们强烈建议你先去阅读这个示例，弄清楚它是如何工作的。Percy 默认的服务端渲染设置使用了一个原生的 Rust Web 服务器。对于服务器来说，Rust 代码被编译为原生机器码。然后，为了在服务器上运行用户的应用程序，我们需要一个沙箱。尽管我们可以在一个 Linux 容器（Docker）中运行原生代码，一个更高效且更快的方法是使用服务器上的 WebAssembly 虚拟机来运行编译好的代码，尤其是考虑到我们渲染的代码已经被编译成了 WebAssembly。

现在，让我们看一下在一个 WasmEdge 服务器上运行一个 Percy 服务端渲染的服务的步骤。

假设我们在 examples/isomorphic 文件夹中，创建一个新的包，和已有的 server 在同一个文件夹中。

cargo new server-wasmedge

当你把新的包加入到工作区时，你会收到一个警告，因此需要在 [workspace] 的 members 中插入下面这行。文件位于 ../../Cargo.toml。

"examples/isomorphic/server-wasmedge"

趁文件还开着，将这两行放在文件底部：

[patch.crates-io] wasm-bindgen = { git = "https://github.com/KernelErr/wasm-bindgen.git", branch = "wasi-compat" }

然后使用如下内容覆盖我们刚创建包的 Cargo.toml。

[package] name = "isomorphic-server-wasmedge" version = "0.1.0" edition = "2021" # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html [dependencies] wasmedge_wasi_socket = "0" querystring = "1.1.0" parsed = { version = "0.3", features = ["http"] } anyhow = "1" serde = { version = "1.0", features = ["derive"] } isomorphic-app = { path = "../app" }

wasmedge_wasi_socket 包是 WasmEdge 的 Socket 接口。这个工程还在开发中。下一步将 index.html 文件复制到包的根目录。

cp server/src/index.html server-wasmedge/src/

让我们用 Rust 代码在 WasmEdge 中创建一个 Web 服务！ main.rs 程序监听到来的请求，并通过流发送响应。

handler.rs 中的代码解析收到的数据，并返回对应的响应。

中的代码将静态资源和服务器渲染的内容打包成响应对象。对后者来说，你可以看到服务端渲染发生于 app.render().to_string()，产生的字符串替换掉了 HTML 中的占位符。

mime.rs 中的代码将资源文件的拓展名映射成 MIME 类型。

就这么多！现在让我们来构建并运行 Web 应用程序。如果你对原来的示例进行了测试，那你可能已经编译好了客户端的 WebAssembly。

接下来，构建并运行服务器。

cd ../server-wasmedge cargo build --target wasm32-wasi OUTPUT_CSS="$(pwd)/../client/build/app.css" wasmedge --dir /static:../client/build ../../../target/wasm32-wasi/debug/isomorphic-server-wasmedge.wasm

访问 http://127.0.0.1:3000 你就会发现 Web 应用程序在正常工作。

并且，你可以将所有这些步骤放进一个脚本 ../start-wasmedge.sh 里。

#!/bin/bash cd $(dirname $0) cd ./client ./build-wasm.sh cd ../server-wasmedge OUTPUT_CSS="$(pwd)/../client/build/app.css" cargo run -p isomorphic-server-wasmedge

然后将下面这些内容放入 .cargo/config.toml 中。

[build] target = "wasm32-wasi" [target.wasm32-wasi] runner = "wasmedge --dir /static:../client/build"

在这之后，只需要运行一个命令 ./start-wasmedge.sh 就可以执行所有任务，构建并运行我们的 Web 应用程序！

我们也 fork 了 Percy 仓库，为你创建了一个可以直接构建的示例。尽情享受编程的乐趣吧！

3.1.6. 服务端渲染

服务器端渲染