服务器端渲染

前端框架让开发者可以使用高级语言和组件模型来创建 Web 应用程序。Web 应用程序需要被构建成静态网页，才能在浏览器中渲染。尽管很多前端框架是基于 JavaScript 的，比如 React 和 Vue，但是随着 Rust 吸引了更多的开发者，基于 Rust 的框架也在不断涌现。这些前端框架使用由 Rust 编译而成的 WebAssembly 来渲染 HTML DOM UI。他们使用 wasm-bindgen 来绑定 Rust 与 HTML DOM。这些框架都把 .wasm 文件发送到浏览器，在客户端渲染 UI，但其中的一些框架提供了对服务端渲染的支持。这意味着我们在服务器上运行 WebAssembly 代码，并构建 HTML DOM UI，然后将 HTML 内容发送到浏览器，以此在较慢的设备和网络环境下获得更好的性能以及更快的启动速度。

如果你对 JavaScript 技术栈以及服务端渲染框架感兴趣，比如 React，请查看我们关于 JavaScript 服务端渲染的章节。

本文将探索如何在服务器上使用 WasmEdge 来渲染 Web UI。 我们选择使用 Percy，因为它在服务端渲染以及混合开发)领域较为成熟。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" }

为什么我们需要一个 fork 的 wasm-bindgen？这是因为在浏览器中， wasm-bindgen 是将 Rust 和 HTML 连接起来必须的胶水。然而在服务器上，我们需要将 Rust 代码编译为针对 wasm32-wasi 目标的代码，这与 wasm-bindgen 是不兼容的。我们 fork 版本的 wasm-bindgen 有一些条件配置，可以为 wasm32-wasi 目标移除其生成的 .wasm 文件中的浏览器特定代码。

然后使用如下内容覆盖我们刚创建包的 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 程序监听到来的请求，并通过流发送响应。

  1. use std::io::Write;
  2. use wasmedge_wasi_socket::{Shutdown, TcpListener};
  4. mod handler;
  5. mod mime;
  6. mod response;
  8. fn main() {
  9.     let server = TcpListener::bind("127.0.0.1:3000", false).unwrap();
  10.     println!("Server listening on 127.0.0.1:3000");
  12.     // Simple single thread HTTP server
  13.     // For server with Pool support, see https://github.com/second-state/wasmedge_wasi_socket/tree/main/examples/poll_http_server
  14.     loop {
  15.         let (mut stream, addr) = server.accept(0).unwrap();
  16.         println!("Accepted connection from {}", addr);
  17.         match handler::handle_req(&mut stream, addr) {
  18.             Ok((res, binary)) => {
  19.                 let res: String = res.into();
  20.                 let bytes = res.as_bytes();
  21.                 stream.write_all(bytes).unwrap();
  22.                 if let Some(binary) = binary {
  23.                     stream.write_all(&binary).unwrap();
  24.                 }
  25.             }
  26.             Err(e) => {
  27.                 println!("Error: {:?}", e);
  28.             }
  29.         };
  30.         stream.shutdown(Shutdown::Both).unwrap();
  31.     }
  32. }

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

  2. #![allow(unused)]
  3. fn main() {
  4. use crate::response;
  5. use anyhow::Result;
  6. use parsed::http::Response;
  7. use std::io::Read;
  8. use wasmedge_wasi_socket::{SocketAddr, TcpStream};
  10. pub fn handle_req(stream: &mut TcpStream, addr: SocketAddr) -> Result<(Response, Option<Vec<u8>>)> {
  11.     let mut buf = [0u8; 1024];
  12.     let mut received_data: Vec<u8> = Vec::new();
  14.     loop {
  15.         let n = stream.read(&mut buf)?;
  16.         received_data.extend_from_slice(&buf[..n]);
  17.         if n < 1024 {
  18.             break;
  19.         }
  20.     }
  22.     let mut bs: parsed::stream::ByteStream = match String::from_utf8(received_data) {
  23.         Ok(s) => s.into(),
  24.         Err(_) => return Ok((response::bad_request(), None)),
  25.     };
  27.     let req = match parsed::http::parse_http_request(&mut bs) {
  28.         Some(req) => req,
  29.         None => return Ok((response::bad_request(), None)),
  30.     };
  32.     println!("{:?} request: {:?} {:?}", addr, req.method, req.path);
  34.     let mut path_split = req.path.split("?");
  35.     let path = path_split.next().unwrap_or("/");
  36.     let query_str = path_split.next().unwrap_or("");
  37.     let query = querystring::querify(&query_str);
  38.     let mut init_count: Option<u32> = None;
  39.     for (k, v) in query {
  40.         if k.eq("init") {
  41.             match v.parse::<u32>() {
  42.                 Ok(v) => init_count = Some(v),
  43.                 Err(_) => return Ok((response::bad_request(), None)),
  44.             }
  45.         }
  46.     }
  48.     let (res, binary) = if path.starts_with("/static") {
  49.         response::file(&path)
  50.     } else {
  51.         // render page
  52.         response::ssr(&path, init_count)
  53.     }
  54.     .unwrap_or_else(|_| response::internal_error());
  56.     Ok((res, binary))
  57. }
  58. }

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

  2. #![allow(unused)]
  3. fn main() {
  4. use crate::mime::MimeType;
  5. use anyhow::Result;
  6. use parsed::http::{Header, Response};
  7. use std::fs::{read};
  8. use std::path::Path;
  9. use isomorphic_app::App;
  11. const HTML_PLACEHOLDER: &str = "#HTML_INSERTED_HERE_BY_SERVER#";
  12. const STATE_PLACEHOLDER: &str = "#INITIAL_STATE_JSON#";
  14. pub fn ssr(path: &str, init: Option<u32>) -> Result<(Response, Option<Vec<u8>>)> {
  15.     let html = format!("{}", include_str!("./index.html"));
  17.     let app = App::new(init.unwrap_or(1001), path.to_string());
  18.     let state = app.store.borrow();
  20.     let html = html.replace(HTML_PLACEHOLDER, &app.render().to_string());
  21.     let html = html.replace(STATE_PLACEHOLDER, &state.to_json());
  23.     Ok((Response {
  24.         protocol: "HTTP/1.0".to_string(),
  25.         code: 200,
  26.         message: "OK".to_string(),
  27.         headers: vec![
  28.             Header {
  29.                 name: "content-type".to_string(),
  30.                 value: MimeType::from_ext("html").get(),
  31.             },
  32.             Header {
  33.                 name: "content-length".to_string(),
  34.                 value: html.len().to_string(),
  35.             },
  36.         ],
  37.         content: html.into_bytes(),
  38.     }, None))
  39. }
  41. /// Get raw file content
  42. pub fn file(path: &str) -> Result<(Response, Option<Vec<u8>>)> {
  43.     let path = Path::new(&path);
  44.     if path.exists() {
  45.         let content_type: MimeType = match path.extension() {
  46.             Some(ext) => MimeType::from_ext(ext.to_str().get_or_insert("")),
  47.             None => MimeType::from_ext(""),
  48.         };
  49.         let content = read(path)?;
  51.         Ok((Response {
  52.             protocol: "HTTP/1.0".to_string(),
  53.             code: 200,
  54.             message: "OK".to_string(),
  55.             headers: vec![
  56.                 Header {
  57.                     name: "content-type".to_string(),
  58.                     value: content_type.get(),
  59.                 },
  60.                 Header {
  61.                     name: "content-length".to_string(),
  62.                     value: content.len().to_string(),
  63.                 },
  64.             ],
  65.             content: vec![],
  66.         }, Some(content)))
  67.     } else {
  68.         Ok((Response {
  69.             protocol: "HTTP/1.0".to_string(),
  70.             code: 404,
  71.             message: "Not Found".to_string(),
  72.             headers: vec![],
  73.             content: vec![],
  74.         }, None))
  75.     }
  76. }
  78. /// Bad Request
  79. pub fn bad_request() -> Response {
  80.     Response {
  81.         protocol: "HTTP/1.0".to_string(),
  82.         code: 400,
  83.         message: "Bad Request".to_string(),
  84.         headers: vec![],
  85.         content: vec![],
  86.     }
  87. }
  89. /// Internal Server Error
  90. pub fn internal_error() -> (Response, Option<Vec<u8>>) {
  91.     (Response {
  92.         protocol: "HTTP/1.0".to_owned(),
  93.         code: 500,
  94.         message: "Internal Server Error".to_owned(),
  95.         headers: vec![],
  96.         content: vec![],
  97.     }, None)
  98. }
  99. }

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

  2. #![allow(unused)]
  3. fn main() {
  4. pub struct MimeType {
  5.     pub r#type: String,
  6. }
  8. impl MimeType {
  9.     pub fn new(r#type: &str) -> Self {
  10.         MimeType {
  11.             r#type: r#type.to_string(),
  12.         }
  13.     }
  15.     pub fn from_ext(ext: &str) -> Self {
  16.         match ext {
  17.             "html" => MimeType::new("text/html"),
  18.             "css" => MimeType::new("text/css"),
  19.             "map" => MimeType::new("application/json"),
  20.             "js" => MimeType::new("application/javascript"),
  21.             "json" => MimeType::new("application/json"),
  22.             "svg" => MimeType::new("image/svg+xml"),
  23.             "wasm" => MimeType::new("application/wasm"),
  24.             _ => MimeType::new("text/plain"),
  25.         }
  26.     }
  28.     pub fn get(self) -> String {
  29.         self.r#type
  30.     }
  31. }
  32. }

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

cd client ./build-wasm.sh

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

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 仓库，为你创建了一个可以直接构建的示例。尽情享受编程的乐趣吧！